条件渲染：https://learning.dcloud.io/#/?vid=8
列表渲染：https://learning.dcloud.io/#/?vid=9
事件渲染：https://learning.dcloud.io/#/?vid=10
表单输入绑定：https://learning.dcloud.io/#/?vid=11
数据插值
视频 ：https://learning.dcloud.io/#/?vid=5
文档：https://cn.vuejs.org/v2/guide/syntax.html#%E6%8F%92%E5%80%BC
插值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 加载好vue.js后，会加载一个Vue对象 -->
</head>
<body>
<div id="app">
<h1>1. 插值</h1>
<p>一起变化：{{message}}</p>
<!-- 将v-once加到标签上即可 -->
<p v-once>变化一次：{{message}}</p>
</div>
<script>
var data = {
message: "Hello Vue!",
rawHtml: "",
};
var app = new Vue({
el: '#app',
data: data
})
// 1. 响应式数据
data.message = "Hello World!";
</script>
</body>
</body>
</html>
展示原始html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 加载好vue.js后，会加载一个Vue对象 -->
</head>
<body>
<div id="app">
<h1>2. 展示原始html</h1>
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
<script>
var data = {
message: "Hello Vue!",
rawHtml: "",
};
var app = new Vue({
el: '#app',
data: data
})
// 2. 显示原始html(注意：动态给data添加值不会有效 )
data.rawHtml = "<b>这是加粗文字</b>"
</script>
</body>
</body>
</html>
使用JavaScript表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 加载好vue.js后，会加载一个Vue对象 -->
</head>
<body>
<div id="app">
<h1>3. 使用JavaScript表达式</h1>
<p>{{ number + 1 }}</p>
<p>{{ ok ? 'YES' : 'NO' }}</p>
<p>{{ message.split('').reverse().join('') }}</p>
<!-- 这是语句，不是表达式，所以语法错误 -->
<!-- {{ var a = 1 }} -->
<!-- 流控制也不会生效，请使用三元表达式，所以语法错误 -->
<!-- {{ if (ok) { return message } }} -->
</div>
<script>
var data = {
message: "Hello Vue!",
rawHtml: "",
number: 10,
ok: true,
};
var app = new Vue({
el: '#app',
data: data
})
// 3. 使用 JavaScript 表达式
</script>
</body>
</body>
</html>
模块语法的几个概念
模板语法-指令：https://learning.dcloud.io/#/?vid=6
文档：https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4
指令
指令 (Directives) 是带有 v- 前缀的特殊特性。指令的职责是，当表达式的值改变时，将其产生的连带
影响，响应式地作用于 DOM。指令是用于扩展html标签功能和属性。
如： v-if 指令:
现在你看到我了
参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
如：
href : …
click : …
修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如， .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault() ：
<form v-on:submit.prevent="onSubmit">...</form>
缩写
v-bind的缩写：
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-on的缩写：
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
计算属性(computed)
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板
过重且难以维护。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
所以，对于任何复杂逻辑，你都应当使用计算属性。
这里我们声明了一个计算属性 reversedMessage 。我们提供的函数将用作属性 ,这里的
reversedMessage 的值依赖于message，当message发生变化时， reversedMessage 的值也会发生
变化
// html
<div id="example_computed">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
// js
// 4. 计算属性
data = {
message: "Hello"
}
var vm = new Vue({
el: '#example_computed',
data: data,
computed: {
// 计算属性的 getter
// => 这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
data.message = "abc"
方法(methods)
// html
<h1> 5. 方法</h1>
<div id="example_methods">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage() }}"</p>
</div>
// js
// 5. 方法
data = {
message: "Hello"
}
var vm = new Vue({
el: '#example_methods',
data: data,
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
// return Date.now()
}
}
})
方法与计算属性
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。
属性缓存：计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重
新求值。然而，不同的是这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计
算属性会立即返回之前的计算结果，而不必再次执行函数。
这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
computed: {
now: function () {
return Date.now()
}
}
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
其他
侦听属性
侦听器
模板数据与样式渲染
1). class与style绑定
你可以在对象中传入更多属性来动态切换多个 class。此外， v-bind:class 指令也可以与普通的 class
属性共存。当有如下模板:
下面的实例用到了 v-bind 指令，表示给元素添加一个属性， v-bind:属性名 可缩写成 :属性名
对象语法
该语法表示 active 和 text-danger 这个 class 存在与否将取决于数据属性 isActive 和
hasError 的 truthiness。
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
示例
// html
<h1> 6. class与style绑定 </h1>
<div id="example_style">
<p>对象语法</p>
<div
class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
>* 这是class与style绑定（根据isActive和hasError的值来决定是否使用类选择器）
</div>
<div class="static" v-bind:class="MyClass"
>* 使用计算属性</div>
</div>
// js
// 4. class与style绑定
var data = {
isActive: true,
hasError: true
};
var app = new Vue({
el: '#example_style',
data: data,
computed:{
MyClass: function(){
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
})
数组语法
我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
渲染为：
<div class="active text-danger"></div>
示例：
// html
<h1> 6. class与style绑定 </h1>
<div id="example_style">
...
<p>数组语法</p>
<div v-bind:class="[activeClass, errorClass]">这是数组语法示例</div>
</div>
// js
// 4. class与style绑定
var data = {
isActive: true,
hasError: true,
activeClass: 'active',
errorClass: 'text-danger'
};
var app = new Vue({
el: '#example_style',
data: data,
computed:{
MyClass: function(){
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
})
style的绑定方法与class的绑定一样，可直接看官方文档