四时宝库

程序员的知识宝库

VUE入门教程(二)之模板语法(指令)

VUE 模板语法

1、差值语法

VUE使用 {{ }}("差值语法")的形式将数据渲染到页面上,数据是响应式的。

<div>{{msg}}</div>

2、指令

  • 什么是指令

指令的本质就是自定义属性

指令的格式:以v-开头(比如:v-cloak)

  • v-cloak指令

先看一个小例子:以下代码比较简单,在浏览器刷新的时候我们的眼速可能跟不上,是直接显示"Hello World",其实不然,如果你在调试窗口把浏览器的加载速度设置为0.5倍你会发现,界面先是显示{{msg}},然后再变为我们想要的 "Hello World"。

(1)差值表达式存在问题:"闪动"。

代码加载的时候先加载HTML 把插值语法当做HTML内容加载到页面上 ,当加载完js后才把插值语法替换掉 所以我们会看到闪烁问题

<body>
	<div id="app">
		{{msg}}
	</div>
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				msg:'Hello World'
			}
		});
	</script>
</body>

(2)如何解决差值语法的闪动问题:使用v-cloak指令

第一步:提供样式,在css中加入 [v-cloak] { display:none }

第二步:在差值表达式所在的标签添加v-cloak指令


            <style type="text/css">
                [v-cloak]{
                   display:none;
                }
            </style>
            <body>
                <div id="app" v-cloak>
                    {{msg}}
                </div>
                <script type="text/javascript" src="vue.js"></script>
                <script type="text/javascript">
                    var vm = new Vue({
                        el:'#app',
                        data:{
                            msg:'Hello World'
                        }
                    });
                </script>
            </body>  

(3)原理:先通过样式隐藏内容,然后在内存中进行值的替换,换好之后再显示最终的值


数据绑定指令

以上的v-cloak指令仅仅是解决差值表达式的"闪动"问题,并没有什么实际的业务。接下来我们来了解下有业务场景的几个指令。

  • v-text填充纯文本

v-text 指令和差值表达式的效果一样,但有一点不同的是,v-text不会存在闪动问题,所以从用户体验的角度,v-text更合适一些,而且xian更简洁,不用加v-cloak指令。

  <body>
        <div id="app">
            <div>{{msg}}</div>
            <div v-text='msg'></div>
        </div>
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:'Hello World'
                }
            });
        </script>
      </body>


  • v-html填充html内容

v-html 指令是填充html片段的,他展示的是浏览器解析后有样式的内容,而不是纯文本,这就是它和v-text的区别。

此外,该指令也存在一定的风险,官网也给出了建议,容易导致XSS攻击,只在可信内容上使用v-html,永远不要用在客户提交的内容上

       <body>
        <div id="app">
            <div>{{msg}}</div>
            <div v-text='msg'></div> 
            <div v-html='msg2'></div>
        </div>
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:'Hello World',
                    msg2:'<h1>Say Hi~</h1'
                }
            });
        </script>
       </body>
  • v-pre :填充原始信息,跳过编译过程

从以上的案例中我们已经知道<div>{{msg}}</div> 会 显示msg属性的值。如果我有个需求,就是{{msg}}作为字符串显示在界面上,而不是表达式。这时v-pre就发挥作用了。

       <body>
        <div id="app">
            <div>{{msg}}</div>
            <div v-text='msg'></div> 
            <div v-html='msg2'></div>
            <div v-pre>{{msg}}</div>
        </div>
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:'Hello World',
                    msg2:'<h1>Say Hi~</h1'
                }
            });
        </script>
       </body>


3、数据响应式

  • 什么是数据响应式?

简单来说就是当数据改变时,页面的内容随着改变。数据来驱动页面的改变,而不需要做其他操作(比如改代码或者刷新页面);

  • 什么是数据绑定?

将数据填充到对应的标签中。用指令或差值表达式进行的数据绑定默认都是数据响应式,当改变数据的时候,页面会自动随之变化,而无需刷新页面。

  • v-once指令:只编译一次,显示内容之后不再具有响应式能力

我们都知道,vue框架之所以有响应式的功能是因为它不断的去监听属性,当某个属性发生变化时,立即响应,然后展现在界面上。这样的话肯定对性能的消耗比较大,如果有些值显示之后就不再变化了或用户不想让它再改变了,那就没必要一直监听,然后解析编译了。这样对性能有很大的提升。v-once指令的作用就帮我们解决了这个问题,因为它只编译一次。

如下图,当vm.msg2 的值改为'java'后,然而界面并没有做出响应。

      <body>
        <div id="app">
            <div>{{msg}}</div>
            <div v-once>{{msg2}}</div>
        </div>
        <script type="text/javascript" src="vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:'Hello World',      
                    msg2:'Hello World',     
                }
            });
        </script>
      </body>


  • 双向数据绑定

以上知识,我们已经知道将数据填充到页面的标签里边展示,这个过程是单向的,从数据到页面。但是现在的web应用都是比较复杂的肯定离不开与用户的交互, 这时我们就要用到双向数据绑定。

什么是双向数据绑定?

当我们在网页里填充信息时,比如:表单输入,当我们向某个输入框更新数据的时候,它会影响到数据的变化。所以由之前的模型数据变化影响到界面变化,到现在用户输入数据影响到模型数据的变化,这就是所谓的交互。所以现在我们要同时实现这2种场景;

v-model 指令 实现数据双向绑定

v-model指令帮我们实现双向数据绑定,接下来看个例子:


   <body>
   	<div id="app">
   		<div>{{msg}}</div>
   		<div>
   			<input type="text" v-model='msg'>
   		</div>
   	</div>
   	<script type="text/javascript" src="vue.js"></script>
   	<script type="text/javascript">
   		var vm = new Vue({
   			el:'#app',
   			data:{
   				msg:'Hello World',			
   			}
   		});
   	</script>
   </body>


当我修改模型数据的时候,会导致界面的改变,如下图:同样,当我们在界面改变值之后,模型数据也会随之改变,如下图:

  • 回顾MVVM设计思想

从上一章我们简单了解了下MVVM的原理,看完数据双向绑定后,现在是不是有了更深一层的了解呢?接下来为了巩固下知识,回过头再看仔细分析下 MVVM的设计思想。

M (Model) 数据层 Vue 中 数据层 都放在 data 里面

V (View视图) Vue 中 view 即 我们的HTML页面

VM (View-Model) 控制器将数据和视图层建立联系,vm 即 Vue 的实例 就是 vm

接下来用一张图来形象的表达出vue在MVVM设计模式中扮演的什么角色。

vue框架所扮演的角色如中间的媒婆一样,view和model是没办法直接联系到一起的,两者之间要想进行交互,必须要经过媒婆。那是通过哪种方式来进行关联的呢?

当用户在界面输入数据的时候,用到了向右的箭头,也就是DOM Listeners(事件监听),当界面输入的时候通过事件监听来改变model的数据,这一个方向v-model指令帮我们做了。这个指令的底层用到了事件,后续我们再慢慢研究,现在先了解大概。所以这个方向是通过事件监听的方式实现的。

那么数据模型改变影响到了视图的改变,用到了向左的箭头,也就是Data binding(数据绑定), 我们以上所学的指令 v-text、 v-html 包括差值表达式它们所做的工作都是数据绑定,就是把数据填充到界面元素上。


上一篇:Vue入门教程(一)之基本使用

下一篇:Vue入门教程(三)之模板语法(事件)

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接