Vuejs 002---第二章 Vuejs 基础语法_综合

2-1 第一个 Vuejs 案例_HelloWorld

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-textv-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'"/>