0.基础:
创建一个var app = newVue({
el:"#app",
data:{
//变量定义
message:"hello vue",
},
created:function(){//类似这种还有mounted、updated、destroyed等
console.log("页面加载时执行");
//创建时执行
},
watch:{//使用异步请求消耗资源较大时使用,监听参数变化触发
message:funtion(newWorld,oldWorld){
//操作
}
}
computed:{
//计算属性,这里可以使用方法进行实现,但是使用计算属性方式可以有效的起到缓存作用,只有但数据费发生改变的时候,函数才会执行,否则直接从缓存中读取数据。默认使用get方法
reversedMessage:function(){
return "计算出来的显示内容,这里是参数,不是方法"
}
//如果需要使用set方法和get方法同时使用,需要修改代码为:
get:function(){
//这个是get方法
return "我是get方法"
},
set:funtion(newValue){
//这里设置参数
}
},
methods:{
click:function(){},
//定义方法
},
components:{//定义局部组件
'todo-item':{
data:function () {
return {
message:'',
data:new Date(),
}
},
template:'<div><div>{{message != \'\' ? message:\'\'}}</div>' +
'<button @click="on_click">点我啊</button>' +
'</div>',
methods: {
on_click:function () {
this.message = 'hello'
}
}
},
filters:{//定义过滤器
isShow:function (value) {
if(value != 'test')
return value;
else
return '输入错误';
}
}
},
})
1.“Mustache”语法 (双大括号):
使用{{msg}}对数据进行绑定
2.Object.freeze(obj):
该作用主要是用于清除数据追踪变化,解决数据同步问题。
3.v-html:
主要是由于数据绑定会让用户的数据以文本的方式显示,使用该标签可以使得数据通过html方式进行解析。
4.v-bind:title=""(:title="")
通过该标签可以绑定本身的属性,就像是一个js对象,例如提示信息title、显示display等属性绑定
5.修饰符:"."
通过形式来指明一个指令要以特殊的方式进行绑定:。
6.v-model="message"
用于绑定变量参数
7.v-on:click="click"(@click="")
用于绑定一些响应事件。例如点击、鼠标覆盖等。
8.class和style进行绑定
使用对象方式进行绑定:v-bind:<div v-bind:class="{ active: isActive,errorClass }"></div>
使用数组方式进行绑定:<div v-bind:class="[activeClass, errorClass]"></div>
结果都是class="activeClass errorClass"
9.由于vue会尽量复用可复用的对象数据,所以使用key对数据进行管理,可以解决数据被复用的问题。
10.定义局部组件(和全局组件一样,只是使用范围问题):组件内部的操作需要在内部定义,类似于app的操作
components:{
'todo-item':{
data:function () {
return {
message:'',
data:new Date(),
}
},
template:'<div><div>{{message != \'\' ? message:\'\'}}</div>' +
'<button @click="on_click">点我啊</button>' +
'</div>',
methods: {
on_click:function () {
this.message = 'hello'
}
}
}
},