Vue

 

一：vue简单介绍

new Vue({
　　//挂载根元素,只能在di为app的元素上使用vue的特性
　　el: '#app',
　　//存储vue数据的对象
　　//在data里存储的数据,可以直接在app容器里通过{{}}的方式使用
　　data: {
　　　　message: 'Hello'
　　}
})

二：生命周期

生命周期: 一个事物从出生到消亡的过程
创建 -> 创建之前,创建完成
挂载 -> 挂载之前,挂载完成
更新 -> 更新之前,更新完成
销毁 -> 销毁之前,销毁完成

钩子函数: beforeCreate  created   beforeMounte   mounted
beforeUpdate   updated   beforeDestory   destoried
*/
var vm = new Vue({
el: '#app',
data: {
message: "Hello"
},
beforeCreate(){
console.log("vue实例创建之前");
},
created(){
console.log("vue实例创建成功");
},
beforeMount(){
console.log("vue实例挂载之前");
},
mounted(){
console.log("vue实例挂载完成");
},
beforeUpdate(){
console.log("数据更新之前");
},
updated(){
console.log("节点更新完成");
},
beforeDestroy(){
console.log("销毁之前");
},
destroyed(){
console.log("销毁完成");
}
})

三：模块语法

使用v-bind来绑定元素的指定属性
绑定的值可以在data对象中声明,
注意: 使用v-bind绑定的属性等号右边的值
就目前来说,一定要在data里找到相应的属性
如果没找到,会出现以下错误
Property or method "ccc" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property