1 Vue概述
官网:https://cn.vuejs.org/
1、什么是Vue.js
Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；
2、框架和库的区别
框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。
JQuery：封装js的类库，项目导入xx.css xxx.js
2 Vue入门案例
Vue基础这块，我们是基于vue.js做开发的。所以使用vue的基本流程有以下三步：
引入vue.js文件
定义vue视图控制区域
创建vue对象
代码如下所示：
el
- 作用:当前Vue实例所管理的html视图
- 值:通常是id选择器(或者是一个 HTMLElement 实例)
- 不要让el所管理的视图是html或者body
data
- Vue 实例的数据对象，是响应式数据(数据驱动视图)
- 可以通过 vm.$data 访问原始数据对象
- Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a
- 视图中绑定的数据必须显式的初始化到 data 中
methods
- 其值为可以一个对象
- 可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用
- 方法中的 this 自动绑定为 Vue 实例。
- 注意，不应该使用箭头函数来定义 method 函数(例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined
3 MVVM思想
MVVM思想是vue代码执行的流程体现，跟我们之前学过的后端MVC思想有些相似。
MVC是后端的分层开发概念：
MVC是比较直观的架构模式，用户请求->Controller（业务逻辑处理）->Model（数据持久化），Controller（业务逻辑处理）->View（将结果反馈给View）
MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
MVVM是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。
以HelloWorld为例，我们如何解读代码中的MVVM呢？
4 Vue插值语法
作用:会将绑定的数据实时的显示出来:类似jsp显示数据${属性名}
语法：
{{js表达式、三目运算符、方法调用等}}
举例：
js表达式：1+num
通过任何方式修改所绑定的数据,所显示的数据都会被实时替换
{{js表达式、三目运算符、方法调用等}}
注意：不能写JS语句，如：var a=10; 分支语句 循环语句
<!-- 在插值表达式中可以访问vm实例中data里面的属性 -->
{{message}}
<p>{{message}}</p>
<p>{{message+'啦啦啦'}}</p>
<p>{{age>18?'成年':'未成年'}}</p>
<p>{{message.split("")}}</p>
<!-- 在插值表达式中不能写js语句 -->
<p>{{var a = 10}}</p>
5 Vue指令のv-text和v-html
什么是Vue指令
指令 (Directives) 是带有 v- 前缀的特殊特性
指令特性的值预期是单个JavaScript表达式(v-for 是例外情况，稍后我们再讨论)
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
v-html和v-text
作用:会将绑定的数据实时的显示出来
作用：扩展了html标签的功能、大部分的指令的值是js的表达式, 取代DOM操作
类比Javascript
你可以使用 jQuery 的功能来类比学习 Vue 的基本功能：
javascriptvue说明innerTextv-text插值表达式,为标签设置文本内容innerHTMLv-html获取或为标签设置内容包含html值
v-text和插值表达式的区别
v-text：会把元素中之前的内容全部清空掉！ 更新整个标签中的内容
插值表达式{{}}: 插值表达式只会插入内容，并不会清除其余的内容
v-html:更新标签中的内容/标签，可以渲染内容中的HTML标签
插值设置：本身就有一句话：{{text}}
<!-- v-text:等价于innerText，遇到html代码不会解析 v-text会覆盖标签内部原始的内容，而{{}}不会 -->
v-text:本身就有一句话：
<hr>
<!-- v-html:等价于innerHTML，遇到html代码会解析 -->
v-html:
num1:12
6 Vue指令のv-on作用:使用v-on指令绑定事件，并在事件被触发时执行一些JavaScript代码
语法:
@事件名 = “methods中的方法名”
v-on:事件名=“methods中的方法名”
举例
在vue对象内部，如果要使用data的数据，必须使用this.访问，当然，你要也可以定义vue对象名，比如上述代码中vm，利用vm.访问数据也可以
7 Vue指令のv-model
表单元素以外的标签，只能做数据显示：data里面的数据交给div显示，使用{{}} v-text v-html
表单元素除了需要数据显示，还希望将用户修改后的数据反映data中，使用v-model
v-model的作用当做：let info=document.getElementByxx(“”).value
案例：网页计算器
作用
表单元素的绑定
特点
双向数据绑定
数据发生变化可以更新到界面
通过界面可以更改数据
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。应该在 data选项中声明初始值
案例：网页版简易计算器
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页版简易计算器</title>
<script src="./vue/vue.js"></script>
<!--
1.完成num1 num2从data直接取数据，求和
2.尝试从文本框获取数字，求结果。注意：文本默认是num1 num2初始值
-->
<div id="app">
<p>
数字1:<input type="text" name="" id="" v-model.lazy.number.trim="num1">
</p>
<p>
数字2：<input type="text" name="" id="" v-model.lazy.number.trim="num2">
</p>
<p>
<select name="" id="" v-model="opr">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
<option value="%">%</option>
</select>
</p>
<p>
<button v-on:click="getResult()">计算</button>
</p>
<div>
计算结果是：{{result}}
</div>
</div>
v-model修饰符
Vue 中针对v-model在输入框中的使用，提供了三个修饰符：
.lazy：将输入框的 input 事件切换为 change 事件；
.number：自动将用户的输入值转为数值类型；
.trim：自动过滤用户输入的首尾空白字符。
v-model在默认情况下，是用户在修改输入框值的同时，data 中对应的数据会立马发生改变。而.lazy修饰符的作用，就是让用户在修改输入框值时不会立马改变 data 中的数据，而是等用户输入完成输入框失去焦点时才将输入框的值更新到 data 的数据中。
案例1：简易计算器
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model 双向绑定</title>
<!-- 1.html引入vue.js支持当前页面可以使用vue的语法或函数 -->
<script src="./vue/vue.js"></script>
<!-- 2.提供vue数据显示的区域 -->
<div id="app">
<h2>{{username}}的字符个数：{{username.length}}</h2>
<hr>
<!--
.lazy：将输入框的 input 事件切换为 change 事件；
.number：自动将用户的输入值转为数值类型；
.trim：自动过滤用户输入的首尾空白字符。
-->
请输入用户名：<input type="text" name="" id="" v-model.lazy.trim="username">
<hr>
<h2>{{typeof num}}</h2>
<input type="text" name="" id="" v-model.lazy.trim.number="num">
</div>
v-model获取不同表单项的值
绑定文本框
效果:当文本框的值发生变化后，div中的内容也会发生变化
<p>{{message}}</p>
<input type='text' v-model='message'>
<hr>
<!-- v-model其实是语法糖,它是下面这种写法的简写 -->
<input v-bind:value='message' v-on:input='message = $event.target.value' />
绑定多行文本
<textarea v-model="message">
我是textarea内的插值表达式 无效 {{str}}
</textarea>
<div>{{ message }}</div>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'message默认值',
str: 'str字符串'
}
});
</script>
绑定复选框
复选框的使用可以分为两种情况：
获取复选框的选中状态；
获取复选框的选中内容；
获取复选框的选中状态
isAgree是布尔类型的数据
new Vue({
el:“#app”,
data() {
return {
isAgree: false
}
}
});
获取复选框的选中内容
此种方式需要input标签 提供value属性
v-model绑定的是 数组-
<div id="app">
<div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
</div>
绑定单选框
需要input提供value属性的值
男
女
{{sex}}
绑定下拉列表
<select v-model="selected">
<option disabled value="">请选择</option>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select> <span> 您选择的是: {{selected}}</span>
8 Vue指令のv-bind
作用
可以绑定标签上的任何属性
v-bind指令的三种用法：
直接使用指令 v-bind:属性名
使用简化指令 :属性名
在绑定的时候，拼接绑定内容：:title=“btnTitle + ‘, 这是追加的内容’”
案例
<div id="app">
<a v-bind:href="url" target="_blank">百度</a>
<hr>
<a v-bind:href="'http://www.baidu.com?id='+id">删除</a>
</div>
提示：v-bind 命令可以简写为 : 形式。个人建议初学者不要使用简写，以免造成记忆负担
9 Vue指令v-if & v-show
v-if和v-show在vue中作用是一样。都是用来根据条件控制某些数据是否需要显示。
v-if和v-show区别
v-if和v-show使用小结
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变,比如初始化加载元素时，指令的值是一个false，v-if 较好
技术选型：
如果基于条件频繁切换隐藏或显示， v-show更好；
如果网页第一次加载时确定条件，以后条件就不再变化了，v-if条件不成立，标签压根就会html里面绘制出来，v-if更好
案例
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if和v-show</title>
<script src="./vue/vue.js"></script>
<div id="app">
<!-- 控制div满足什么条件才可以显示 -->
<div v-if="books.length===0">v-if控制：暂无图书信息可显示+++++++++</div>
<div v-else>
<h1>图书信息如下所示：</h1>
</div>
<hr>
<!--
v-if和v-show区别：
相同的：v-if和v-show都实现数据显示不显示的控制
区别：
v-if在条件不满足时，html的代码中完全提供对应的html代码
v-show在条件不满足时，html代码会出现，但是有一个css样式display=none
所以，日常使用时v-if和v-show的使用建议是：
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。
因此，如果需要频繁切换 v-show 较好，
如果在运行时条件不大可能改变,比如初始化加载元素时，指令的值是一个false，v-if 较好
-->
<div v-show="books.length===0">v-show控制：暂无图书信息可显示***********</div>
</div>
作用：遍历数据的。类似java中的for循环
循环数组
作用: 根据一组数组或对象的选项列表进行渲染。
v-for 指令需要使用 item in items 形式的特殊语法，
items 是源数据数组 /对象
当要渲染相似的标签结构时用v-for
v-for=“(迭代变量，下标) in 数组”
案例：
<template v-for="(name,i) in names">
<input type="radio" name="choose" id="" v-bind:value="name">{{i}}--{{name}}
</template>
迭代数组 掌握迭代对象数组
v-for=“(item, i) in 对象数组名”
迭代数字
这是第 {{i}} 个P标签
案例：利用v-for显示图书对象数组，并控制页码循环
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for案例</title>
<script src="./vue/vue.js"></script>
<div id="app">
<table border="1" cellpadding="8" cellspacing="0">
<tr>
<th>编号</th>
<th>书名</th>
<th>单价</th>
</tr>
<tr v-for="(book,i) in names">
<td>{{book.id}}</td>
<td>{{book.bookName}}</td>
<td v-text="book.price"></td>
</tr>
<tr>
<td colspan="3">
<span v-for="n in pages" v-bind:class="[pageNum==n ? 'bg' : '', 'page']">
{{n}}
</span>
</td>
</tr>
</table>
</div>
迭代对象中的属性
案例：
<table border="1" cellpadding="8" cellspacing="0">
<tr>
<th>身份证号码</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>{{person.id}}</td>
<td>{{person.name}}</td>
<td>{{person.sex}}</td>
<td>{{person.age}}</td>
</tr>
<tr>
<td v-for="(attrValue,attrName) in person">{{attrName}}、{{attrValue}}</td>
</tr>
</table>
细节：v-for中的key属性
2.2.0+ 的版本里，当在组件中使 v-for 时，key 现在是必须的
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性