表达式会在当前活动实例的数据作用域下作为JavaScript被解析。有个限制就是,每个绑定就是,每个绑定只能包含单个表达式,所以下面的实例不会生效:
{{var a = 1}} //语句,不是表达式
{{if (ok) {return message }}} //控制流,不是三元表达式
指令
指令是带有v-前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到DOM上。如下例子:
<div id="app">
<p v-if="seen">test文本</p>
</div>
<script>
const app1={
data(){
return{
seen:true //若改成false,信息就无法显示
}}}
Vue.createApp(app1).mount('#app')
</script>
在该实例中,v-if指令将根据表达式seen的值(TRUE或false)来决定是否插入p元素
另外还有其他指令,每个都有特殊的功能。例如,v-for指令可以绑定数组的数据来渲染一个项目列表:
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-26 16:26:51
* @LastEditors: Mei
* @LastEditTime: 2023-03-26 16:32:27
* @FilePath: \vscode\v-for.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="test in sites">
{{test.city}}
</li>
</ol>
</div>
<script>
const name={
data(){
return {
sites:[
{city:'sanghai'},
{city:"beijing"},
{city:"henan"}
]
}
}
}
Vue.createApp(name).mount('#app')
</script>
</body>
</html>
参数
参数在指令后以冒号指明。例如,v-bind指令被用来相应的更新HTML属性:
<div id="app">
<p><a v-bind:href="url">测试文本</a></p>
</div>
<script>
const app={
data() {
return {
url:'https://www.baidu.com'}}}
Vue.createApp(app).mount('#app')
</script>
在这里href是参数,告知v-bind指令将该元素的href属性与表达式url的值绑定。
另一个实例是v-on指令,它用于监听DOM事件:
<a v-on:click="doSomething"> ... </a>
<a @click="doSomething"> ... </a>
<a @[event]="doSomething"> ...</a>
在这里参数是监听的事件名。
修饰符
修饰符是以半角句号.指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault():
<form v-on:submit.prevent="onSubmit"></form>
用户输入
在input输入框中我们可以使用v-model指令来实现双向数据绑定:
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-26 16:57:44
* @LastEditors: Mei
* @LastEditTime: 2023-03-26 17:00:24
* @FilePath: \vscode\数据绑定.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input v-model="message">
</div>
<script>
const mez={
data(){
return {
message:"hello Mez!"
}
}
}
Vue.createApp(mez).mount('#app')
</script>
</body>
</html>
v-model指令用来在input、select、textarea、CheckBox、radio等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素值。
按钮的时间我们可以使用v-on监听事件,并对用户的输入进行响应。
以下实例在用户电机按钮后对字符串进行反转操作:
<!--
* @Author: RealRoad1083425287@qq.com
* @Date: 2023-03-26 16:57:44
* @LastEditors: Mei
* @LastEditTime: 2023-03-26 17:13:54
* @FilePath: \vscode\数据绑定.html
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue_doc/vue.global3.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<!-- <input v-model="message"> -->
<button v-on:click="reverseMessage">两级反转</button>
</div>
<script>
const mez={
data(){
return {
message:'helloMez!'
}
},
methods: {
reverseMessage(){
this.message=this.message
.split('')
.reverse()
.join("")
}
}
}
Vue.createApp(mez).mount('#app')
</script>
</body>
</html>