二、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'}]"
-