Vue基础总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>侦听器/观察者/监听器</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
用户名: <input type="text" v-model="username"><br> <!--双向绑定-->
<h3>{{length}}</h3>
<!--v-show="变量"指令,true显示,false不显示-->
<h3 v-show="isShow" :style="warning">{{message}}</h3>
<h4 @click="changeColor" :style="danger">{{message1}}</h4>
<p>双向绑定:{{username}}</p>
</div>
<script>
new Vue({
//挂载点
el:'#box',
//创建了一个数据模型
data:{
username:'',
length:0,
message:'用户名太短了',
message1:'测试文章',
isShow : false,
warning:'color:red',
danger:'color:blue'
},
methods:{
changeColor:function () {
this.danger="color:green";
}
},
//watch侦听器，监听是页面中的变量值的变化
watch:{
username:function () {
this.length++;
if(this.length<6){
this.isShow = true;
}else{
this.isShow = false;
}
}
}
})
</script>
</body>
</html>总结如下
使用Vue 先要new一个Vue对象
new Vue({
el:'#contents', //el 绑定挂载点,值为选择器,实测class 自定义属性也可以
data:{ //数据对象,就是Model,里面是数据
message1:'Vuej.js开发基础',
message2:'<h3 style="lightblue">php中文网加油!</h3>',
info:'html+css',
isShow : false,
warning:'color:red',
},
methods:{ //事件绑定: @事件名称 = "方法名"
changeColor:function () { //事件绑定的方法
this.danger="color:green";
}
},
})挂载点el: "选择器"
变量: {{变量名}}插值 或者v-text(不解析html) v-html(解析html)
data:{} 就是model层 ,数据模型
methods:{method:function(){....}}事件绑定 @事件名="method方法名"
input有一个特点:既可以显示内容，也可以输入内容/更新内容
双向绑定:用页面中变量内容内容来更新数据模型model中的数据
v-model="变量名" <input type="text" v-model="info">
{{info}}
watch:{
变量名:function(){
....... //执行方法 this指向data数据
}
} 监听页面中变量值的变化