Vue基础知识的一些小笔记

1.v-on:click 加加减减事件number是变量

 <button v-on:click="number++">+</button>
 <button v-on:click="number--">-</button>
  //语法糖
  <button @click="number++">+</button>
 <button @:click="number--">-</button>

2.生命周期：

beforeCreated:function(){} 

created:function(){}

beforeMounted:function(){}

mounted:function(){}

BeforeUpdate:function(){}

updated:function(){}

beforeDestroy:function(){}

destroyed:function(){}

3.mustache插值操作
指的就是{{ }}（双大括号）

4.v-once指令：只会改变一次，第二次数据改变的时候这个不会变
5.v-pre指令：不解析，原封不动的显示出来
6.v-cloak指令：在vue解析前，div中有一个属性v-cloak；解析后，div没有这个属性。可用来判断是否显示:

<style>
[v-cloak]:{
   display:none;
}
</style>

7.v-bind
(1)对象语法

<h2 :class="{'active':isActive,'line':isLine}">{{message}}</h2>


data:{
message:'你好啊',
isActive:true,
isLine:true
}

（2)数组语法


8.es6：

for(let i=0;i<a.length;i++){console.log(a[i])}

可以写为=> : for(let i in a){console.log(a[i])}
也可以写为=> :for(let b of a){console.log(b)}

9.计算属性
计算属性是有缓存的，多次使用时，不发生变化的话只调用一次
计算属性的setter和getter

10.es6语法
（1) let/var
块级作用域
es5之前if和for都没有块级作用域的概念，所以很多时候我们都是借助于函数的作用域解决应用外界变量的问题。
没有块级作用域引发的问题：

var btns = document.getElementsByTagName('button');
for(var i = 0;i<btns.length;i++){
  btns[i].addEventListener('click',function(){
     console.log('第'+i+'个按钮被点击')
})
}

就会出现点击第一个按钮时打印的是第5个按钮，，以前改为闭包写法：
(为什么闭包可以解决这个问题，，因为闭包是一个作用域)

var btns = document.getElementsByTagName('button');
for(var i = 0;i<btns.length;i++){
（function(i){
       btns[i].addEventListener('click',function(){
       console.log('第'+i+'个按钮被点击')
}）
})(i)
}

而现在只需要把var改为let即可

const btns = document.getElementsByTagName('button');
for(let i = 0;i<btns.length;i++){
  btns[i].addEventListener('click',function(){
     console.log('第'+i+'个按钮被点击')
})
}

（2)const
在开发中，优先使用const，只需要改变某一个标识符的时候才使用let
注意点：常量的含义是指向的对象不能修改，但是可以改变对象内部的属性。

11.runtime-complier
template - > ast(抽象语法树) - > render - > vdom - > UI

runtime-only(1.性能更高 2.代码量更少)
render - > vdom - > UI