vue学习总结之一

1.vue什么？

vue是一个渐进式的前端框架，拥有各种完善的web功能和特点。

2.vue中的mvvm

MVVM即model层、view层、vuemodel层。model层是数据层，里面包含我们固定死的数据，也包含了网络请求而来的数据，view层是我们所看到的页面，通常即使DOM。Vuemodel层实现model和view沟通的桥梁，它实现了data bind，即将数据实时的更新到view中，另一方面它实现了DOM的监听等。

3.简单了解vue的使用

<div id="app"></div>
let vm = new Vue({
el:'#app',

data:{},
methods:{}

})

其中el表示vue会管理哪个DOM，类型为string，data表示vue实例的数据，类型为object或function，methods表示vue实例实现的方法，类型为key:function。

4.vue的生命周期

简单了解一下，关注5个钩子时间，首先在开始new Vue（）实例化对象时，会初始事件和生命周期，此时在创建出实例之前会执行第一个钩子beforeCreat,当实例创建完成后会执行第二个钩子Created,此时实例已经被创建出来并且可以访问data数据。接着就会在内存中编译模板，当编译完成的html挂载到对应的虚拟DOM时就会触发第三个钩子beforeMount,但是此时页面不会显示内容，接着挂载到页面绑定的el中，当挂载完成后会执行另一个钩子Mounted,此时可以访问到模板中的标签对象，在此时会执行初始化异步任务等。此时当数据发生改变会触发beforupdata、Updata两个钩子，第一个钩子里面可以访问到旧的数据，第二个钩子里面访问到的是新的数据，
在一个实例被销毁之前会执行beforeDestroy这个钩子，当销毁完成是会执行Destroy这个钩子。这个就是vue生命周期的简单介绍

5.基础语法

将值插入到HTML中

<h2>{{value}}</h2>
....
let vm = new Vue({
el:'#app',
data:{
	value:"hhhhhhh"

}

})

可以通过v-bind进行动态属性绑定，例如href等属性，还可以绑定一个类，可以简写—：---，还可以绑定一个内联对象 即

:style="{color: currentColor, fontSize: fontSize + 'px'}"

如果想要只渲染一次可以使用v-once。

注意v-bind:xxx=“xxxx” 此时双引号内的xxxx为变量，当加入单引号时就会变成字符串，会将字符串赋值给xxx。

假如当我们从服务器获取到的某个变量是html代码时，想要按照html格式进行解析则需要使用v-html=“xxxx”

v-text与数据插入相似

<h2 v-text="xxx"></h2>
<h2>{{xxx}}</h2>

v-pre用于跳过这个元素和它子元素的编译过程

有时候可能因为网络原因，会显示出未编译的Mustache标签，而这不是我们希望的，所以可以使用斗篷把他遮挡住即

<h2 v-cloak>hhhhhh {{xxx}}</h2>

计算属性computed:在某些情况下我们需要对某些属性进行拼接计算等才使用，此时我们可以使用计算属性，它跟methods同一级

let vm = new Vue({
el:'#app',
data:{
	value:"hhhhhhh"

}，
methods:{},
computed:{}

})

计算属性对比methods，计算属性会进行缓存，只调用一次

v-on 事件绑定，语法糖@ @事件名称=“xxx” xxx表示事件的方法，可以定义在methods中，xxx可以默认不写()，但是会默认将原生的event事件传入。
修饰符：.stop可以阻止事件冒泡

<button v-on:click.stop="xxx">按钮</button>

.prevent 阻止默认行为

.once - 只触发一次回调

v-if，当后面的条件为false时，对应的元素以及子元素不会渲染，直接销毁

v-show 当后面的条件为false时，对应元素以及子元素隐藏，即为元素增加display属性

对比以上：v-if在需要切换的情景下回频繁的进行DOM操作进行渲染，会影响性能。

v-for遍历，当一个数组需要全部展示时就可以使用

<li v-for="(value,key,index) in list"></li>

其中官方建议我们使用v-for都给标签假如key属性，因为key的作用主要是为了高效的更新虚拟DOM

Vue是响应式的，当数据发生改变，会响应的更新页面数据，所以Vue包含了一组观察数组编译的方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

v-model表单绑定，它是一个双向绑定。相当于

<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

类似于是v-on和v-bind的语法糖。

当input为CheckBox时，并且为单选，v-model为bool值
为多选时就会将选中的数据假如数组中。
修饰符：lazy修饰符可以让数据在失去焦点或者回车时才会更新
number修饰符可以让在输入框中输入的内容自动转成数字类型
trim修饰符可以过滤内容左右两边的空格