前言
系列文章目录:
[Vue]目录
老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU
1. Vue模板语法的分类
Vue模板语法主要分为两类:
-
插值语法
-
指令语法( v- 开头 )
2. 插值语法
2.1 引入
<!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="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>hello jack</p>
</div>
<script>
new Vue( {
el: '#app'
} )
</script>
</body>
</html>
2.2 插值语法实现
想要实现对 hello 后面名字的动态控制,就需要使用 vue 提供的插值语法 ---- 插值表达式 – {{}}。
使用{{}}可以将对应的值渲染到元素的内容节点中。
语法:
{{xxx}}
<!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="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>hello {{name}}</p>
</div>
<script>
new Vue( {
el: '#app',
// 声明页面的数据
data: {
name: 'marry'
}
} )
</script>
</body>
</html>
2.3 插值语法中书写js表达式
在vue提供的插值语法中,除了支持绑定简单的数据值外,还支持JavaScript表达式运算。
用法示例:
<!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">
<!-- 字符串的拼接 -->
<p>{{ tips + '1' }}</p>
<!-- ok未定义undefined 为false -->
<p>{{ ok ? '1' : '2' }}</p>
<!-- 字符串的反转 -->
<p>{{ tips.split('').reverse().join('') }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
tips: "请输入..."
}
})
</script>
</body>
</html>
3. Vue指令
3.1 指令的概念
指令是Vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。
3.2 指令的分类
指令按照不同的用途可以分为如下6大类:
- 内容渲染指令
- 属性绑定指令
- 事件绑定指令
- 双向绑定指令
- 条件渲染指令
- 列表渲染指令
4. 内容渲染指令
插值语法是内容渲染指令中的一部分。
【Vue---- 内容渲染指令】
5. 指令语法
5.1 属性绑定指令
插值语法只能实现对标签的内容的渲染,如果要渲染标签的属性需要使用vue的指令语法----属性绑定指令。
5.1.1 引入
<!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="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>hello {{name}}</p>
<a href="www.baidu.com">百度超链接</a>
</div>
<script>
new Vue( {
el: '#app',
// 声明页面的数据
data: {
name: 'marry'
}
} )
</script>
</body>
</html>
想要实现对 a 标签属性的动态控制,需要使用属性绑定指令。
5.1.2 属性绑定指令逐步尝试探索实现
那么属性绑定指令要怎么使用?将链接更换为变量名?
<body>
<div id="app">
<p>hello {{name}}</p>
<a href="link">百度超链接</a>
</div>
<script>
new Vue( {
el: '#app',
// 声明页面的数据
data: {
name: 'marry',
link: 'www.baidu.com'
}
} )
</script>
</body>
<body>
<div id="app">
<p>hello {{name}}</p>
<a href=link>百度超链接</a>
</div>
<script>
new Vue( {
el: '#app',
// 声明页面的数据
data: {
name: 'marry',
link: 'www.baidu.com'
}
} )
</script>
</body>
两种改法的结果一致,很明显直接将链接更换成变量名是行不通的。
使用插值语法?
<body>
<div id="app">
<p>hello {{name}}</p>
<a href={{link}}>百度超链接</a>
</div>
<script>
new Vue( {
el: '#app',
// 声明页面的数据
data: {
name: 'marry',
link: 'www.baidu.com'
}
} )
</script>
正确的使用:
<body>
<div id="app">
<p>hello {{name}}</p>
<!-- 完整写法: <a v-bind:href="link"> -->
<!-- v-bind: 可以简写为 ‘:’ -->
<a :href="link">百度超链接</a>
</div>
<script>
new Vue( {
el: '#app',
// 声明页面的数据
data: {
name: 'marry',
link: 'www.baidu.com'
}
} )
</script>
</body>
使用
v-bind:
属性绑定指令后,等号后面引号内的值会被认为js表达式执行
5.1.3 属性绑定指令中使用js表达式
在属性绑定中一样可以使用JavaScript表达式。
在使用属性绑定期间,绑定内容需要进行动态拼接,则字符串的外面应该包裹单引号。
示例:
<!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">
<p :title=" 'tips' + 123 ">nihao</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
tips: "请输入..."
}
})
</script>
</body>
</html>
5.2 数据绑定
数据绑定分为:
-
单向数据绑定
-
双向数据绑定
5.2.1 单向数据绑定
单向数据绑定 ---- 使用 v-bind 指令
<body>
<div id="app">
单向数据绑定:<input type="text" v-bind:value="t" >
</div>
<script>
new Vue( {
el: '#app',
// 声明页面的数据
data: {
t: ''
}
} )
</script>
</body>
在Vue开发者工具中修改t的值
在输入框中修改t的值
v-bind 为单向数据绑定,vue中的数据发生变化,页面中的数据会进行更新;但是页面中的数据发生变化,vue中的数据不会同步进行更新。
5.2.2 双向数据绑定
双向数据绑定使用 v-model
<body>
<div id="app">
单向数据绑定:<input type="text" v-bind:value="t" >
<br>
双向数据绑定:<input type="text" v-model:value="t" >
</div>
<script>
new Vue( {
el: '#app',
// 声明页面的数据
data: {
t: ''
}
} )
</script>
</body>
在Vue开发者工具中修改t的值
在“双向数据绑定”对应的输入框中修改t的值
v-model 为双向数据绑定,vue中的数据发生变化,页面中的数据会进行更新;页面中的数据发生变化,vue中的数据也会同步进行更新。单向数据绑定对应的输入框也会进行更新是由于 v-bind 指令。
注意:
v-model指令只能配合表单元素(输入类元素,元素要能够输入)一起使用。
v-model 默认监听的为value的值
v-model:value="t"
可以简写为
v-model=“t”
<body>
<div id="app">
<!-- v-bind:value="t" 简写为 :value="t" -->
单向数据绑定:<input type="text" v-bind:value="t" >
<br>
<!-- v-model:value 简写为 v-model -->
双向数据绑定:<input type="text" v-model="t" >
</div>
<script>
new Vue( {
el: '#app',
// 声明页面的数据
data: {
t: ''
}
} )
</script>
</body>
5.2.3 双向数据绑定
之前的笔记:【Vue----双向绑定指令】