1. Vue 概述
尤雨溪：Vue.js 的创建者
2015 年 10 月 27 日，正式发布 1.0.0
2016 年 4 月 27 日，发布 2.0 的预览版本
Vue是什么 ？
- Vue (读音
/vjuː/，类似于 view) 是一套用于构建用户界面的 渐进式框架 ； - vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
使用 Vue 将 helloworld 渲染到页面上：
Vue：渐进式 JavaScript 框架
声明式渲染 → 组件系统 → 客户端路由 → 集中式状态管理 → 项目构建
官网：https://cn.vuejs.org/v2/guide/
- 易用：熟悉 HTML 、 CSS 、 JavaScript 知识后，可快速上手 Vue；
- 灵活：在一个库和一套完整框架之间自如伸缩；
- 高效： 20kB 运行大小，超快虚拟 DOM。
2. Vue 基本使用
2.1 Vue安装
2.1.1 直接用 script 标签 引入
-
开发环境 版本（包含了有帮助的命令行警告）
// 制作原型或学习，可以使用最新版本： <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -
生产环境 版本（优化了尺寸和速度）
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
对于 生产环境，推荐 链接 到 明确的版本号 (避免新版本造成不可预期的破坏）：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
2.1.2 NPM
构建 大型应用 时推荐使用 NPM 安装：
#最新稳定版
$ npm install vue
2.1.3 其它安装方式（略…）
更多 >> 访问 官方文档 ：https://cn.vuejs.org/v2/guide/installation.html
2.2 与传统开发模式对比
-
原生JavaScript
<div id="msg"></div> <script type="text/javascript"> var msg = 'Hello World' var div = document.getElementById('msg') div.innerHTML= msg </script>
-
jQuery
<div id="msg"></div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var msg = 'Hello World'; $('#msg').html(msg); </script>
-
Vue
<div id="app"> <div>{{ msg }}</div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { msg: 'HelloWorld' } }) </script>
2.3 Vue.js 之 HelloWorld 细节分析
2.3.1 Vue实例参数
-
el ：元素的挂载位置（值可以是 CSS 选择器 或 DOM 元素）；
-
data ：模型数据（值是一个 对象）
示例1：
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
2.3.2 插值表达式的用法
-
将数据填充到 HTML 标签中；
示例2：
<div id="app"> {{ message }} </div> <!--输出 Hello Vue! --> -
插值表达式支持基本的计算操作
2.3.3 Vue代码运行原理
概述编译过程的概念（ Vue 语法 → 原生语法）
3. Vue模板语法
3.1 模板语法概述
3.1.1 理解前端渲染
3.1.2 前端渲染方式
- 原生 js 拼接字符串；
- 使用前端模板引擎；
- 使用 vue 特有的模板语法。
-
原生js拼接字符串
基本上就是将数据以字符串的方式拼接到 HTML 标签中，前端代码风格大体如下示。
var d = data.weather; var info = document.getElementById('info'); info.innerHTML = ''; for(var i=0;i<d.length;i++){ var date = d[i].date; var day = d[i].info.day; var night = d[i].info.night; var tag = ''; tag += '<span>日期：'+date+'</sapn><ul>' tag += '<li>白天天气：'+day[1]+'</li>' tag += '<li>白天温度：'+day[2]+'</li>' tag += '<li>白天风向：'+day[3]+'</li>' tag += '<li>白天风速：'+day[4]+'</li>' tag += '</ul>'; var div = document.createElement('div'); div.innerHTML = tag; info.appendChild(div); }缺点：不同开发人员的代码风格差别很大，随着业
务的复杂，后期的维护变得逐渐困难起来。
-
使用前端模板引擎
以下是基于模板引擎
art-template的一段代码，与拼接字符串相比，代码明显规范了很多，它拥有自己的一套模板语法规则。<script id="abc" type="text/html"> {{if isAdmin}} <h1>{{title}}</h1> <ul> {{each list as value i}} <li> 索引 {{i + 1}}:{{value}}</li> {{/each}} </ul> {{/if}} </script>优点： 大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。
缺点： 没有专门提供事件机制。
3.1.3 Vue模板语法概览
- 差值表达式；
- 指令；
- 事件绑定；
- 属性绑定；
- 样式绑定；
- 分支循环结构。
3.2 指令
3.2.1 什么是指令
指令 的 本质 就是 自定义属性。
Vue 中指令都是以 v- 开头（比如：v-cloak）
官网：https://cn.vuejs.org/v2/api/#指令
3.2.2 v-cloak指令用法
-
v-cloak：防止页面加载时出现闪烁1）插值表达式存在的问题：“闪动”；
2）如何解决该问题：使用 v cloak 指令；
3）解决该问题的原理：先隐藏，替换好值之后再显示最终的值。示例如下：
<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: '#app', // 指定挂载位置：元素id 为 app 的元素 data: { // data 里存储的模型数据 msg: 'Hello Vue' } }); </script> </body> </html>
3.2.3 数据绑定指令
-
v-text填充纯文本 ；用于将数据填充到标签中，作用与插值表达式类似，但没有闪动问题。相比插值表达式更加简洁。
如果数据中有HTML标签会将html标签一并输出。
注： 此为 单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。
<div id="app"> <!-- 注意:在指令中不要写插值语法 直接写对应的变量名称 在 v-text 中赋值时不要再写插值语法 --> <p v-text="msg"></p> <p> <!-- Vue 中只有在标签的内容中才用插值语法 --> {{msg}} </p> </div> <script> new Vue({ el: '#app', data: { msg: 'Hello Vue.js' } }); </script>
-
v-html填充 HTML 片段；用法和
v-text相似，但是它可以将 HTML 片段填充到标签中。① 存在安全问题；
② 本网站内部数据可以使用（一般只在可信任内容上使用
v-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>v-html与v-text区别在于，v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当 html 标签解析。
后输出。
-
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>
3.2.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>
3.3 双向数据绑定指令
3.3.1 什么是双向数据绑定
-
当数据发生变化的时候，视图也就发生变化；
-
当视图发生变化的时候，数据也会跟着同步变化。
图示：
3.3.2 v-model 指令用法
<div id="app">
<div>{{msg}}</div>
<div>
<!--输入框中内容改变的时候， 页面上的msg 会自动更新 -->
<input type="text" v-model='msg'>
</div>
</div>
注： v-model指令限制在 <input>、<select>、<textarea>、components 中使用。
3.3.3 MVVM设计思想
- M(model)
- V(view)
- VM(View Model)
MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel：
- m（model）
数据层，Vue 中 数据层都放在data里面； - v（view / 视图）
Vue 中 view 即 我们的 HTML 页面； - vm （view-model） 控制器 将数据和视图层建立联系
vm即 Vue 的 实例 ，就是vm。
3.4 事件绑定
3.4.1 Vue如何处理事件？
-
v-on指令：用来绑定事件形式如：
v-on:click简写为@click;用法：
<input type='button' v-on:click='num++'/>简写形式：
<input type='button' @click='num++'/>
v-on事件函数中传入参数<div id="app"> <div>{{num}}</div> <div> <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 --> <button v-on:click='handle1'>点击1</button> <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递， 并且事件对象的名称必须是$event --> <button v-on:click='handle2(123,456,$event)'>点击2</button> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { num: 0 }, methods: { handle1: function(event) { console.log(event.target.innerHTML) }, handle2: function(p, p1, event) { console.log(p, p1) console.log(event.target.innerHTML) this.num++; } } }); </script>
4179
