模板语法
文本：
代码语言：javascript复制<span>Message: {{ msg }}</span>v-once 一次性地插值，当数据改变时，插值处的内容不会更新
代码语言：javascript复制<span v-once>这个将不会改变: {{ msg }}</span>v-html 指令
代码语言：javascript复制<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p><div v-bind:id="dynamicId"></div>{{ number 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' id"></div><p v-if="seen">现在你看到我了</p>v-if 指令将根据表达式 seen 的值的真假来插入/移除 元素
代码语言：javascript复制<a v-bind:href="url">...</a>深刻理解语义化
Web 语义化是指使用恰当语义的 HTML 标签、Class 类名等内容
HTML 为网页文档内容提供上下文结构和含义
CSS语义就是class和ID命名的语义 Class 属性作为 HTML 与 CSS 衔接的纽带，其本意是用来描述元素内容的
image.png
html语义化就是让页面的内容结构化
Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容
html语义化及css命名语义化 利于 SEO，便于阅读维护理解
Web标准-结构、样式和行为的分离
结构部分、样式部分和行为部分 结构部分主要包括XML标准、XHTML标准 样式标准主要是指CSS标准 行为标准主要包括DOM标准和ECMAScript标准
HTML：超文本标记语言，负责网页的结构
通常语义化HTML会使代码变的更少，使页面加载更快
语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式
提升网页的可访问性和交互操作性
提升搜索引擎优化(SEO)的效果
v-on 指令，它用于监听 DOM 事件
代码语言：javascript复制<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>计算属性和侦听器
image.png
代码语言：javascript复制<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: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'计算属性缓存，方法，计算属性，侦听属性，计算属性的setter
代码语言：javascript复制<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}计算属性是基于它们的响应式依赖进行缓存的
只在相关响应式依赖发生改变时它们才会重新求值
只要 message 还没有发生改变 多次访问 计算属性会立即返回之前的计算结果，而不必再次执行函数
image.png
image.png
侦听属性
代码语言：javascript复制<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: {
fullName: {
// getter
get: function () {
return this.firstName ' ' this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
image.png
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
