Vue.js
文章平均质量分 54
Dear_Mr
尽自己的努力,做好该做的事情
展开
-
Vue.js的简介
声明式渲染:vue.js的核心是一个允许简介的模板语法来声明式的将数据渲染进DOM <div id="app"> {{ message }} </div> <script> // 这是我们的Model new Vue({ el: '#app', data: {原创 2017-05-10 19:25:27 · 681 阅读 · 0 评论 -
FLIP 动画实现多维网格的过渡
FLIP 动画实现多维网格的过渡Demo地址:https://jsfiddle.net/chrzmzxv/<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"></script>原创 2017-05-17 21:26:29 · 1842 阅读 · 0 评论 -
Vue的过渡效果
Vue在插入、更新或者移除DOM的时候,提供多种方式的应用过渡效果包括以下工具:在CSS过渡和动画中自动应用class可以配合第三方css动画库,如Animate.css在过渡钩子函数中使用JavaScript直接操作DOM可以配合使用第三方JavaScript动画库,如Velocity.js单元素/组件的过滤Vue提供了transition的封装组件,在下面的情况中,可以给任何元素和组件原创 2017-05-17 21:31:49 · 8325 阅读 · 0 评论 -
组件之间的通信
准备阶段先写子组件componentA.vue:<template> <div class="hello"> <h1>{{ msg }}</h1> </div></template><script> export default { name : 'componentA', data : function() { return { m原创 2017-05-18 22:53:39 · 439 阅读 · 0 评论 -
自定义指令
简单来说就是根据自己的需要定义一些自己的指令,比如v-color, v-focus<div id="app"> <p v-color="color">{{num}}</p> <button v-on:click="addNum">add</button></div><script type="text/javascript"> Vue.directive('color',原创 2017-05-21 20:51:18 · 1319 阅读 · 0 评论 -
Vue生命周期
Vue2.0的生命周期/钩子函数在之前的博文中,简单的介绍了一下Vue的生命周期,今天看一下它们的运行时机,需要注意的点如下: 所有的生命周期钩子自动绑定this上下文到实例中,因此可以访问数据,对属性和方法进行运算,也就是说,不能通过箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos()),这是因为箭头函数绑定了父上下文,因此this 与期待的原创 2017-05-22 17:20:38 · 684 阅读 · 0 评论 -
Vue项目webpack打包部署到服务器
Vue项目webpack打包部署到服务器这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例。必须要配置的就是/config/index.js在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现原创 2017-06-05 22:01:35 · 72899 阅读 · 15 评论 -
关于vue-router中的query动态传参问题的解决
关于vue-router中的query动态传参问题的解决最近在写项目,在写项目的过程会总发现这样或者那样的问题,比如说vue-router中的query如何传递动态的参数,经过了一些波折才解决了问题,问题描述如下:希望跳转的时候url是这样的:http://localhost:8080/editmovie?id=****<li><router-link :to="{path:'editmovie',原创 2017-06-02 12:09:03 · 7783 阅读 · 0 评论 -
vue-router学习
alias别名在路由配置文件中:export default new Router ({ routes : [ { path: '/', name: 'Hello', component: Hello }, { path: '/params/:newId/:newTitle', name : 'params'原创 2017-05-27 23:15:30 · 459 阅读 · 0 评论 -
vuex—数据管理器
vuex—数据管理器 “vuex是用于Vue的状态管理模式,它采用集中式存储管理应用的所有组件的状态。”vuex的应用核心就是仓库(store),管理的是状态,状态,就是共用的属性或者数据,vuex将共用的属性进行管理,vuex的特点,第一点状态存储是响应式的,第二点就是不能直接更改store的状态,改变store的状态的唯一途径就是显示的提交mutations对于每一个应用来说,仅仅只含有一原创 2017-07-21 13:11:06 · 957 阅读 · 0 评论 -
vuex学习之路之出现的错误一
vuex学习之路之出现的错误一关于vuex是什么,怎么用的问题?参考这里控制台报出的错误是”TypeError: Cannot read property ‘state’ of undefined”,具体如下所示:代码如下所示: import store from '../vuex/store' import {mapState} from 'vuex' export defa原创 2017-07-22 13:09:09 · 6842 阅读 · 0 评论 -
axios中的this
今天别人使用axios中遇到了这个问题,因为感觉比较好奇,所以就帮着解决了一下,这篇博客用于记录一下此次错误的分析这个是Vue中的钩子函数,在里面利用axios进行了一次get请求 created() { axios.get('https://httpbin.org/get') .then(function(response) {原创 2017-07-22 14:35:10 · 4940 阅读 · 6 评论 -
Vue组件的书写形式
之前只是用过第三种方式去创建组件,最近接触到第一种写法的项目,所以写下了下面的内容使用script标签<!-- index.html --><!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <div id='index-container'> </原创 2017-12-28 17:47:53 · 480 阅读 · 0 评论 -
Vue的单页应用中如何引用单独的样式文件
Vue的单页应用中如何引用单独的样式文件问题描述对于.vue的文件来说,也是由结构、行为、样式三部分组成,在样式部分有个scoped的属性,也就是当前页面有效,当style标签内样式比较多时或者.vue文件之间有重复的时候,总感觉看起来不够整洁,所以就需要引入一些公共样式。下面就先说下如何引入单独的样式文件,这里就以CSS文件为例,之后再说下我的项目中的样式文件的划分引入单独的样式...原创 2018-03-28 18:40:54 · 7272 阅读 · 0 评论 -
vue中对鼠标划过事件处理方式
vue中对鼠标划过进行处理鼠标事件进行监听需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层翻阅了一些博客,发现好多都提到了mouse事件,如mouseover、mouseout、mouseenter、mouseleave,在之后我自己也通过这种方法进行了尝试。<template>...原创 2018-07-11 23:07:18 · 43338 阅读 · 1 评论 -
单页面多路由区域操作
单页面多路由区域操作在一个页面中有两个及以上的<router-view>区域,需要通过设置路由的index.js,来操作这些区域的内容App.vue 中设置:<router-view></router-view><router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"原创 2017-05-26 22:52:32 · 2421 阅读 · 0 评论 -
Vue的响应式原理
下面的是一张来自Vue官网的图片:如何追踪变化??当把一个普通的JavaScript对象传递给Vue实例的data选项,Vue将遍历这个对象的所有属性,并且利用Object.defineProperty这些属性全部转换为getter/setter,当然由于兼容性问题,所以Vue不支持IE8及更低版本的浏览器从上面的图可以看出,对于数据Data来说,它里面的getter与setter是对于外部是不可见原创 2017-05-15 23:09:10 · 1967 阅读 · 0 评论 -
使用v-if v-else发现没有执行
使用v-if v-else发现没有执行最近在学习Vue,因为刚开始学习,所以总会遇到这样那样的问题,今天要说的一个错误就是在看Vue的官方文档的时候,发现在使用v-if和v-else指令的时候,相应的内容都出现了初始代码:<div v-if="Math.random > 0.5"> " Math.random > 0.5 "</div><div v-else> " Math.random原创 2017-05-10 22:09:10 · 8821 阅读 · 0 评论 -
使用Vue.js完成一个todo-list
使用Vue.js完成一个todo-list首先分析一下页面的组成,要与一个供输入的用户输入框,然后下面应该是个列表,这个列表是用户的输入的内容的展示页面结构: <div id="todo-list-emp"> <input type="text" placeholder="Add a todo" v-model="newTodoText" v-on:keyup.enter="add原创 2017-05-11 16:52:38 · 2827 阅读 · 0 评论 -
template
1.写在构造器里的template比如说向下面这样: <div id="app">{{message}}</div> <script type="text/javascript"> new Vue({ el : "#app", data : { message : "Template的使用"原创 2017-05-22 22:03:25 · 494 阅读 · 0 评论 -
Vue的组件
组件,也就是一个标签,只不过这个标签是自定义的而已,它的注册方式分为全局和局部两种 组件注册方式全局组件注册方式这种方式利用的Vue.component <h3>全局组件:</h3> <div id="app"> <panda></panda> </div> <script type="text/javascript"> Vue.comp原创 2017-05-22 22:53:21 · 406 阅读 · 0 评论 -
Vue.extend构造器
1.简单介绍Vue.extend(options)参数:对象用法:使用Vue构造器,创建一个“子类”,参数是一个包含组件选项的对象,其中,data选项中必须是函数描述:Vue.extend返回的是一个“扩展实例构造器”,也就是预设了部分选项的Vue的实例构造器,它常常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件作为标签的自定义元素时,会自动调用“扩展实例构造器”来原创 2017-05-22 16:01:02 · 35385 阅读 · 1 评论 -
Vue关于数据绑定出错
Vue关于数据绑定出错错误提示:相对应的代码: <input id="input-check" type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"> <label for="input-check">check</label> <script type="text/javas原创 2017-05-12 13:29:15 · 1255 阅读 · 0 评论 -
mixins混合
mixins混合混合是一种灵活的分布式复用 Vue 组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。例子:// 定义一个混合对象var myMixin = { created: function () { this.hello() }, methods: { hello: function () {原创 2017-05-23 21:28:28 · 777 阅读 · 0 评论 -
extend选项和delimiters选项
extend选项允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用Vue.extend,这主要是为了便于扩展单文件组件,它和mixin有类似之处<div id="app"> {{num}} <button @click="add">addNumber</button></div><script type="text/javascript"> var原创 2017-05-23 22:01:11 · 464 阅读 · 0 评论 -
Vue错误提示
在控制台可以看到这样的错误提示:对应的代码如下: <template id="per"> <p>姓名:</p> <p>年龄:</p> <p>职业:</p> </template>这个错误的原因就是Vue规定的需要用大的容器管理小的容器,所以需要把所有的p标签包含在一个div当中,如下 <template id="per">原创 2017-05-24 19:53:17 · 2173 阅读 · 0 评论 -
介绍vue-cli
一、安装vue-cli安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。出现版本号说明你已经安装了npm和node,我这里的npm版本为3.10.10。如果该命令不可以使用,需要安装node软件包,根据你的系统版本选择下载安装就可以了。npm没有问题,接下来我们可以用npm 命令安转载 2017-05-24 21:37:40 · 2583 阅读 · 0 评论 -
Vue组件中的slot
Vue组件中的slotslot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p>原创 2017-05-24 21:39:44 · 1305 阅读 · 0 评论 -
实例方法与实例事件
实例方法$mount挂载 <div id="app"></div> <script type="text/javascript"> var v = Vue.extend({ template : `<p>{{message}}</p> `, data : function() { retur原创 2017-05-24 21:42:16 · 558 阅读 · 0 评论 -
Vue入门
Vue实例构造器每个Vue.js应用都是通过构造函数vue创建一个Vue的根实例启动的:var vm = new Vue({ //选项});Vue.js没有完全遵循MVVM模式,Vue的设计无疑是收到了它的启发。因为在文档中经常会使用vm(viewModel的简称)这个变量名表示Vue实例在实例化Vue时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项可以扩展原创 2017-05-14 00:54:59 · 3568 阅读 · 0 评论 -
学习Vue的资源汇总
阅读原文一. 资源教程综合类vuejs 英文资料 Vue中文资料总汇 Vue.js 的一些资源索引 vue资料入门类vue 快速入门 Vue.js 中文系列视频教程 on Laravist英文教程Learning Vue 1.0: Step By Step社区sf - vue标签 知乎 - vue标签 Vue.js专业中文社区 vue - issues二. 文档API Vue.js转载 2017-05-15 17:01:17 · 1508 阅读 · 0 评论 -
vue-router传递参数
vue-router传递参数通过URL地址传递参数只是一个形式,vue-router为我们提供了传递参数的功能,有这么一个需求,当点击导航菜单时,跳转页面能显示出当前页面的路径,来告诉用户页面位置(类似面包屑导航)用name传递参数name的一种作用就是传递参数router->index.js中:import Vue from 'vue'import Router from 'vue-router原创 2017-05-25 23:09:31 · 5264 阅读 · 0 评论 -
Vuex中注册模块的方式
在实际的项目应用中,如果把该项目中应用到的所有的state和mutation、Action等放置在全局的store中,会出现全局store内容过于庞大,并且变量名,方法名都很受限制,而vuex中的模块概念就恰好可以解决此问题下面就如何利用vuex中的模块概念,解决全局Store过于复杂问题,给出两种方式,静态注册和动态注册。首先我们创建的模块的名称为moduleA,如下moduleA.js...原创 2018-11-28 00:06:49 · 3136 阅读 · 0 评论