一、Vue 实例的 template
在前面的文章中,我们都是把 HTML 结构放在 template
属性中;在 Vue 的语法中 template
就是用于定义组件模板的选项,描述组件的结构和布局。
我们可以像前面的文章一样把 HTML 代码放在 createApp
方法的参数对象的 template
属性中,作为 template
的属性值:
const app = Vue.createApp({
template: `
<h2>计数器 {{counter}}</h2>
<button v-on:click="increment">+1</button>
<button v-on:click="decrement">-1</button>
`,
data: function(){
return {
counter: 0
}
},
methods: {
increment: function(){
this.counter++
},
decrement: function(){
this.counter--
}
},
})
app.mount('#app')
template
选项声明的 HTML 结构会完全替换掉 div#app
中的内容,我们可以来给 div#app
中增加一些内容,创建一个 HTML 页面,内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>div#app中原本的内容</div>
</div>
<script src="../lib/vue.js"></script>
</body>
</html>
使用 LiverServer 打开 HTML 页面:
在 HTML 中增加上述的 JS 代码,再次刷新页面
可以看到 div#app
中原有的内容全部被 template
选项声明的 HTML 结构替换掉了。
但是如果 HTML 结构比较庞大,会造成大量的 HTML 代码堆积在 script
标签的 JS 代码中,不好维护,通常我们会把 template
声明的 HTML 结构放在 body
标签,可以将上述代码改成如下形式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>计数器 {{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
data: function(){
return {
counter: 0
}
},
methods: {
increment: function(){
this.counter++
},
decrement: function(){
this.counter--
}
},
})
app.mount('#app')
</script>
</body>
</html>
createApp
方法传入的对象参数中没有 template
属性,默认就会渲染 div#app
里面的内容。
Vue 语法中,template
是 Vue 实例的一个配置选项,其类型可以是字符串、函数或者返回字符串的函数,在 template
中我们可以使用包含插值表达、指令如 v-for、v-model 等
以及其他 Vue 模板语法。
在之后的 Vue 组件化开发中 template
有着非常重要的作用:
-
定义组件的结构:
template
用于描述组件的HTML结构,包括元素、样式、布局等。这允许开发者以一种更模块化、可复用的方式构建用户界面。<template> <div> <h1>{{ title }}</h1> <p>{{ content }}</p> </div> </template>
-
支持动态数据绑定: 在
template
中可以使用插值表达式({{ expression }}
)、指令(如v-bind
、v-for
、v-if
等)等Vue模板语法,从而实现对数据的动态绑定。<template> <div> <h1>{{ title }}</h1> <ul> <li v-for="item in items">{{ item }}</li> </ul> </div> </template>
-
提高代码可读性: 通过将模板从 JavaScript 代码中分离出来,使得代码更加清晰、易读。
template
允许开发者专注于组件的外观和结构,而不必在 JavaScript 中嵌入大段的 HTML 代码。<template> <div> <!-- 清晰可读的模板结构 --> <h1>{{ title }}</h1> <p>{{ content }}</p> </div> </template>
-
提供单文件组件支持: 在实际项目中,通常使用单文件组件(.vue文件),该文件中包含了模板、脚本和样式。
template
是其中的一部分,用于定义组件的 HTML 结构。<!-- MyComponent.vue --> <template> <div> <h1>{{ title }}</h1> <p>{{ content }}</p> </div> </template> <script> export default { data() { return { title: 'Vue Component', content: 'This is a Vue component.' }; } }; </script> <style scoped> /* 样式定义 */ </style>
template
在Vue的组件化开发中扮演着定义组件外观的重要角色,使得我们可以更加灵活地构建用户界面,并且提高了代码的可维护性和可读性。
template
是 Vue 语法中 Options API
中的 Options: Rendering
模块的语法,类似的还有 插槽 slot
等。
Options:Rendering
是指 Vue 实例的一系列选项,用于配置渲染相关的行为。这些选项影响Vue组件的渲染过程,包括模板的编译、虚拟DOM的生成和更新、渲染函数的执行等。
二、Vue 的 Options API
Vue 的 Options API
是指在创建 Vue 实例时可以传递的一组选项,用于配置实例的行为、数据、方法等。通过这些选项,你可以定义 Vue 实例的各个方面,使其符合你的需求。Options API
是 Vue.js 最早引入的 API,它提供了一种基于对象
的配置方式。
Options API 的核心选项包括:
-
data:
- 类型:
Object
或Function
- 作用: 用于定义 Vue 实例的响应式数据。可以是一个对象(Vue2.x),也可以是一个返回对象的函数。
- 类型:
-
methods:
- 类型:
Object
- 作用: 用于定义Vue实例的方法,这些方法可以在模板中调用或在生命周期钩子中使用。
- 类型:
-
computed:
- 类型:
Object
- 作用: 用于定义计算属性,提供一种便捷的方式来监听和计算Vue实例中的属性。
- 类型:
-
watch:
- 类型:
Object
- 作用: 用于监听Vue实例中数据的变化,并在数据变化时执行相应的操作。
- 类型:
-
props:
- 类型:
Array
或Object
- 作用: 用于接收父组件传递过来的属性。在子组件中,props可以用来接收父组件传递的数据。
- 类型:
-
computed:
- 类型:
Object
- 作用: 用于定义计算属性,提供一种便捷的方式来监听和计算Vue实例中的属性。
- 类型:
-
watch:
- 类型:
Object
- 作用: 用于监听Vue实例中数据的变化,并在数据变化时执行相应的操作。
- 类型:
-
created, mounted, updated, destroyed:
- 类型:
Function
- 作用: 分别对应 Vue 实例的生命周期钩子,可以在不同的生命周期阶段执行相应的操作。
- 类型:
Options API
是 Vue2 中就已经提供的一种基本的配置方式,在 Vue3 还提供了 Composition API
,这是一种基于函数的 API,Composition API
的灵活性和可组合性更高,可以更好地处理复杂的逻辑和状态管理。
三、Options API data
选项
data
选项用于定义 Vue 实例的响应式数据。比如在文章中的 message
、vehicles
等,可以是一个对象,也可以是一个返回对象的函数。
创建 HTML 页面,并创建一个 Vue 实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
template: ``,
data: function() {},
methods: {}
})
app.mount('#app')
</script>
</body>
</html>
在绑定了具体的元素后,template
选项可以省略,methods
选项只有在绑定函数时才需要书写,data
选项也可以使用简写的形式,省略 function
关键字:
const app = Vue.createApp({
data(){}
})
app.mount('#app')
这种写法是 ES6 的写法,即对象增强部分的写法。
data
选项(有时也称为属性)是传入一个函数,并且该函数需要返回一个对象;在 Vue2.x 的时候,可以传入一个对象,虽然官方推荐是传入一个函数;但是在 Vue3.x 中必须传入一个函数
,否则会在浏览器中报错。
创建一个新的 HTML 页面,并给 data
选项一个对象,使用插值语法在也页面中渲染该对象,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{vehicle}}</h1>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
data: {
vehicle: "Model 3"
},
})
app.mount('#app')
</script>
</body>
</html>
使用 LiverServer 打开 HTML 页面:
可以看到控制台中有明显的报错 “data 选项必须是一个函数”!
接下来我们可以给 data
选项传入一个函数:
const app = Vue.createApp({
data() {
console.log("data选项中传入的函数执行了!")
return {
vehicle: "Model #"
}
}
})
app.mount('#app')
刷新 HTML 页面:
data
选项中返回的对象会被 Vue 的响应式系统劫持
,之后对该对象的修改
或者访问
都会在劫持中被处理
;所以我们在 template
或者 app 中通过 {{vehicle}}
访问 vehicle
,可以从对象中获取数据,当我们在修改 vehicle
时,app 中的 {{vehicle}}
也会改变。
在 Vue2.x 中,Vue 使用了 Object.defineProperty()
来劫持对象的属性
。每个组件实例都有一个“观察者”(Watcher)
对象,该对象会在数据变化时收到通知并触发视图更新。当一个组件的数据被访问时,Vue 会将这个属性添加一个依赖,当该属性被修改时,会通知所有依赖进行更新。
Vue3.x 使用了 Proxy
对象来替代 Object.defineProperty()
。Proxy 提供了更灵活和强大的拦截器,可以拦截对象的各种操作,包括 get 和 set。这使得 Vue3.x 在性能和功能上都有一些优势。
在上述 HTML 页面中增加按钮来修改 vehicle 对象的值,实现响应式功能:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{vehicle}}</h1>
<button v-on:click="changeVehicle">Change Vehicle</button>
</div>
<script src="../lib/vue.js"></script>
<script>
const app = Vue.createApp({
data() {
console.log("data选项中传入的函数执行了!")
return {
vehicle: "Model 3"
}
},
methods: {
changeVehicle(){
console.log("methods 选中的 changeVehicle 函数执行了!")
this.vehicle = "Model S"
}
},
})
app.mount('#app')
</script>
</body>
</html>
刷新 HTML 页面,点击按钮修改 Vehicle 的内容: