一、vue是什么
vue是一套构建用户界面的框架，想通过尽可能简单的API实现响应式的数据绑定和组合的视图组件。
二、Vue安装
1.安装node.js
从node.js官网上下载并安装node，一直下一步，安装完成后，打开命令行工具，输入node -v 如果出现相应的版本号则说明安装成功。查看nmp的版本，最好是3.x以上。
2.安装淘宝镜像
在命令行工具中输入
npm install -g cnpm --registry=https://registry.npm.taobao.org 安装之后输入cnpm -v，如果出现相应版本号，则成功。安装淘宝镜像的原因是可以提高安装速度，以后用npm的地方都用cnpm代替。
3.安装webpack
在命令行工具中输入
cnpm install webpack -g同样用webpack -v来验证是否安装成功。
4.安装vue-cli脚手架构建工具
在命令行工具中输入
cnpm install vue-cli -g 同样用vue -V验证是否安装成功，注意这里时大写的V。
三、如何使用vue-cli来构建项目
1.使用Git
在要存放工程的文件目录下右键选择Git Bash Here。
2.安装vue脚手架
输入
vue init webpack exprice（项目名称不能为中文）
3.安装项目依赖
通过cd命令进入创建的工程目录，再输入cnpm install
4.安装vue路由模块和网络请求模块
输入
cnpm install vue-router vue-resource --save每个目录的作用:
5.启动项目
输入
cnpm run dev（注意由于服务器默认启动的是本地的8080端口，所以需要确保8080端口未被占用。)
四、简单的语法示例分析
<body>
<div id="app">
<p>{{ message }}</p> //使用{{}}实现数据绑定进行文本插值
</div>
<script>
new Vue({
el: '#app', //将该vue实例挂载到<div id=”app”></div>这个元素上。
data: {
message: 'hello'
}
})
</script>
</body>五、指令
指令用于在表达式的值改变时，将某些行为应用到DOM上。
v-bind：响应的更新html属性。可以缩写成：bind
v-on：事件监听。eg：<a v-on:click="doSomething"></a> 可以缩写成@，eg：<a @click="doSomething"></a>
v-if：根据表达式的值为true还是false来决定是否显示。
v-show：和v-if类似，同样是根据表达式的值来决定是否显示该元素。
v-for：循环语句，通常用来渲染一个列表。
v-model：数据的双向绑定。
***v-if和v-show的区别：
1.v-show不支持语法也不支持v-else
2.v-if的初始条件为假时，什么都不做。而v-show不管初始条件为什么，都会渲染。
3.v-if为false时，源代码不显示该元素，而v-show则会显示。
六、计算属性computed
复杂的逻辑一般都使用计算属性。
Computed与method的对比：computed是基于依赖缓存的，只要相关依赖没有变，就不会再次执行该属性，直接返回之前的值。而函数是只要发生渲染method就会执行该和函数，method是没有缓存的。
七、Vue中的重要选项
1.data：数据，存放要用的数据
注意data中的数据的写法，需要写在return里面，如下图：
2.Methods：方法，可以取到data中的数据
3.Watch：监听，一旦监听的对象发生变化就执行该方法
八、过滤器
用于改变数据的形式。
只能用在mustache插值和v-bind这两个地方。
过滤器可以串联。
九、Vue.js路由
路由就是用于设定访问路径并将路径和组件映射起来的，能通过不同url访问不同内容。传统的页面是通过使用超链接来实现页面切换跳转的，而使用路由就使其变成了路径之间的切换，即组件的切换。
路由的核心；更新视图不重新请求页面。
十、组件
1.组件的作用
组件是vue的核心之一，可以将页面的各个子模块看成一个组件，将这些模块拆分出来，这样可以使维护变得容易。
2.组件使用的规则
组件使用前需要先注册，且组件的注册需要写在挂载id之前。
组件名最好为小写，并且包含一个短杠。
一个组件下只能有一个并列的
3.全局组件
使用Vue.component进行全局注册，所有vue实例都会共享此组件。
4.局部组件
局部组件只能在引入当前的vue实例中有效，在当前vue实例中components属性加上引入进来的组件实例即可。
5.表行组件
表行组件不能直接写自定义的tag，而要使用is属性。
下图为错误示例：
下图为正确示例：
6.组件之间的通信
子组件只能在父组件的template中使用。
父组件向子组件传递数据：props
子组件向父组件传递数据：使用
on监听事件、
emit触发事件
十一、生命周期
beforeCreate：实例初始化之后，数据观测和事件配置之前被调用。
created：实例创建完成之后被调用。
beforeMount：在挂载之前被调用，在服务器端渲染期间不能被调用。
mounted：el被新创建的vm.$el替换并挂载到实例上之后调用该钩子，在服务器端渲染期间不能被调用。
updated：由于数据更改导致的虚拟DOM重新渲染之后会被调用。
activated：keep-alive组件激活时调用，在服务器端渲染期间不能被调用。
deactivated：keep-alive组件停用时被调用，在服务器端渲染期间不能被调用。
beforeDestroy：实例销毁之前被调用，在服务器端渲染期间不能被调用。
destroyed：vue实例销毁后调用，事件监听器会被移除，所有子实例而被销毁，在服务器端渲染期间不能被调用。
十二、过渡的css类名
如图所示，每个类名就在上图中不同时刻生效，v-是前缀，可以通过<transition name=”my-transition”>来重置前缀名，例如v-enter变成了my-transition-enter。
自定义过渡类名优先级会高于普通类名。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
