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对象

代码如下所示：
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b89e0f0bfc004e06b3f6970a13d72f2d.png#pic_center
helloworld案例代码解读：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

作用:使用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指令的三种用法：

1. 直接使用指令 v-bind:属性名

2. 使用简化指令 :属性名

3. 在绑定的时候，拼接绑定内容：: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 属性