.$data .#$el
$data表示vue实例中data的值
$el表示vue实例中el的值,注意 el效果等同getElementById.遇到多个同样classname，只处理第一个
<div class="box">
{{ a }} //此处值为1
</div>
<div class="box">{{ a }}</div>
<div class="box">{{ a }}</div>
<script>
var data = { a: 1 }
var vm = new Vue({
el: '.box',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('.box') // => true
// $watch 是一个实例方法
</script>
vue生命周期图
vue生命周期图
上图原文地址
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。
例：
- created钩子
created钩子用在一个vue实例创建之后执行代码:
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
vue模版语法
文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定：
<span v-once>这个将不会改变: {{ msg }}</span>
原始HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML ，你需要使用 v-html 指令：
<div v-html="rawHtml"></div>
以下是{{ Mustache }}语法与v-html的区别实例：
{{}}的语法会被解析成普通文本，v-html则会解析为HTML
特性
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>
延伸: vue的作用域和js作用域类似
示例：
<body>
<div class="app-5">
for
<span v-bind:id="src" v-bind:title="src">number</span>
<span v-bind:title="yeah">helloworld</span>
<div class="third">
<div v-bind:title="yeah">
div-next
</div>
</div>
<script>
var app5 = new Vue({
el: ".app-5",
data: {
src: "nice",
yeah: "good job"
}
})
</script>
</body>
//生成如下页面
<div class="third">
<div title="good job">
div-next
</div>
</div>
上图示例中，在<div class="app-5">下声明一个new Vue，.app-5下的元素使用vue中变量yeah时，若自己的作用域下未找到，则到上级作用域去找，直到找到为止，若找不到，则报错
使用js表达式
vue支持所有原生js表达式
{{ 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- 前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
<p v-if="seen">现在你看到我了</p>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
//若seen＝true，则p内文字可见，若seen＝false，p内文字消失
这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素。
参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：
<a v-bind:href="url"></a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
<a v-on:click="doSomething">
在这里参数是监听的事件名
修饰符
修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>
之后当我们更深入地了解 v-on 与 v-model时，会看到更多修饰符的使用
缩写
v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue.js 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
v-bind缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue.js 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的
计算属性
模板内的表达式是非常便利的，但是它们实际上是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板不再简单和清晰。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。
这就是对于任何复杂逻辑，你都应当使用计算属性的原因。
基础例子
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
})
结果：
Original message: "Hello"
Computed reversed message: "olleH"
这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数：
console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'
你可以打开浏览器的控制台，自行修改例子中的 vm。vm.reversedMessage 的值始终取决于 vm.message 的值。
你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖于 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：计算属性的 getter 函数是没有连带影响 (side effect)，这使得它易于测试和推理。
计算属性的缓存 vs 方法
你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：
<p>Reversed message: "{{ reversedMessage() }}"</p>
<script>
var vm = new Vue({
el: "p",
data: {
message: "happy"
},
methods: {
reversedMessage: function(){
return this.message.split("").reverse().join("")
}
}
})
</script>
我们可以将同一函数定义为一个方法而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
computed: {
now: function () {
return Date.now()
}
}
相比之下，每当触发重新渲染时，方法的调用方式将总是再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的的计算属性 A，它需要遍历一个极大的数组和做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
计算属性 vs 被观察的属性
Vue 确实提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：watch 属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的想法是使用计算属性而不是命令式的 watch 回调。细想一下这个例子：
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
上面代码是命令式的和重复的。将它与计算属性的版本进行比较：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
好得多了，不是吗？
computed与methods
学到这里遇到了computed和methods两个方法
用以下代码对比
<body>
<div class="box">
<div class="child">
{{ message}}
</div>
<div class="child">
{{ timing }}
</div>
<div class="fn">
{{ timed() }}
</div>
</div>
<script>
var vm = new Vue({
el: ".box",
data: {
message: "hello"
},
methods: {
timed: function(){
return Date.now()
}
},
computed: {
timing: function(){
return Date.now()
}
}
})
</script>
</body>
//在控制台改变vm.message结果时。div.fn的结果会改变，div.child的结果不会改变
methods方法返回的结果，在message改变时也会从新计算。computed则不会
计算属性的 setter
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
<body>
<div class="box">
{{ fullName }}
</div>
<script>
var vm = new Vue({
el: ".box",
data: {
firstName: "nick",
lastName: "song"
},
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
})
</script>
</body>
现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也相应地会被更新。
Class 与 Style 绑定
数据绑定的一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
绑定 HTML Class
对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值。
你可以在对象中传入更多属性用来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。如下模板：
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
如下 data :
data: {
isActive: true,
hasError: false
}
渲染为：
<div class="static active"></div>
当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true ，class 列表将变为 "static active text-danger" 。
你也可以直接绑定数据里的一个对象：
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
'text-danger': false
}
}
渲染的结果和上面一样。我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：
<div v-bind:class="classObject"></div>
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
//expr1 && expr2 如果expr1 能转换成false则返回expr1,否则返回expr2. 因此, 在Boolean环境中使用时, 两个操作结果都为true时返回true,否则返回false.
数组语法
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为：
<div class="active text-danger"></div>
如果你也想根据条件切换列表中的 class，可以用三元表达式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
此例始终添加 errorClass ，但是只有在 isActive 是 true 时添加 activeClass。
不过，当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
<script>
var vm = new Vue({
el: "div",
data: {
isActive: false,
errorClass: "error"
}
})
</script>
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
渲染为：
<div class="error"></div>
网友评论