Vue基础(二)：模板语法(一)

  • A+
所属分类：Web前端
摘要

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
便宜好用的国外VPS推荐

1. 模板语法

1.1 模板语法概述

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

1、把字符串渲染到页面上有哪些方式？
利用原生js拼接字符串
利用模板引擎拼接
利用Vue插值语法
文档碎片 document.createDocumentFragment
利用es6 `` 反引号拼接字符串
2、我们已经用过哪些模板语法了？
插值语法

1.2 指令

API查询：https://cn.vuejs.org/v2/api/

指令 (Directives) 是带有 v- 前缀的特殊attribute。指令attribute的值预期是单个JavaScript表达式(v-for是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

1.2.1 v-cloak指令

插值表达式存在闪动的问题，它先会加载完插值标签，在读取到数据后才会刷新出数据，一般我们是发现不了的，除非网络出现波动，但是我们不能让这种情况出现啊，所以我们就要用到v-cloak指令了。

这个指令解决问题的原理就是先隐藏好插值标签，替换好值之后再显示最终的值。

官方描述：

Vue基础(二)：模板语法(一)

防止页面加载出现闪烁问题：

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Vue的基本使用</title> </head> <body>     <div id="app">     <div v-cloak>{{msg}}</div>   </div>   <script type="text/javascript" src="js/vue.js"></script>   <script type="text/javascript">     /*       v-cloak指令的用法       1、提供样式         [v-cloak]{           display: none;         }       2、在插值表达式所在的标签中添加v-cloak指令        背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果     */     var vm = new Vue({       el: '#app',       data: {         msg: 'Hello Vue'       }     });   </script> </body> </html>

效果模拟不出来，大家自己脑补吧。

1.2.2 数据绑定指令 

v-text：

Vue基础(二)：模板语法(一)

v-html： 

Vue基础(二)：模板语法(一)

v-pre：

Vue基础(二)：模板语法(一)

我们不是有了插值表达式了吗，为什么还要这些数据绑定指令呢？

那肯定是有自己的特点啊，

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Vue的基本使用</title> </head> <body>     <div id="app">     <div>{{msg}}</div>     <div v-text='msg'></div>     <div v-html='msg1'></div>     <div v-pre>{{msg}}</div>   </div>   <script type="text/javascript" src="js/vue.js"></script>   <script type="text/javascript">     /*       1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题       2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题       3、v-pre用于显示原始信息     */     var vm = new Vue({       el: '#app',       data: {         msg: 'Hello Vue',         msg1: '<h1>HTML</h1>'       }     });   </script> </body> </html>

执行的效果：

Vue基础(二)：模板语法(一)

v-text相比插值表达式更加简洁，v-html可以保证html标签被读取，v-pre显示原始信息跳过编译过程，都有利于性能的优化。 

1.2.3 数据响应式

什么叫响应式呢？

html5中的响应式(屏幕尺寸的变化导致样式的变化)。

数据的响应式(数据的变化导致页面内容的变化)。

什么叫数据绑定？

将数据填充到标签中。

我们可以使用v-once来执行一次性的插值，可以提升服务器性能，之后当数据改变时，插值处的内容不会继续更新。

Vue基础(二)：模板语法(一)

这个案例用法和之前的一样，效果不好展示，所以就不放代码了。 

1.2.4 双向数据绑定

什么是双向数据绑定？
当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化

那我们如何实现双向绑定呢？这就要用到指令标签v-model了。

(1) v-model指令

Vue基础(二)：模板语法(一)

Vue基础(二)：模板语法(一)

Vue基础(二)：模板语法(一)

双向绑定的使用场景：
v-model是一个指令，限制在 <input>、<select>、<textarea>、components（组件）中使用。

<!DOCTYPE html> <html> <head>   <meta charset="UTF-8">   <title>Vue的基本使用</title> </head> <body>     <div id="app">       <div>{{msg}}</div>       <div>         <input type="text" v-model='msg'>       </div>     </div>     <script type="text/javascript" src="js/vue.js"></script>     <script type="text/javascript">       /*         双向数据绑定         1、从页面到数据         2、从数据到页面       */       var vm = new Vue({         el: '#app',         data: {           msg: 'Hello Vue'         }       });     </script> </body> </html>

执行的效果：

Vue基础(二)：模板语法(一)

我们在控制台输入vm.msg，可以看到现在的值是Hello Vue。

然后我们在文本框中添加文字 Hello Java，再次在控制台打印。

Vue基础(二)：模板语法(一)

可以看到，我们绑定的内容是同时变化的，那么证明我们双向绑定成功了。 

(2) MVVM设计思想 

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

M、V、VM 分别代表什么？
m model
　　数据层 Vue 中 数据层 都放在 data 里面
v view 视图
　　Vue 中 view 即 我们的HTML页面
vm （view-model） 控制器 将数据和视图层建立联系
　　vm 即 Vue 的实例 就是 vm

 

便宜好用的国外VPS推荐