什么是vue.js
Vue是目前前端开发中最流行的一个MVVM框架。
Vue是一套用于构建用户界面的渐进式的自底层向上增量开发的MVVM框架。
MVVM框架：
渐进式：可以在原有项目上一两个功能使用Vue，或者整个项目全部使用Vue，Vue不会做职责之二爱的事情。
自底层向上开发：（先把基础页面写好，然后再一一的添加各种功能，从简单到复杂的一个过程） 有点像二阶段的渐进增强。
Vue优点：
- 轻量级
- 高效率
- 上手快
理解MVC MVVM MVP等思想
框架：就是封装了很多与业务无关的重复代码
框架优势：使用框架可以大大提升我们的开发效率
MVC：是一个思想演变出来的MVC框架
M：模型(model) 就是数据
V：视图(view)前端展示(用户可以看到的界面)
C：控制器(controller) 负责触发和接受数据的传递
为什么学习MVC？
比较主流的设计思想，在MVC思想下，没有dom操作，把数据独立出来，方便管理。
把业务逻辑、数据、界面展示独立出来方便我们后续开发于测试
MVVM
View层：
- 视图层
- 在我们前端开发中，通常就是DOM层。
- 主要的作用是给用户展示各种信息。
Model层：
- 数据层
- 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
VueModel层：
- 视图模型层
- 视图模型层是View和Model沟通的桥梁。
- 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
- 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
有了Vue帮助我们完成VueModel层的任务，在后续的开发，我们就可以专注于数据的处理，以及DOM的编写工作了。
MVP
M：模型(model) 就是数据
V：视图(view)前端展示(用户可以看到的界面)
P：表示器(presenter) 负责调控M与V之间的间接交互
如何利用Vue将hello world 渲染到页面上
1.需要提供标签用于填充数据
注意：在标签中我么使用插值语法的形式，即{{}}进行填充数据
2.引入vue.js库文件
注意：一定要先引入vue文件，在使用vue语法；因为存在作用域的问题
3.使用vue的语法做功能
new Vue() 创建一个vue的实例
在构造函数中以对象的形式做一些配置
4.利用vue将数据渲染到页面中
数据写在data里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue基本使用</title>
</head>
<body>
<!-- 1、需要提供标签用于填充数据 -->
<div id="app">
<!-- 4.Vue管理的数据都是写在这个dome容器里面
模块语法 {{}} =>数据插入到页面中使用-->
<p>{{msg}}</p>
</div>
</body>
<!-- 2、引入vue.js库文件 -->
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<script>
// 3、使用vue的语法做功能
const vm=new Vue({
el:'#app', //该属性决定了这个Vue对象挂载到哪一个元素上
data:{
msg:'hello world',
}
})
</script>
</html>
vue扩展知识：
在vue中核心就是可以让我们使用简单的模板语法：声明式的对数据进行渲染
vue是声明式渲染=>只需要告诉程序我们想要什么效果，至于数据的插入全部交给程序解决
命令式渲染=>命令我们的程序如何一步一步的执行
数据驱动=>通过vm视图模型来控制数据的变化 让数据随着内容的改变而改变
模板语法注意：
1.不要在模板语法中写太复杂的表达式
2.在模板语法中如果一个内容被双引号包裹会被当成字符串原样输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue模块语法插入其他数据类型</title>
</head>
<body>
<!-- 1.创建视图 view -->
<div id="demoDiv">
<!-- vue是声明式渲染=>只需要告诉程序我们想要什么效果，至于数据的插入全部交给程序解决 -->
<!-- 3.Vue管理的数据都是写在这个dome容器里面
{{}}数据插入到页面使用 -->
<h2>插入字符串：{{text}}</h2>
<h2>插入数字：{{num}}</h2>
<h2>运算符使用：{{num*num1}}</h2>
<h2>布尔：{{bool}}</h2>
<!-- 三元运算符 -->
<h2>三元运算符：{{bool ? "bool真的":"bool假的"}}</h2>
<h2>数组：{{arr}}</h2>
<h2>数组1：{{arr[1]}}</h2>
<h2>对象：{{obj}}</h2>
<h2>对象：{{obj.name}}</h2>
</div>
</body>
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<!-- 2. 创建VM -->
<script>
new Vue({
el:'#demoDiv', /*视图 元素的挂载位置*/
data:{ /*M层 模型数据*/
text:'我是字符串',
num:4,
num1:5,
bool:false,
arr:["小米","大米","红米"],
obj:{
name:'xixi',
age:18
}
}
})
</script>
</html>
指令
什么是指令
1.指令就是HTML特殊属性
HTML属性是什么
就是卸载HTML中的开标签中 以属性="属性值"的写法完成的 他的作用是用来扩展HTML标签的功能
2.Vue中指令都是以 v- 开头
为什么会有闪烁问题？
代码加载的时候先加载HTML 把插值语法当做HTML内容加载到页面上 当加载完js后才把插值语法替换掉 所以我们会看到闪烁问题
如何解决插值语法的闪烁问题？
v-cloak
v-cloak指令
v-cloak的用法：
1.提供样式
[v-vloak]{diaplay:none}
2.在插值表达式里的标签中添加v-cloak指令
背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-cloak</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
</body>
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
msg:'hello vue',
}
})
</script>
</html>
v-once
作用：只渲染元素和组件一次。这可以用于优化更新性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-once</title>
<style>
</style>
</head>
<body>
<div id="app">
<p v-once>{{info}}</p>
</div>
</body>
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
info:'数据不需要修改'
}
})
</script>
</html>
v-model
作用：用于在<input>、<select>、<textarea>、components（组件） 中 关联模型数据 从而实现双向数据绑定
语法：写在需要绑定的表单元素的开标签中 v-model=”绑定的变量”
注意：当前这个指令 必须必须必须绑定到表单元素上
双向数据绑定:把模型数据绑定到视图中 如果绑定的数据在视图中发生了改变 模型也随之发生改变 ，模型改变了视图也随之发生改变
双向数据绑定的原理？？？
vue双向数据绑定是通过数据劫持于发布者-订阅者模式的方式来进行实现的
数据劫持：就是在我们访问或者是设置对象的属性的时候，会触发Object.defineProperty()函数来进行劫持（拦截）的，返回（get）设置（set）的两个对象的方法来操纵我们对于数据的反应
发布者订阅这模式:就是对象间的一种1对多的依赖关系 当这个一个对象的状态改变的时候，所有依赖于这个对象的所有内容都会得到通知
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model</title>
</head>
<body>
<!-- 双向数据绑定
1、从页面到数据
2、从数据到页面 -->
<div id="app">
<input type="text" v-model='msg'>
<p>{{msg}}</p>
</div>
</body>
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
msg:'大南京真美'
}
})
</script>
</html>
v-show
作用：控制一个元素的显示和隐藏（元素背动态设置了display:none）
语法：v-show=”bool” true就是显示 false 就是隐藏（默认）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-show</title>
</head>
<body>
<div id="app">
<!-- 页面中有个复选框 当我勾选的时候下面的内容显示 当我取消勾选的时候下面的内容隐藏 -->
<input type="checkbox" v-model="bool">{{bool?'显示':'隐藏'}}
<p v-show='bool'>{{text}}</p>
</div>
</body>
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
text:'hello vue',
bool:false
}
})
</script>
</html>
v-on
作用：就是给vue来绑定事件的
语法：1.v-on:事件名=“函数()” 2.@事件名=”函数()”
注意：vue中函数写在实例中的 methods配置项中
vue中 事件如何调用？
直接绑定函数名称调用
<button v-on:click='handle'>点击1</button>
调用函数的形式
<button v-on:click='handle1()'>点击1</button>
vue中 事件对象 怎么使用
通过默认的事件参数
通过$event 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-on</title>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<p v-on:click="num++" >点击</p>
<p @click="num++" >点击1</p>
<!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
<p @click="handle">点击2</p>
<!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
并且事件对象的名称必须是$event -->
<p @click="handle1(123,456,$event)">点击3</p>
</div>
</body>
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
num:0
},
methods:{
handle: function(event) {
// 这里的this是Vue的实例对象+
console.log(this === vm)
// 在函数中 想要使用data里面的数据 一定要加this
this.num++;
console.log(event.target.innerHTML);
},
handle1:function(p1,p2,event){
this.num++;
console.log(p1,p2);
console.log(event.target.innerHTML);
}
}
})
</script>
</html>
v-for
作用：便利data中的数据
语法：v-for=”(item,index) in 你要遍历的数据
Item：你每次便利出来时候得到的数据
Index:每次便利数据的时候得到的下标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for</title>
</head>
<body>
<div id="app">
<p v-for='(item,index) in arr'>{{item}}-----{{index}}</p>
<table border=1>
<tr v-for='(item,index) in obj'>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
<div v-for='(item,key,index) in obj1'> {{item}}----{{key}}----{{index}}</div>
</div>
</body>
<script src="../2.vue-practice/node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
arr:['哈哈','嘻嘻','吼吼','呜呜'],
obj:[
{name:'xixi',age:18},
{name:'jak',age:27},
{name:'mark',age:22}
],
obj1:{
name: 'zhangsan',
age: 13,
gender: 'female'
}
}
})
</script>
</html>
v-bind
作用：给网页中的html元素绑定属性
语法：1.v-bind:属性名=“值”
2.：属性名=“值”
注意：绑定多个属性的时候不能用简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- <img v-bind:src="imgSrc" alt=""> -->
<!-- 练习2:点击一个复选框 然后勾选的状态下 下面的文字是红色的 取消勾选文字变成黑色 -->
<input type="checkbox" v-model="bool" >
<h1 v-bind:class="bool ? 'red':''">我是变色的字体</h1>
<!-- 一个html标签上加多个属性 -->
<!-- 注意：绑定多个属性的时候不能用简写 -->
<img v-bind="{src:imgSrc,title:text}">
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
const vue=new Vue({
el:'#app',
data:{
imgSrc:'./timg.jpeg',
text:'这是长腿妹妹',
bool:false
}
})
</script>
</html>
v-if
作用：判断是否加载页面元素
语法：v-if="表达式" true 加载元素 false不加载元素
对元素进行显示和隐藏的时候，其实是对当前这个dom元素进行新增和删除操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- v-if
作用：判断是否加载页面元素
语法：v-if="表达式" true 加载元素 false 不加载元素
对元素进行显示和隐藏的时候其实是对当前这个dom元素进行新增和删减-->
<div id="app">
<input type="checkbox" v-model='bool'>
<h1 v-if='bool'>{{text}}</h1>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
boo1:false,
text:"大南京真美"
}
})
</script>
</html>
v-if和v-show的区别
v-if:在切换的时候对于计算机的资源消耗比较好（安全性高）
v-show：在页面初始化的时候对计算机的资源消耗比较高（对需要频繁显示和隐藏的元素并且对安全性要求不高的内容来进行使用）
当 v-if 与 v-for 一起使用时谁的优先级更高
v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，所有不推荐v-if和v-for同时使用
v-else
前提是必须配合着v-if来进行使用 不能单独使用
作用：配合着v-if来对元素进行显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-else</title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model='bool'>
<h1 v-if='bool'>欢迎会员</h1>
<h1 v-else>请登录</h1>
</div>
<!-- v-else 前提是必须配合着v-if来进行使用，不能单独使用
作用：配合这个v-if -->
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
bool:false
}
})
</script>
</body>
</html>
v-else-if
当有一项成立的时候进行渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-else-if</title>
</head>
<body>
<div id="app">
<select v-model='text' >
<option value="吃饭">吃饭</option>
<option value="睡觉">睡觉</option>
<option value="打豆豆">打豆豆</option>
</select>
<h2 v-if='text=="吃饭"'>吃饭</h2>
<h2 v-else-if='text=="睡觉"'>睡觉</h2>
<h2 v-else-if='text=="打豆豆"'>打豆豆</h2>
<h2 v-else>您什么都没选</h2>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
text:''
}
})
</script>
</html>
v-text
就是向页面中插入纯文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-text</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- {{}} 模板语法 模板插值 -->
<!-- 闪烁、闪屏 -->
<!-- 当网速较慢或者大量渲染数据的时候，可能会把两个{{}}显示出来，渲染完成或加载完成的时候变成正常的 会出现闪烁问题 -->
<!-- 1.使用v-text替换{{}}
2.在style中加v-cloak diaplay:none
v-cloak指令 建议大家加载到el挂载的元素上-->
<h1>{{text}}</h1>
<!-- v-text指令 就是向页面插入文本 -->
<h1 v-text='text'></h1>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
text:'大南京'
}
})
</script>
</html>
v-html
就是向页面中插入html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-html</title>
</head>
<body>
<div id="app">
<h1 v-html='newHtml'></h1>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
// v-html 就是向网页中插入html
const vm=new Vue({
el:'#app',
data:{
newHtml:"<h1>么么哒</h1>"
}
})
</script>
</html>
监听/侦听 watch
作用：可以监听模型数据的改变，当绑定到监听上的模型数据改变了，那么监听就可以触发，来完成具体的功能。
注意：监听watch在初始化的时候不会执行，只有当数据改变之后才会运行
语法：要和el,data,methods同级的位置进行编写
watch:{
你要监听的数据(newval(新数据)，oldval(旧数据)){
你要处理的逻辑
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>watch基本语法</title>
</head>
<body>
<!--
作用：可以监听模型数据的改变，当绑定到监听上的模型数据改变了 那么监听就可以触发，来完成具体的功能
注意：监听watch在初始化的时候不会执行，只有当数据变化之后才会执行
语法：要和el data methods同级的位置来进行编写
watch:{
你要监听的数据（newval,oldnew）{
你要处理的逻辑
}
}
newval：新数据
oldnew:之前数据
-->
<div id="app">
<input type="text" v-model="text">
<h1>{{text}}</h1>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
const vm=new Vue({
el:'#app',
data:{
text:'默认值'
},
watch:{
text(val,oldVal){
console.log(`新数据：${val} 旧数据：${oldVal}`);
}
}
})
</script>
</html>
watch小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>watch小练习</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<!--
1.要完成点击重置按钮 清空两个输入框
（1）创建两个变量 用来接受输入框的值
（2）点击重置按钮 调用函数 ----》把两个模型数据的值设置为空
2.完成表格的动态数据展示
（1）创建一个数组对象（假数据） 然后便利这个数组对象先完成表格的动态生成
3.完成点击添加功能
（1）使用两个变量接受输入框的值（已经在第一步的时候完成了）
（2）给添加按钮绑定一个点击事件 在事件函数中进行
便利数据的数组对象进行一个push操作（基于双向绑定原理 模型数据改变了视图也发生改变）
4.允许添加按钮可以点击（如果两个输入框都有值的时候才允许 反之不能点击）
（1）监听两个输入框的变量
（2）如果两个输入框都有值那么允许点击 反之不能点击
5.删除操作（删除一行）
（1）点击模态框上的删除按钮调用一个删除函数
（2） 创建一个变量保存删除状态
（3）在点击单独删除的时候把下标赋值给这个状态的变量
（4）在删除函数中使用splice()来进行删除
6.删除操作（全部删除）
（1）在点击全部删除的时候 就是把保存状态的变量设置成小于0的内容
（2）在删除函数中判断如果等于设置删除全部的那个数字 就把数组清空进行全部删除
7.全部删除和暂无数据的显示判断
在userlist这个变量长度大于0的时候显示删除全部 反之显示暂无数据
-->
</head>
<body>
<div class="container" v-cloak>
<form action="">
<div class="form-group">
<label for=""></label>
<input type="text" class="form-control" v-model='uname'>
</div>
<div class="form-group">
<label for=""></label>
<input type="text" class="form-control" v-model='uage'>
</div>
<div>
<button type="button" class="btn btn-success " @click="add()" v-bind:disabled="bool">添加</button>
<button type="button" class="btn btn-info " @click='res()'>重置</button>
</div>
</form>
<div>
<table class="table table-bordered text-center">
<h1 class="text-center">用户信息表</h1>
<tr>
<td>序号</td>
<td>名字</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) in useList">
<td>{{index+1}}</td>
<td>{{item.useName}}</td>
<td>{{item.useAge}}</td>
<td>
<button class="btn btn-success" data-toggle="modal" href='#modal-id' @click="num=index">删除</button>
</td>
</tr>
<tr v-if='useList.length>0'>
<td colspan="4" >
<button class="btn btn-info " data-toggle="modal" href='#modal-id' @click="num=-1">删除全部</button>
</td>
</tr>
<tr v-else>
<td colspan="4">暂无数据...</td>
</tr>
</table>
<!-- 模态框开始 -->
<div class="modal fade" id="modal-id">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" >确定删除吗</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" @click='del()'>确定</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<!-- 模态框结束 -->
</div>
</div>
</body>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
const vm=new Vue({
el:'.container',
data:{
bool:true,/*扩展添加按钮能否点击*/
uname:'',
uage:'',
useList:[
{useName:'xixi',useAge:181},
{useName:'xixi',useAge:182},
],
num:0,/*保存删除下标*/
},
methods:{
// 点击重置按钮调用的函数
res(){
this.uname="",
this.uage=""
},
// 点击添加按钮调动的函数
add(){
// 把输入框的内容插入到数组对象总
this.useList.push({useName:this.uname,useAge:this.uage}),
this.res()
},
del:function(){
// 当索引小于0时，删除全部
if(this.num<0){
this.useList=[];
}else{
console.log(this.num);
// 删除操作其实就是对数组指定下标内容进行删除
this.useList.splice(this.num,1)
}
}
},
watch:{
uname(val,oldVal){
// 判断两个框是否都有值
if(this.uname=="" || this.uage==""){
// console.log(this.uname=="" || this.uage=="");
this.bool=true;
// console.log(this.bool);
}else{
this.bool=false
}
},
uage(val,oldVal){
if(this.uname=="" || this.uage==""){
// console.log(this.uname=="" || this.uage=="");
this.bool=true;
// console.log(this.bool);
}else{
this.bool=false
}
},
}
})
</script>
</html>
计算属性
为什么学习计算属性：
{{}}模板语法/插值语法在使用的时候是非常的方便，但是在设计之初用于简单的表达式运算，在模版语法中放入太对的逻辑会让这个模版维护起来非常的麻烦
什么是计算属性：
首先计算属性是一种属性，其次他有一个计算的特殊功能，就是每当计算属性得到值的时候，并不会向其他属性一样直接返回结果，而是可以经过一系列的计算之后在返回结果。在计算属性中会引用data中的某个属性 当这个属性发生改变的时候计算属性也会重新计算。
语法：与el,data，methods等属性同级的位置
computed：{
返回的结果数据( ){
return 返回的结果
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性</title>
<script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<!-- 计算属性
为什么要学习：{{}}模版语法/插值语法 在使用的是非常的方便，但是设计之初用于简单的表达式运算，在模版语法中放入太多的逻辑会让这个模版维护起来非常的麻烦 -->
<!-- 什么是计算属性:首先计算属性是一种属性 ，其次他有一个计算的特殊功能。就是每当计算属性得到值的时候，并不会向其他属性一样直接返回结果，而是可以经过一系列的计算之后在返回结果。在计算属性中会引用data中的某个属性 当这个属性发生改变的时候计算属性也会重新计算 -->
<!-- 语法：写在于el data methods watch 等属性同级的位置
computed:{
返回的结果数据-变量 ( ) {
return 返回的结果
}
} -->
<!-- 计算属性使用场景：一条数据 在多个位置有多种展示形态 -->
<div id="demoDiv">
<h1>原始数据:{{text}}</h1>
<!-- substr(从那个下标位置开始，截取几位)字符串截取 -->
<h1>处理：{{text.toUpperCase().substr(3,2)}}</h1>
<h1>计算属性的方式处理数据{{newText}}</h1>
<h1>计算属性的方式处理数据{{textb}}</h1>
<input type="text" v-model="text">
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
text:"abcdefg"
},
computed:{
newText(){
return this.text.toUpperCase().substr(2,1)
},
textb(){
return this.text.substr(2,1)
}
}
})
</script>
</body>
</html>
计算属性与方法的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="demoDiv">
<!-- 对一个数据进行截取操作方式1写在双大括号中(不推荐 因为会造成视图层代码冗余) -->
<!-- 对一个数据进行截取操作方式2 计算属性的方式 -->
<h1>计算属性:{{newtext}}</h1>
<h1>计算属性:{{newtext}}</h1>
<h1>计算属性:{{newtext}}</h1>
<h1>计算属性:{{newtext}}</h1>
<h1>计算属性:{{newtext}}</h1>
<!-- 对一个数据进行截取操作方式3 用方法（methods）的方式 -->
<h1>函数的方式:{{funtext()}}</h1>
<h1>函数的方式:{{funtext()}}</h1>
<h1>函数的方式:{{funtext()}}</h1>
<h1>函数的方式:{{funtext()}}</h1>
<h1>函数的方式:{{funtext()}}</h1>
<h1>函数的方式:{{funtext()}}</h1>
<h1>函数的方式:{{funtext()}}</h1>
<h1>函数的方式:{{funtext()}}</h1>
<h1>函数的方式:{{funtext()}}</h1>
<!-- 问题：既然相同的功能在函数里面也可以完成，那么为什么要有计算属性这个东西呢？
他们两个有什么区别呢？ -->
<!-- 1.计算属性相对于方法来说在特定场合下更加节省资源
2.因为计算属性是基于缓存的，计算属性只有在她所依赖的数据改变的时候才会重新执行。方法是要被调用 那么就会重新执行 -->
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
text:"abcdefg"
},
methods:{
funtext(){
console.log("我是方法")
return this.text.substr(2,3)
}
},
computed:{
newtext(){
console.log("我是计算属性")
return this.text.substr(2,3)
}
}
})
</script>
</body>
</html>
修饰符
修饰符：用来处理事件当中的一些细节性的dom操作
（1）按键修饰符：.up (光标上) .down .ctrl .enter （回车键） .space （空格健）
（2）事件修饰符：
.stop 阻止事件冒泡
.capture 事件捕获
.self 只会触发自己范围内的事件，不包含子元素
.once 只会触发一次
.prevent 阻止事件默认行为
虚拟DOM和Diff算法
什么是虚拟DOM：所谓的虚拟DOM 也就是虚拟节点 ---》他是通过js的对象方式来模拟dom节点 一切的dom操作都是在这个js对象中完成 （js对象在进行模拟操作 速度非常的快） 就会重新的进行真实dom渲染
虚拟DOM和真实DOM有什么区别
- 虚拟DOM不会重新对于页面进行重绘操作
- 虚拟DOM效率比真实DOM高的多
- 虚拟DOM 进行频繁操作的时候 都会只对要修改的部位进行修改 而不会对整个DOM进行渲染 减少DOM操作 局部渲染
Diff算法
逐步解析新的节点 找到他在旧节点中的位置，如果找到来了就移动对应的内容 如果没有找到就说明是新的节点 那么就进行新增操作 创建除一个节点进行插入，在便利完成之后如果就节点中还有没有处理过的内容，就说明这个节点在新的内容中被删除了 那么删除即可