新建项目
npm install vue-cli
vue init webpack exprice
npm install
npm run dev
注意事项
- methods、watch、生命周期，不能使用箭头函数（箭头函数的 this 绑定父级上下文，不指向 Vue 实例）
- setTimeout()、setInterval() 只能使用箭头函数
实例
var Vm = new Vue({
el: '#id', //绑定元素，同Vm.$mount()
data:{
key: val //绑定数据
},
data: function(){
//或 data(){...}
//Vue组件中的data必须是一个函数
},
computed:{
key: function(){
//计算属性，会根据依赖自动更新
},...
},
filters:{
key: function(){
//数据过滤器
},...
},
methods:{
key: function(){
//事件处理函数
},...
},
watch:{
key: function(){
//数据观察
//实例化时调用$watch遍历watch的每一个属性
},...
},
生命周期钩子: function(8){
//生命周期
},
components:{
component_name: val //局部注册组件
}
})
插值 Mustache
文本
<tag>{{...}}</tab>
输出HTML
站点上动态渲染的 HTML 会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
<tag v-html="" />
JavaScript 表达式
- 只能包含单个表达式
- 只能访问全局变量的一个白名单，如 Math 和 Date 。不应该在模板表达式中试图访问用户定义的全局变量。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
指令
指令 (Directives) 是带有 v- 前缀的特殊属性。当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
指令 : 参数 . 修饰符
属性绑定
<tag v-bind:attr="" />
<tag :attr="" />
事件绑定
<tag v-on:event="" />
<tag @event="" />
<tag @event.修饰符="" />
事件修饰符：
- stop
双向绑定
<input v-model="" />
条件渲染
<tag v-if="" />
<tag v-else />
<tag v-if-else="" />
列表渲染
<tag v-for="item in/of items" />
<tag v-for="(index,item) in/of items" />
仅以下函数触发视图更新：
- push() / pop()
- shift() / unshift()
- splice()
- sort()
- reverse()
只渲染元素和组件一次
<tag v-once />
计算属性
在模板中放入太多的逻辑会让模板过重且难以维护,对于任何复杂逻辑，都应当使用计算属性。
计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解。
var vm = new Vue({
computed: {
reversedMessage: function () {
// 这里我们声明了一个计算属性 reversedMessage
// 我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数
}
}
})
