vue 基础知识点

创建实例

new Vue({

 el:'id'  绑定作用域
 
 data:{ }  数据
 
 methods:{} 函数方法
 
 computed{} 计算属性
 
 生命周期/钩子函数
  beforeCreate (){},	创建前
  created(){},			创建后
  
  beforeMount(){},		渲染前
  mounted(){},			渲染后
  
  beforeUpdate(){},		更新前
  updated(){},			更新后
  
  beforeDestroy(){},	销毁前
  destroyed (){}		销毁后

---

指令
v-for 循环
arr循环{i ,$index} in arr
json循环{i, $key, $ index} in arr

v-text text文本 和innerText一样
v-html html文本 和innerHTML一样

v-if 判断
v-else
v-else-if

v-model 双向绑定
v-bind 属性绑定
v-on 事件绑定

v-show 显示/隐藏

---

Vue ajax

npm install vue-resource 下载 Vue ajax

get   ajax方法
	this.$http.get(url).then((data)=>{
		console.log('成功',data)
		},(data)=>{
		console.log('失败',data)
	})

---

侦听属性、生命周期、计算属性 相同与不同
侦听属性 :侦听某一项数据的变化,this是vue实例,可以监控到计算属性的变化
生命周期：侦听所有的数据变化,this是vue实例
计算属性：没有调用不会触发，this是vue实例
watch
可以和data重名
可以和methods重名
可以和computed重名

data、methods、computed三者名字不可以重复

computed和methods(计算属性和函数方法的区别)
computed 计算属性
用来计算处理数据
和methods的区别是有缓存
在输出的时候 computed {{name}}
methods {{name()}}

---

v-if和v-show区别
v-if 只会加载真的部分 有缓存 消耗高
适合偶尔的显示隐藏切换
v-show 都会加载 没有缓存 消耗相对低
适合频繁的切换