二、Vue基础语法
1.模板语法：
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
-
插值
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 e.g：<span>Message: {{ msg }}</span> -
指令
1.v-once指令：执行一次性的插值，当数据改变时候，插值处内容不会更新。 e.g：<span v-once>这个将不会改变: {{ msg }}</span> 2.v-html指令：输出真正的HTML。 e.g：<div v-html="name"></div> 3.v-text指令：等同插值表达式 e.g：<div v-text="name"></div> -
Demo源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="./vue.js"></script> <title>模板语法</title> </head> <body> <div id="app"> <div>{{name}}</div> <div v-text="name"></div> <div v-html="name"></div> </div> <script> var vm = new Vue({ el: "#app", data: { name: "<h1>tom</h1>" } }) </script> </body> </html>- Result
- Result
2.计算属性、方法与侦听器：
- 计算属性：模板内的表达式设计非常便利，并多数用于简单计算。所以，对于任何复杂的逻辑，都应采用计算属性来进行处理。
例子：
Html：
<div id="root">
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
Js：
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
count: 0
},
// 计算属性
computed: {
fullName: function () {
return this.firstName + '' + this.lastName
}
}
})
</script>
通过上述例子，我们可以在控制台中对firstName、lastName进行更改。此时，由于计算属性fullName依赖于firstName和lastName，也会被响应式的更改。
此外，计算属性还存在getter、setter方法，针对上述例子进行改造，计算属性默认的调用方法为：getter
fullName: {
// 默认方法
get: function() {
return this.firstName + " " + this.lastName
},
// 添加set方法
set: function(val) {
// 对fullName的value进行分割为数组，分割符：空格
var arr = val.split(" ");
// 对Vue实例中data属性中的变量进行赋值
this.firstName = arr[0];
this.lastName = arr[arr.length - 1];
console.log(val)
}
}
- 方法：在模板表达式中调用方法也可实现同样的上述效果。
例子：
Html：
<div id="root">
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{ fullName() }}</div>
<div>{{count}}</div>
</div>
Js：
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
count: 0
},
// 方法
methods: {
fullName: function () {
return this.firstName + '' + this.lastName
}
}
})
</script>
计算属性、方法两种方式实现的最终结果是完全相同的。然而，不同的是：**计算属性是基于它们的依赖进行缓存的。只有在相关依赖发生改变时它们才会重新求值。**相比之下，每次触发重新渲染的时候，调用方法总会再次执行函数。
- 侦听器：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
我们来变更下上述例子，加入侦听器：
Html： 插值表达式中加入：count
<div id="root">
姓：<input v-model="firstName"/>
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
Js：采用watch加入侦听器，当fullName该计算属性发生改变时，count会自增。
<script>
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
count: 0
},
// 计算属性
computed: {
fullName: function () {
return this.firstName + '' + this.lastName
}
},
// 侦听器 监听数据变化
watch: {
fullName: function () {
this.count ++
},
}
})
</script>
3.Class、Style绑定：
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。我们可以用v-bind(缩写:)处理此类需求。
例子：分别通过Class、Style绑定实现模板元素内容点击事件后的样式更改。
-
绑定HTML Class
-
对象语法
Html：挂载点app，对块元素div进行Class对象绑定，下述Html代码标识active这个class的存在与否取决于数据属性isActive的值。(ture or false)。此外，添加点击事件，当该块元素内容被点击是，进行isActive数据属性的取反操作。
<div id="app"> <div @Click="handleDivClick" :class="{ active: isActive}"> Hello World </div> </div>Js：声明挂载点、数据属性isActive的初始化为false，添加methods点击事件逻辑，数据属性isActive取反操作。
<script> var vm = new Vue({ el: "#app", data: { isActive: false }, methods: { handleDivClick: function() { this.isActive = ! this.isActive } } }) </script>Css：当数据属性isActive为true时，该块元素class=“active”，并实现以下文字样式。
<style> .active { color: red; } </style> -
数组语法
Html：块元素div的Class绑定采取了Class列表的方式实现，可以添加多个Class。
<div id="app"> <div @Click="handleDivClick" :class="[ activated ]"> Hello World </div> </div>Js：数据属性activated默认为" ",添加点击事件，实现数据属性activated的变更。
<script> var vm = new Vue({ el: "#app", data: { activated: "" }, methods: { handleDivClick: function() { // 三元表达式：针对数据属性activated的值判断，进行重新赋值。 this.activated = this.activated === "activated" ? "" : "activated" } } }) </script>Css：当点击事件触发后，块元素中class="activated"时，启用下述样式。
<style> .activated { color: red; } </style>
-
-
绑定Style
-
对象语法：将内联样式绑定至样式对象上，这样会使得模板更加清晰。
Html：内联样式绑定样式对象styleObj，点击事件用来操作样式对象内样式属性。
<div id="app"> <div :style="styleObj" @click="handleDivClick"> Hello World </div> </div>Js：数据属性中的样式对象styleObj，其中样式对象属性color默认为black。
<script> var vm = new Vue({ el: "#app", data: { styleObj: { color: "black" } }, methods: { handleDivClick: function() { // 采用三元表达式进行样式对象属性的变更 this.styleObj.color = this.styleObj.color === "black" ? "red" : "black" } } }) </script> -
数组语法：
绑定样式对象(集)，采用{}添加内联样式。 CSS属性名可以用驼峰式(camelCase)或短横线分隔(kebab-case，记得用单引号括起来)来命名。 :style="[styleObj, {fontSize: '20px'}]"
-