目录
1. Vue 概述2. Vue 基本使用2.1 Vue安装2.1.1 直接用 script 标签 引入2.1.2 NPM2.1.3 其它安装方式（略...）2.2 与传统开发模式对比2.3 Vue.js 之 HelloWorld 细节分析2.3.1 Vue实例参数2.3.2 插值表达式的用法2.3.3 Vue代码运行原理3. Vue模板语法3.1 模板语法概述3.1.1 理解前端渲染3.1.2 前端渲染方式3.1.3 **Vue模板语法概览**3.2 指令3.2.1 什么是指令3.2.2 v-cloak指令用法3.2.3 数据绑定指令3.2.4 数据响应式3.3 双向数据绑定指令3.3.1 什么是双向数据绑定3.3.2 v-model 指令用法3.3.3 MVVM设计思想3.4 事件绑定3.4.1 Vue如何处理事件？1. Vue 概述
尤雨溪：Vue.js 的创建者
年 2 月， Vue.js 正式发布
年 10 月 27 日，正式发布 1.0.0
年 4 月 27 日，发布 2.0 的预览版本
Vue是什么 ？
Vue(读音/vjuː/，类似于 view) 是一套用于构建用户界面的 渐进式框架 ；vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。使用 Vue 将 helloworld 渲染到页面上：
Vue：渐进式 JavaScript 框架
声明式渲染 → 组件系统 → 客户端路由 → 集中式状态管理 → 项目构建
官网：/v2/guide/
易用：熟悉 HTML 、 CSS 、 JavaScript 知识后，可快速上手 Vue；灵活：在一个库和一套完整框架之间自如伸缩；高效： 20kB 运行大小，超快虚拟 DOM。
2. Vue 基本使用
2.1 Vue安装
2.1.1 直接用 script 标签 引入
开发环境版本（包含了有帮助的命令行警告）
// 制作原型或学习，可以使用最新版本：<script src="/npm/vue/dist/vue.js"></script>
生产环境版本（优化了尺寸和速度）
<script src="/npm/vue"></script>
对于生产环境，推荐 链接 到 明确的版本号(避免新版本造成不可预期的破坏）：
<script src="/npm/vue@2.6.12"></script>
2.1.2 NPM
构建 大型应用 时推荐使用 NPM 安装：
#最新稳定版$ npm install vue
2.1.3 其它安装方式（略…）
更多 >> 访问 官方文档 ：/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.3Vue模板语法概览
差值表达式；指令；事件绑定；属性绑定；样式绑定；分支循环结构。3.2 指令
3.2.1 什么是指令
指令的本质就是自定义属性。
Vue 中指令都是以v-开头（比如：v-cloak）
官网：/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>
如果觉得《Vue全家桶 之 Vue基础》对你有帮助，请点赞、收藏，并留下你的观点哦！
