全局安装vue cli
命令：npm install -g @vue/cli创建新项目
命令：vue ui 或者 vue create 项目名称
vue ui是以图形化界面管理和创建项目；
vue create 项目名称是以命令行的方式进行创建项目；
指令简述
{{ msg }}// :为v-bind的缩写形式
{{index}}{{item.text}}// items可以为数组，也可以为对象，建议尽可能在使用 v-for 时提供 key。 // 当处于同一节点，v-for 的优先级比 v-if 更高。0.5"> 大于0.5 小于等于0.5// v-show 根据表达式之真假值，切换元素的 display 属性。// v-if 根据表达式的值的真假条件渲染元素。在切换时元素组件被销毁并重建// 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
This will never change: {{msg}}v-once 只渲染元素和组件一次
v-model 绑定表单
v-if 条件加载
v-else
v-show
v-for 循环加载
v-bind 动态地绑定属性
v-on 绑定事件监听器
v-html 更新元素的 innerHTML
v-text 更新元素的 textContent
生命周期
beforeCreate 实例创建之前被调用。
created 实例创建完成后被立即调用，在这一步，实例已完成数据观测，属性和方法的运算，watch/event 事件回调。
beforeMount 挂载开始之前被调用
mounted 挂载完成后立即调用，不会承诺所有的子组件也都一起被挂载。
beforeUpdate 数据更新前调用
updated 数据更新完成后调用，不会承诺所有的子组件也都一起被重绘。
beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed 实例销毁后调用。
当一些数据的变动依赖于其他数据的时候，我们可以使用计算属性，可以像绑定普通属性一样在模板中绑定计算属性。
计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值，依赖不变，直接返回上次计算结果。
var vm = new Vue({ el: '#demo', data: { firstName: 'xiaoming', lastName: 'li'
}, computed: { fullName: function () { return this.firstName + ' ' + this.lastName
}
}
})关于过滤器过滤器可以用在两个地方：双花括号插值和 v-bind 表达式，和angular的过滤器是一样一样的。我们日常中经常需要对日期的显示进行格式化，此时过滤器就派上用场了。
{{today | formatDate}}
var vm = new Vue({ el: '#demo', data: function() { return { today: Date.now()
}
}, filters: { formatDate: function (value) { let date = new Date(value) let year = date.getFullYear() let month = date.getMonth()+1>10 ? date.getMonth()+1 : '0'+ (date.getMonth()+1) let day = date.getDate()>10 ? date.getDate() : '0'+ date.getDate() return `${year}-${month}-${day}`
}
}
})我们不仅可以在组件内部定义过滤器，还可以定义全局过滤器（任何组件都可以使用），除此之外过滤器还可以进行串联使用。
Vue.filter('formatDate', function (value) { let date = new Date(value) let year = date.getFullYear() let month = date.getMonth()+1>10 ? date.getMonth()+1 : '0'+ (date.getMonth()+1) let day = date.getDate()>10 ? date.getDate() : '0'+ date.getDate() return `${year}-${month}-${day}`})关于混入let myMixin = { data: function() { return { greet: 'hello mixin'
}
}, created: function () { console.log('minin created') this.hello()
}, methods: { hello: function () { console.log('hello from mixin!')
}
}
}new Vue({ mixins: [myMixin], data: function () { return { message:'hello', today: Date.now(), greet: 'hello app'
}
}, created: function () { console.log('app created') this.hello() console.log(this.$data.greet)
}, methods: { hello: function () { console.log('hello from app!')
}
}
})结果
我们发现混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将与混入该组件本身的选项进行合并。对于不同的选项，合并规则略有不同。
对于生命周期：将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
对于data选项：在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。
对于methods, components等：将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。
作者：tiancai啊呆
链接：https://www.jianshu.com/p/1533efcb903f
