文章目录
为什么要学习vue
优点
- 1-JQ有大量的DOM操作，vue有一个概念虚拟DOM 就是直接去内存中取
- 2-JQ没有统一模型不方便后期维护，vue是基于mvvm思想 数据统一管理在模型汇总
- 3-JQ有语法可以提取公共的html或js吗？vue有组件 vue可以减少代码冗余便于后期维护
等
项目使用
- 小项目 jq 总共2、3个页面 用vue大材小用，关键得不偿失浪费时间
- 大项目 vue 后期方便维护 成本高，对技术要求也高（通过上述3点可以看到）
- 什么是vue：用js写的一个库或框架（因为vue是渐进式框架）
- 开发项目架构模式：MVC、MVP、MVVM
MVVM***（Vue就是基于这个思想模式写的）
Model模型 - 负责数据处理，
View视图 - 负责显示页面，
ViewModel - 负责监控M数据变化同步到V
生命周期
beforeCreate
实例组件刚创建，元素DOM和数据都还没有初始化，暂时不知道能在这个周期里面进行生命操作。
created （可以发送异步请求）**
数据data已经初始化完成，方法也已经可以调用，但是DOM未渲染。有人问了，请求都是异步的，并不会阻碍实例加载。这是我个人水平的问题，这边改正，在这个周期里面，请求因为是异步的，不会阻碍实例加载，除非是那些同步操走才会导致页面空白。这样说来，在这个周期里面进行请求，渲染速度反而会更快。
beforeMount
DOM未完成挂载，数据也初始化完成，但是数据的双向绑定还是显示{{}}，这是因为Vue采用了Virtual DOM（虚拟Dom）技术。先占住了一个坑。
mounted （用this.$nextTick(函数)确保完全挂载）**
数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去。可以在这边请求，不过created请求会更好一些。这个周期适合执行初始化需要操作DOM的方法。
beforeUpdate
只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行。
updated
只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环。
beforeDestroy
这个周期是在组件销毁之前执行，在我项目开发中，觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行，只不过beforeDestroy无法阻止路由跳转，但是可以做一些路由离开的时候操作，因为这个周期里面还可以使用data和method。比如一个倒计时组件，如果在路由跳转的时候没有清除，这个定时器还是在的，这时候就可以在这个里面清除计时器。
Destroyed
说实在的，我还真的不知道这个周期跟beforeDestroy有什么区别，我在这个周期里面调用data的数据和methods的方法都能调用，所以我会觉得跟beforeDestroy是一样的。
基础语法
模板语法（就是将模型中数据在页面展示）
- 显示原始HTML（模型数据是HTML能够被解析）：v-html=”data中的键”\动态参数（标签的属性值动态）： v-bind:属性名=”data中的键” 或简写 直接冒号事件：
v-on:事件类型=”函数名” 或简写 直接@
什么是插值：就是在视图层插入数据
文本：{{ data中的键 }}
原HTML：v-html=” data中的键 ”
指令：名词解释不清，就是写v-开头的语法，vue用来操作数据的
参数动态（标签属性值动态）：v-bind:属性名=” data中的键 ” 或简写 去掉v-bidn直接:
事件：v-on:事件类型=”函数名” 或简写 去掉v-on: 直接@
脚下留心：函数名必须在vm中声明 和 data同级 ，叫methods
列表渲染（循环）
语法分析
v-for="数据 in data中的键"
v-for="（数据， 索引） in data中的键" in 后面可以放函数，数组，对象，数字，
<div v-for="(item, i) in goods">
{{i}} ---- {{ item.id }} ___ {{ item.title }}
</div>
条件渲染（判断）
语法
v-if=“条件”
v-else-if=“条件”
....
v-else
条件成立显示，条件不成立不显示
div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 80">一般</div>
<div v-else>需要锻炼身体</div>
说明：判断通过v-if和v-show都可以实现
区别：v-if控制DOM v-show控制css （display：none）
事件
事件源–>事件类型---->事件处理函数
2、语法分析
n 语法： v-on:事件类型=”方法名”
n 简写：@事件类型=”方法名”
<button @click="add">+</button>
<button @click="del">-</button>
<button @click="num = num + 1">+</button>
let vm = new Vue({
el:"css选择器"，
data:{num:50},
methods: {
函数1，函数n
}
})
事件修饰符
按键修饰符
通过vue语法 @事件类型.键盘修饰符=“方法名”
<input
type="text"
@keyup.enter="enter"
@keyup.space="space"
@keyup.delete="del"
/>
表单输入绑定
2、简介&语法
n 单项绑定：仅模型数据同步到视图（M->V）
双向绑定:不仅仅模型数据同步到视图，当视图数据改变也会同步到（M<=>V）
n 语法：v-model=“data中的键”
购物车小案例：（搜索功能）
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="keywords">
<p v-for="item in search(keywords)"> {{item}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
carts:[
{"id":1,"title":"剃须刀","price":50,"number":2},
{"id":2,"title":"方便面","price":30,"number":1},
{"id":3,"title":"火腿肠","price":1,"number":10},
{"id":4,"title":"黄焖鸡","price":15,"number":1}
],
keywords:'',
},
methods:{
// add(){
// this.names.push(this.name)
// this.name=''
// },
search(keywords){
let cart=[]
this.carts.forEach(item=>{
if(item.title.indexOf(keywords)!=-1){
cart.push(item)
}
})
return cart
}
},
})
</script>
</body>
</html>
预告 ： vue组件传值
