一、Vue介绍
作者：尤雨溪
官网：https://cn.vuejs.org
Vue.js是一套构建用户界面的渐进式框架。声明式渲染和组件系统是Vue的核心库所包含内容。
- 渐进式：循序渐进，不需要掌握全部的点，学多少用多少
- 框架：半成品的应用
- 声明式渲染：（如同js基础一样，要使用变量则必须先声明变量，这种称之为声明式）
Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统。
- 组件化应用构建
组件系统是Vue的另一个重要概念，因为它是一种抽象的允许我们使用小型、独立和通常可复用的“小积木”构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树。
- 基于MVVM
二、Vue入门
1、初识Vue
vuejs文件分为“.min.js”与“.js”文件，区别在于其中带“.min”这个是生产版本（压缩版），不带“.min”的是测试版本（测试时用的，不压缩的）：
生产版本（vue.min.js）
- 代码压缩（代码不具备可读性）
- 不支持vue调试工具
开发版本（vue.js）
- 代码不压缩（代码具备可读性）
- 支持vue的调试工具
以输出“Hello World”为例，使用Vue.js实现输出“Hello World”案例：
步骤（仅限在vue的非工程化的环境下）
- 在视图部分定义渲染的容器，正常情况下内容相对固定，一般是：
<div id="app"></div>
- 通过
script标签引入下载好的vue.js文件
- 产生vue实例（js部分，需要去new）
- 需要给实例传递配置选项（格式是一个对象）
- 如果可能，会用到一些数据，数据需要在对象中声明（声明式渲染）
- 如果需要展示数据的话，则需要使用特定的表达式（插值表达式，形式
{{表达式}}，在视图部分写，哪里需要值就在哪里写）
代码片段如下：
<body> <!-- 1. 定义渲染的容器 --> <div id="app"> {{msg}} <div> <!-- 只要不出id=app这个容器的界限，不管多少深度，都没问题 --> {{msg}} </div> </div> <!-- 2. 引入vue.js文件 --> <script src="./js/vue.js"></script> <script> // 3. 产生vue实例（V是大写的），传递配置选项 new Vue({ // el => element，指定vue负责渲染的容器的选择器 el: "#app", // data指定vue实例需要的数据（数据的初始化） data: { msg: "hello world", }, }); </script> </body>
Vue实例细节分析：
- Vue参数对象属性
- el：元素挂载的位置，值可以是CSS选择器或DOM元素
- data：模型数据，值是一个对象（仅限于当前）
- 插值表达式
{{msg}}
- 将数据填充到HTML标签中
上述提及的都是前端vue框架的模板语法，当然vue的模板不仅仅是上述这个2个，还有更多的，比如后面要学习的：
- 指令
- 事件
- 流程控制
- …
2、vue devtools工具安装
通过chrome中的谷歌插件商店安装Vue Devtools工具，此工具帮助我们进行vue数据调试所用，一定要安装。Vue工具在谷歌商店的地址是：https://chrome.google.com/webstore?utm_source=chrome-ntp-icon
请注意：打开chrome应用商店，需要科学上网才能访问到，至于怎么科学上网请各位自行解决。
安装好后打开Chrome的开发者工具（F12或Ctrl+Shift+I）即可使用：
补充：如果自己解决不了科学上网问题，但是又需要用Vue开发工具那该怎么办？
如果实在解决不了科学上网难题，Vue官方也提供了插件源码允许我们自己编译/构建Google Chrom插件，步骤如下（构建插件流程稍微麻烦一些<不要求掌握如何构建>，此处已为同学们构建好，可以直接使用）。
3、Vue模板语法
3.1、插值表达式
**插值表达式：**是vue框架提供的一种在HTML模板中绑定数据的方式，使用{{变量名}}方式绑定Vue实例中data中的数据变量，会将绑定的数据实时的在视图中显示出来。
插值表达式的写法支持使用：
变量名
部分JavaScript表达式
- 注：{{ }}括起来的区域，就是一个就是js语法区域，在里面可以写部份的js语法。不能写 var a = 10;分支语句;循环语句
三元运算符
方法调用（方法必须需要先声明）
…
<body> <div id="app"> <!-- 直接使用变量名 --> <h5>{{name}}</h5> <!-- 运算 --> <h5>{{name + '--好的'}}</h5> <h5>{{ 1 + 1 }}</h5> <!-- 使用函数 --> <h5>{{title.substr(0,6)}}</h5> <!-- 三目运算 --> <h5>{{ age > 18 ? '成年' : '未成年'}}</h5> </div> </body> <script src="./js/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { title: "我是一个标题，你们看到没有", name: "张三", age: 20, }, }); </script>
3.2、指令
问1：什么是指令？
- 指令的本质就是标签中的vue自定义属性
- 指令格式以“v-”开始，例如：v-cloak，v-text、v-html等
指令的含义：在vue的html中，以v-开头的自定义属性就是指令。
详见官网对指令的说明：https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4
问2：指令有什么作用？
正如插值表达式的效果，插值表达式只能用于标签之间的数据输出；在标签属性上，插值表达式无用武之地，但是有需要在属性中使用可变数据的情况，此时指令就能帮助我们解决这个问题。
语法糖：复杂操作的简化形式
当表达式的值改变时，将其产生的连带影响，响应式地作用于页面（DOM）。（简化操作）
小试牛刀：v-text指令与v-html指令【相当于innerText 和innertHTML】
- 官网
- v-text：https://cn.vuejs.org/v2/api/#v-text
- v-html：https://cn.vuejs.org/v2/api/#v-html
友情提醒：v-html尽量少用甚至不用，因为可能引发XSS（跨站脚本攻击，XSS）攻击。
<body> <div id="app"> <!-- 插值表达式形式 --> <div>{{str1}}</div> <!-- 插值表达式此时与v-text是等效的 --> <div v-text='str2'></div> <div v-html='str1'></div> </div> </body> <script src="./js/vue.js"></script> <script> new Vue({ el: '#app', data: { str1: '迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。', str2: '<a href="http://www.baidu.com">百度</a>' } }) </script>
