本文介绍了Vue.js的基础知识，包括如何创建第一个Vue实例，使用插值表达式显示数据，以及v-cloak、v-text、v-html等指令的用途和区别。通过实例展示了如何解决插值表达式的闪烁问题，并对比了不同指令在内容渲染上的差异。此外，还简述了v-bind属性的绑定功能。
目录
2-2 指令属性的基本使用（v-cloak ，v-text，v-html，v-bind）
2-1 第一个 Vuejs 案例_HelloWorld
1. 插值表达式：<p>{{str1}}</p>
2. var vm = new Vue({ });
当Vuejs框架包导入进来之后，在浏览器缓存中，就已经存在了一个Vue框架的构造函数。
我们new出来的这个vm对象，就是页面中对于模型和视图（数据和页面元素）的整体调度者。
以下创建出来的vm对象，就是我们MVVM中的VM调度者。
3. el : "#app" ：el元素表现的是要指定为哪个标签进行相应的vuejs的操作
4. data : {
"str1" : "HelloWorld1",
"str2" : "HelloWorld2"
}
data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的，data属性中，存放的是el中要使用到的数据，这里的data就是MVVM中M，专门用来表现数据的组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入vuejs框架 -->
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<!-- 在外层标签div中引入 id属性值 将来vuejs会通过该id，找到需要操作的元素 -->
<!-- 以下Vue实例vm所控制的这个元素区div，就是我们的V -->
<div id="app">
<!-- 在前端页面元素的部分，其中的内容我们暂时以插值表达式的形式来呈现 -->
<!-- 在两对p标签中分别引入了插值表达式，相当于将p标签对中的内容写活了，内容以变量的形式存在 -->
<p>{{str1}}</p>
<p>{{str2}}</p>
</div>
<script>
//当Vuejs框架包导入进来之后，在浏览器缓存中，就已经存在了一个Vue框架的构造函数
//我们new出来的这个vm对象，就是页面中对于模型和视图（数据和页面元素）的整体调度者
//以下创建出来的vm对象，就是我们MVVM中的VM调度者
var vm = new Vue({
el : "#app", //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
data : { //data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的
//data属性中，存放的是el中要使用到的数据
//这里的data就是MVVM中M，专门用来表现数据的组件
"str1" : "HelloWorld1",
"str2" : "HelloWorld2"
}
});
</script>
</body>
</html>2-2 指令属性的基本使用
（1）v-cloak cloak：遮盖; 掩盖;
使用
v-cloak
主要为了
解决插值表达式的闪烁问题
使用插值表达式的问题：
在页面加载的过程中，在页面中的
{{}}
插值表达式首先会被页
面认可为是
html
元素中的实在存在的内容。所以浏览器会首先将
{{}}
展现在页面上，页面加载完毕后，插值表达式
{{}}
才会真正的转变为
动态赋予的值。这就会造成一种现象，如果将来终端在访问服务器的
过程中，网速较慢（网络比较卡），那么我们的
{{}}
会首先展现出来，
{{}}
展现出来之后，会一闪而过，最终显示的是最终被赋予的值。这
就是前端开发中所谓的，插值表达式的闪烁问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入vuejs框架 -->
<script src="./lib/vue-2.4.0.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{{str1}}</p>
<p v-cloak>{{str2}}</p>
</div>
<script>
var vm = new Vue({
el : "#app", //el元素表现的是要指定为哪个标签进行相应的vuejs的操作
data : { //data是vuejs中对于数据的表达，数据约定俗成的都是以json的形式来呈现的
//data属性中，存放的是el中要使用到的数据
//这里的data就是MVVM中M，专门用来表现数据的组件
"str1" : "HelloWorld1",
"str2" : "HelloWorld2"
}
});
</script>
</body>
</html>
（2）v-text
（3）v-html
（4）插值表达式与 v-text/v-html 的区别
a.对于元素中已经存在的值，只有插值表达式能够将原有的值保
留，在原有的已经存在的值的基础上添加动态数据。
使用
v-text
和
v-html
之所以不能够保留元素标签对中原有的内容，
是因为在使用以上两个指定属性之前，会提前将标签对中的内容先清
空掉，在赋予动态的值。如果未来的实际项目开发，需求为在原有的
内容的基础上，追加动态的值，我们要选择使用插值表达式。
从另一个方面来看，插值表达式虽然会出现
{{}}
页面闪烁的现象
（
v-text
和
v-html
不会出现页面闪烁的情况），但是对于原有内容的
保留，只有插值表达式能够完成，所以插值表达式具有不可替代的优
势。
对比 v-text 和 v-html
v-text:
主要是用来赋予纯内容的，如果赋予到元素中的内容本身包
含
html
，那么
v-text
会将
html
原封不动的展现在页面上，这些内容
是得不到浏览器的解析的。
v-html:
除了能够为前端元素赋予内容之外，更重要的是，如果内
容本身含有
html
代码，那么赋值后最终展现出来的结果，
html
元素
会得到浏览器的解析的。
从以上结果判断，
v-html 的功能要更加强大，对于前端页面的展
现，不可能让使用该系统的用户看到任何
html
代码，而是应该让用
户看到解析后的
html
效果。所以在实际项目开发中，使用
v-html
的
概率要高于
v-text
。
另外使用插值表达式的效果，与
v-text
是一样的，内容中的
html
代码时得不到浏览器的解析的。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入vuejs框架 -->
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!--
在vuejs中，为了为页面中的元素渲染值（为前端标签对中的内容赋值）
可以使用3种形式：
插值表达式{{str}}
v-text
v-html
-->
<!-- 使用插值表达式为标签对中的内容赋值 -->
<p>{{str1}}</p>
<p v-text="str2"></p>
<p v-html="str3"></p>
</div>
<script>
var vm = new Vue({
el : "#app",
data : {
"str1" : "<font color='red'>aaa</font>",
"str2" : "<font color='red'>bbb</font>",
"str3" : "<font color='red'>ccc</font>"
}
});
</script>
</body>
</html>
（5）v-bind
v-vind:
是
Vuejs
中，提供用于绑定属性的指令
对于
v-bind
在开发中一共有如下几种使用方式
a.
直接使用指令属性
v-bind
来为元素中的属性进行绑定操作
b.
使用简化后的方式，将
v-bind
去除，直接使用
:
来对元素中的额属性
进行绑定。
因为在实际项目开发中，对于前端元素的绑定是我们的常规操作，
v-bind
的使用复用率非常高，所以每一次都直接写
v-bind
会很麻烦，
所以
vuejs
为
v-bind
指令属性提供了简写的方式，直接使用
:
即可。
v-bind:title --> :title
注意：这种简写形式仅仅只是针对于我们的
v-bind
，以上所讲解
的其他的指令是不具备简写形式的。
在实际项目开发中，我们都是使用这种简写的形式。
c.
在使用
v-bind
对元素中的属性进行绑定的时候，可以直接在操作值
的位置进行内容的拼接。
<input type="button" value="submit" :title="str3+'Hello World'"/>
扫一扫
1047
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
