$，例如：vm.$data，vm.$el，vm.$watch()(这里假设vm是某个实例名)，详情可以参考APIVue实例有自己的生命周期，提供了一些钩子函数给我们写自己的逻辑代码：
ps：不要在选项属性或回调上使用箭头函数，即这些钩子函数不要用箭头函数的写法，因为他们没有this
生命周期图
文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
<span>Message: {{ msg }}</span>v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
<span v-once>这个将不会改变: {{ msg }}</span>原始 HTML
v-html 指令输出真正的html，而不是字符串
<p>Using mustaches: {{ rawHtml }}</p> 输出字符串
<p>Using v-html directive: <span v-html="rawHtml"></span></p> 输出rawHtml变量代表的HTML使用 JavaScript 表达式
所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>指令
常见有v-if,v-on,v-bind,v-for。
参数：
<a v-bind:href="url">...</a>在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定
动态参数：
<a v-bind:[attributeName]="url"> ... </a>这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用
修饰符：
<form v-on:submit.prevent="onSubmit">...</form>修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，例子的.prevent就是修饰符
缩写：
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>模板一般不要加入过多的逻辑，只是用来渲染会职责分明一些，把逻辑处理防盗计算属性，会更加合理；
<p>Computed reversed message: "{{ reversedMessage }}"</p>var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})这里的reversedMessage就是计算属性，可以逆序一个字符串。
定义一个方法，能够达到同样的效果：
<p>Reversed message: "{{ reversedMessage() }}"</p><p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}两者区别：计算属性是基于它们的响应式依赖进行缓存的，方法总会再次执行函数；在不同场景下选择不同的方式吧~
tips：使用计算属性，而不是侦听属性（watch里定义的方法）；计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter；自定义的侦听器watch在数据变化时执行异步或开销较大的操作时是最有用的
v-bind 用于 class 和 style，表达式结果的类型除了字符串之外，还可以是对象或数组
先介绍Class绑定
绑定对象
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
data: {
isActive: true,
hasError: false
}当 isActive 或者 hasError 变化时，class 列表将相应地更新,也可以让绑定对象不内联定义在模板里，结果也是一致的：
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}计算属性也可以更灵活的展现（不举例子了）绑定数组
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}绑定组件（语法和前面完全类似）
Style绑定
v-bind:style 的对象语法
绑定对象
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}或者直接写
<div v-bind:style="styleObject"></div>
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}绑定数组
<div v-bind:style="[baseStyles, overridingStyles]"></div>v-if、v-else-if、v-else可以配合使用：
<div v-if="type == 'A'">
A
</div>
<div v-else-if="type == 'B'">
B
</div>
<div v-else="type == 'C'">
C
</div>
data : {
type : "B"
}
在<template> 元素上使用 v-if 条件渲染分组，显示多个元素
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>用key管理重复元素
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>使用key标示元素后，Vue不会采用偷懒的复用，而会重新渲染元素
v-show：只有显示和不显示两种
<h1 v-show="ok">Hello!</h1>v-if vs v-show：需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
v-for用于列表渲染
迭代数组
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})in可以替换为of迭代对象
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})使用唯一key配合v-for保证渲染正确（删除、排序、过滤等场景用得到）
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>数组变异方法 (mutation method)
push()、pop()、shift()、unshift()、splice()、sort()、reverse()，例子：
example1.items.push({ message: 'Baz' })非变异 (non-mutating method) 方法
filter()、concat()、slice()
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})返回值是一个新数组，可以把这个数组赋值给原来的数组达到同样的效果注意事项
数组的一些错误写法：
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的正确写法：
//第一个问题
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
//实例写法
vm.$set(vm.items, indexOfItem, newValue)
//第二个问题
vm.items.splice(newLength)对象的一些错误写法：
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性，但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性：
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
Vue.set(vm.userProfile, 'age', 27)
//或者
vm.$set(vm.userProfile, 'age', 27)v-model指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定,本质上是语法糖。
文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea><textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。复选框
多个复选框，绑定到同一个数组，例子：
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>new Vue({
el: '#example-3',
data: {
checkedNames: ['Jack']
}
})单选按钮
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>new Vue({
el: '#example-4',
data: {
picked: 'Two'
}
})选择框
单选：
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>new Vue({
el: '...',
data: {
selected: 'A'
}
})多选时 (绑定到一个数组):
<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div> new Vue({
el: '#example-6',
data: {
selected: ['A','B']
}
})v-for显示下拉框例子：
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
}) <!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" ><input v-model.number="age" type="number"><input v-model.trim="msg">原文：https://www.cnblogs.com/huangmengke/p/11647646.html