写在前面：
1.安装使用参照官方文档
2.这里只记录vue重点
笔记开始：
一个vue组件的data必须是一个函数，这样每个实例维护的是一份被返回对象的独立拷贝，如果没有这条规则，数据的修改会影响所有的其他实例。
如果模板属性是变量的话，vue 2.0中使用v-bind的方式来绑定变量，可以省略v-bind，例如
列表渲染：比如数组中直接采用赋值的方式不会造成列表的渲染，this.list[1] = {name:'hello',age:23}，这种写法不会触发重新渲染，可以使用vue全局的set方法来做，Vue.set(this.list,1,{name:'hello',age:23})
条件渲染：v-if,v-show，v-if表示标签在文档流中直接被删除，v-show表示标签还存在文档流中，通过display:none/block来切换。
vue插槽
如果组件内容过多，通过props属性显得太过臃肿，可以使用vue插槽slot，将slot元素作为承载分发内容的出口，比如很多个dialog，各个dialog内容不一样.
vue中触发自定义事件是子组件通过this.$emit('事件名','传递的参数')，例如this.$emit('my-event',this.hello)定义事件，父组件通过@my-event="responseEvent"监听事件。
//子组件 child
//父组件
计算属性和数据监听
computed计算属性可以根据其他属性来动态的更新计算属性，也可以使用method方法的方式来直接执行函数，二者的区别是：data里面的属性不更新的时候计算属性是不会更新的，但是method方法的方式不论data里面的属性是否更新都会执行函数。
如果计算属性里面没有引用data里面的属性，那计算属性从第一次加载完组件之后是永远定死的不会变动的，但method方法的方式每次都会执行，比如获取时间戳new Date()。
属性监听watch：就是监听vuejs的变量，每当这个变量被改动的时候，都去执行特定的操作
export default {
watch:{
myVal(newVal,oldVal){
this.getList();
}
},
methods:{
getList(){
}
}
}
父子组件通信
父组件向子组件传递消息是通过属性prop，子组件向父组件传递消息是通过发布emit事件。
vue高级功能－过渡/动画
给需要过渡的元素外层加一个transition标签,这是vue内置的一个组件，两种实现过渡的方式：
css:enter时：v-enter v-enter-active leave时：v-leave v-leave-active
show
js:通过v-bind:is,v-if ,v-else ,v-show来动态加载组件
vue命令查看
//vue命令列表
E:\workCode\vuedemo3>vue --help
Usage: vue [options]
Commands:
init generate a new project from a template
list list available official templates
build prototype a new project
create (for v3 warning only)
help [cmd] display help for [cmd]
//vue可以使用的模板列表
E:\workCode\vuedemo3>vue list
Available official templates:
★ browserify - A full-featured Browserify + vueify setup with hot-reload, li
nting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototypi
ng.
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, lint
ing, testing & css extraction.
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping
vue项目搭建
vue项目初始化通过vue-cli初始化
//安装vue-cli
npm install vue-cli -g
//初始化项目，模板选webpack
vue init webpack my-vue
//安装项目依赖
npm install
//在localhost启动测试服务器
npm run dev
//生成线上目录（部署）
npm run build
总结：通过一个轮播小组件来感受一下vue
//app.vue
![]()
参考：https://cn.vuejs.org/v2/guide/installation.html