# 6.指令
# 1.什么是指令
- 什么是自定义属性
- 本质就是自定义属性
- Vue中指令都是以 v- 开头 (比如: v-cloak)
# 2.v-cloak指令用法
- 插值表达式存在的问题: '闪动'
- 如何解决该问题: 使用v-cloak指令
- 解决该问题的原理: 先隐藏, 替换好值以后再显示最终的值
<style type="text/css">
/*
1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏
*/
[v-cloak]{
/* 元素隐藏 */
display: none;
}
</style>
<body>
<div id="app">
<!-- 2、 让带有插值 语法的 添加 v-cloak 属性
在 数据渲染完场之后,v-cloak 属性会被自动去除,
v-cloak一旦移除也就是没有这个属性了 属性选择器就选择不到该标签
也就是对应的标签会变为可见
-->
<div v-cloak>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
// el 指定元素 id 是 app 的元素
el: '#app',
// data 里面存储的是数据
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
- 背后的原理: 先通过样式隐藏内容, 然后在内存中进行值的替换, 替换好之后再显示最终的结果
# 3.数据绑定指令
# 1). v-text 填充纯文本
① 相比插值表达式更加简洁
② v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题
③ 如果数据中有HTML标签会将html标签一并输出
④ 注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值
<div id="app">
<!--
0 注意:在指令中不要写插值语法 直接写对应的变量名称
在 v-text 中 赋值的时候不要在写 插值语法
一般属性中不加 {{}} 直接写 对应 的数据名
-->
<p v-text="msg"></p>
<p>
<!-- Vue 中只有在标签的 内容中 才用插值语法 -->
{{msg}}
</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 2). v-html 填充HTML片段
① 存在安全问题
② 本网站内部数据可以使用, 来自第三方的数据不可以用
③ 用法和v-text 相似 但是他可以将HTML片段填充到标签中
④ 可能有安全问题, 一般只在可信任内容上使用 v-html
,永不用在用户提交的内容上
⑤ 它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。
<div id="app">
<p v-html="html"></p> <!-- 输出:html标签在渲染的时候被解析 -->
<p>{{message}}</p> <!-- 输出:<span>通过双括号绑定</span> -->
<p v-text="text"></p> <!-- 输出:<span>html标签在渲染的时候被源码输出</span> -->
</div>
<script>
let app = new Vue({
el: "#app",
data: {
message: "<span>通过双括号绑定</span>",
html: "<span>html标签在渲染的时候被解析</span>",
text: "<span>html标签在渲染的时候被源码输出</span>",
}
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 3). v-pre 填充原始信息
① 显示原始信息, 跳过编译过程 (分析编译过程)
② 显示原始信息跳过编译过程
③ 跳过这个元素和它的子元素的编译过程。
④ 一些静态的内容不需要编译加这个指令可以加快渲染
<span v-pre>{{ this will not be compiled }}</span>
<!-- 显示的是{{ this will not be compiled }} -->
<span v-pre>{{msg}}</span>
<!-- 即使data里面定义了msg这里仍然是显示的{{msg}} -->
<script>
new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js'
}
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 4). 数据响应式
如何理解响应式
① html5中的响应式 (屏幕尺寸的变化导致样式的变化)
② 数据的响应式 (数据的变化导致页面内容的变化)
什么是数据绑定
① 数据绑定: 将数据填充到标签中
v-once 只编译一次
① 显示内容之后不再具有响应式功能
<!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js --> <span v-once>{{ msg}}</span> <script> new Vue({ el: '#app', data: { msg: 'Hello Vue.js' } }); </script>
1
2
3
4
5
6
7
8
9
10执行一次性的插值【当数据改变时,插值处的内容不会继续更新】
v-once的应用场景: 如果显示的信息后续不需要再修改, 你们可以使用v-once, 这样可以提高性能
# 4.双向数据绑定
- 当数据发生变化的时候,视图也就发生变化
- 当视图发生变化的时候,数据也会跟着同步变化
# v-model
- v-model是一个指令,限制在
<input>、<select>、<textarea>、components
中使用
<div id="app">
<div>{{msg}}</div>
<div>
<!--当输入框中内容改变的时候, 页面上的msg 会自动更新 -->
<input type="text" v-model='msg'>
</div>
</div>
1
2
3
4
5
6
7
2
3
4
5
6
7
# v-model的底层实现原理
<input type="text" :value="msg" v-on:input="handle">
<input type="text" :value="msg" v-on:input="msg=$event.target.value">
<input type="text" v-model="msg">
1
2
3
2
3
# 5.mvvm
- MVC 是后端的分层开发概念; MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel
- m model
- 数据层 Vue 中 数据层 都放在 data 里面
- v view 视图
- Vue 中 view 即 我们的HTML页面
- vm (view-model) 控制器 将数据和视图层建立联系
- vm 即 Vue 的实例 就是 vm
← 5.模板语法概述 7.事件绑定 v-on →