Vue 基本概念梳理
一、了解Vue、了解npm
Vue 是一套用于构建用户界面的渐进式框架
1、框架和库的区别
库（插件）：是一种封装好的特定方法集合，对项目的侵入性较小，提供给开发者使用，控制权在使用者手中，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求；
框架：是一套架构，会基于自身特点向用户提供一套相当完整的解决方案，而且控制权在框架本身；对项目的侵入性较大，使用者要按照框架所规定的某种特定规范进行开发，项目如果需要更换框架，则需要重新架构整个项目。
目前的流行前端框架Angular Vue React 流行的一些库jquery ，Zepto
2、为什么学习vue框架：
vue 和上面这些不一样能够帮助我们减少不必要的DOM操作;提高渲染效率;双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】
3、vue前端框架的特点：
构建用户界面，只需要关系view；简单易学，轻量快速；渐进式框架
4、两大核心：
响应式的数据绑定：当数据发生改变，视图可以自动更新，可以不用关心dom操作，而专心数据操作
可组合的视图组件：把视图按照功能切分成若干基本单元，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试
二、掌握Vue常用属性: v-model,v-if,v-for,组件，路由等
1、v-model
v-model本质上是一个语法糖。如下代码本质上是<input :value=“test” @input=“test = $event.target.value”>，其中@input是对输入事件的一个监听:value="test"是将监听事件中的数据放入到input，下面代码是v-model的一个简单的例子。在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。可以在如下div中加入
{{ test}}
获取input数据，然后去修改input中数据会发现 中数据随之改变。2、v-if
<div id="app">
<div class="test" v-if='isTrue'>if</div> <!--isTrue为false则删除标签-->
<div class="test" v-show='isTrue2'>show</div> <!—isTrue2为false则设置display:none，隐藏标签;-->
</div>
3、v-for
遍历数组
<div id="app">
<li class="test" v-for='(item,index) in items'> 元素:{{item}} 索引:{{index}} </li>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
items:[1,2,3,4,5]
}
})
</script>
遍历对象
<div id="app">
<li class="test" v-for='(key,value,index) in obj'> key-{{key}} value-{{value}} index-{{index}} </li>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
obj:{name:'tom',agee:188,addr:'usa'}
},
})
</script>
4、v-on:click
v-on:click 点击事件（简化语法@click）
<button v-on:click="myClick">给对象添加内容</button>
methods:{
myClick:function(){
this.obj.name='jack'
console.log( this.obj )
}
}
5、组件
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
掌握Vue生命周期函数：create等
Vue 什么是生命周期
Vue实例中有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂在dom、渲染->卸载等一系列过程，我们称这是vue的生命周期。通俗的说就是vue实例从创建到销毁的过程，就是生命周期。
在vue的整个生命周期中，他提供了一系列事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册 的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例
三、 vue生命周期函数
-
1、创建期间的生命周期函数（钩子函数）：
- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性；在实例初始化之后，数据观测（data observer）和event/watcher事件配置之前被调用。
- created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板；实例已经创建完成之后被调用。在这一步，实例已完成一下配置：数据观测（data observer），属性和方法运算，watch/event事件回调。然而，挂在阶段还没开始。$el属性目前不可见。
- beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中；在挂在开始之前被调用，相关的render函数首次被调用。
- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示 - 运行期间的生命周期函数：el被新创建的vm.$el替换，并挂在到实例上去之后调用该钩子
- beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点；数据更新时调用，发生在虚拟dom重新渲染和打补丁之前。你可以在这个钩子中进一步更更改状态，这不会触发附加的重渲染过程。
- updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
- 销毁期间的生命周期函数：
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
2、vue的实例属性和方法
1、属性
vm.$el//获取vue实例光联的元素
vm.$data//获取数据对象
vm.$options//自定义属性
vm.$refs//获取所有添加ref属性的元素
2、方法
a)、vm.$mount()//手动挂载vue实例
b)、vm.$destroy()//销毁实例
c)、vm.nextTick([callback])// 在DOM更新完成后在执行回调函数，一般在修改数据后使用方法，以便获取更新后的DOM
//修改数据
//DOM还没更新完，vue实现响应式并不是数据发生改变之后DOM立即变化，需要按一定的策略进行DOM更新，需要时间！！
d)、vm.$set(obj,key,value)//为对象添加属性并且指定值
this.obj.key=value;//通过普通方式为对象添加属性时vue无法实时监听到数据
vm.$set(obj,key,value)//通过vue实例的$set方法为对象添加属性，可以实时监视
e)、vm.$delete(obj,key)//删除对象属性
f)、vm.$watch(data)//检测数据的变化
1.方法一：使用vue实例提供的$watch()方法
vm.$watch('name',(newValue,oldValue)=>{})//监测“字符串”
vm.$watch('user',(newValue,oldValue)=>{},true)//监测“对象”
2.方法二：使用vue实例提供的watch选项
new Vue({
el:"#container",
data:{
name:"",
age:21,
user:{
id:1,
name:"小零"
}
},
watch:{
age:(newValue,oldValue)=>{},//监测“字符串”
user:{
handler:(newValue,oldValue)=>{
newValue,oldValue//取值一样，引用类型对象
},//监测“对象”
deep:true//深度监视，当对象中的属性发生变化时也会监视
}
}
})
3、vue生命周期是什么，有什么作用
我们知道 vue 是通过构建数据驱动的web界面的渐进式框架
所谓周期就是指从一个起点到一个终点的过程，那么生命周期就是指从生命开始到生命结束的过程
从而可以理解vue生命周期就是指vue实例从创建到销毁的过程
使用vue时， 用到所有功能都是围绕vue生命周期实现的，在生命周期的不同阶段调用对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能
那么vue 生命周期有哪些阶段呢
一、创建
1、beforeCreate：这个阶段实例已经初始化，只是数据观察与事件机制尚未形成，不能获取DOM节点（没有data，没有el）
使用场景：因为此时data和methods都拿不到，所以通常在实例以外使用
2、created：实例已经创建，仍然不能获取DOM节点（有data，没有el）
使用场景：模板渲染成html前调用，此时可以获取data和methods，so 可以初始化某些属性值，然后再渲染成视图，异步操作可以放在这里
二、载入
1、beforeMount：是个过渡阶段，此时依然获取不到具体的DOM节点，但是vue挂载的根节点已经创建（有data，有el）
2、mounted：数据和DOM都已经被渲染出来了
使用场景：模板渲染成html后调用，通常是初始化页面完成后再对数据和DOM做一些操作，需要操作DOM的方法可以放在这里
三、更新
1、beforeUpdate：检测到数据更新时，但在DOM更新前执行
2、updated：更新结束后执行
使用场景：需要对数据更新做统一处理的；如果需要区分不同的数据更新操作可以使用$nextTick
四、销毁
1、beforeDestroy：当要销毁vue实例时，在销毁前执行
2、destroyed：销毁vue实例时执行
第一次页面加载会触发哪些钩子
beforeCreate、created、beforeMount、mounted
create
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
代码
<script>
//创建vue实例 得到 view model
var vm = new Vue({
el: '#app',
data: {
ok: 'ok'
},
methods: {
show() {
console.log('show执行了');
}
},
//第一个生命周期函数，表示实例被完全创建之前运行出来
//再data和methods都还没有被初始化
//
beforeCreate() {
console.log(this.show());
},
//第二个生命周期函数 data and methods 已经初始化好了
created() { //重要
console.log(this.show);
},
//第三个生命周期函数，模板已经再内存中编译完成，但是尚未把模板渲染到页面中去
beforeMount() {
console.log(document.getElementById("h3").innerText);
},
//第四个周期函数内存中的模板 已经真实挂在到了页面中，可以看到渲染好的页面了，当执行完这个，实例已经完全创建好了
mounted() { //重要
console.log(document.getElementById("h3").innerText);
},
//以上mouted（）实例完毕，马上进入到运行阶段
//第五个周期函数 这俩事件会根据data数据的/*改变*/，有选择性的出发0-n次
beforeUpdate() {//这时候表示我们的界面还没有被更新，但是数据已经被更新了
console.log(document.getElementById("h3").innerText);
},
//第六个周期函数 执行的手页面和data的数据已经保持同步了 都是最新的
updated() {
console.log(document.getElementById("h3").innerText);
},
//第七个周期函数 当执行这里的时候
//就已经从运行阶段进入到了销毁阶段了
//实例身上所有的data和所有的methods以及过滤器 指令等等，都处于可用状态，还没有真正执行销毁的过程
beforeDestroy() {
},
//第八个周期函数
//执行到这里的时候组件已经被完全销毁，组件中所有的数据方法指令过滤器 都已经不可用了
destroyed() {
}
})
</script>
掌握Vue与后端通信axios
axios
扫一扫
7279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
