vue基础知识
1.模板的基础用法
<div id="app">
<!-- mustache标签 -->
<!-- v-text v-html -->
<p>{{message}}</p>
<p v-text="message"></p>
<p v-html="message"></p>
<p>hello {{message}}</p>
<!-- v-bind -->
<div>
<ul>
<li v-for="i in 10" v-bind:id="'list'+i" v-text="i"></li>
</ul>
</div>
<!-- disabled -->
<button v-bind:disabled="foo">显示</button>
<!-- 不显示dis属性 -->
<button v-bind:disabled="foo1">显示</button>
<!-- js表达式 -->
<p>{{school}}</p>
<!-- v-bind缩写 v-on缩写 -->
<p :id="message"></p>
<p @click="dl" v-text="message"></p>
<p v-bind:class="cla"></p>
</div>
var school="hello";
var app=new Vue({
el:"#app",
data:{
cla:"hakgfkuwfh",
message:"app",
foo:true,
foo1:false,
school,// school=>school:school,
},
methods:{
dl:function(){
this.message=this.message.split("").reverse().join("");
}
}
})
2.计算属性和侦听器
监听事件watch实时监测数据的改变，computed属性相对于方法来说可以缓存起来，再次调用的时候就不需要再调用了
<div id="app">
<p>{{message}}</p>
<p>{{res}}</p>
<input type="text" v-model="firstName">+<input type="text" v-model="lastName">={{fullName}}
<p><input type="text" v-model="fullName"></p>
<input type="text" v-model="message">
</div>
<div id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
var vu=new Vue({
el:"#app",
data:{
message:"hello word",
firstName:"",
lastName:"",
},
computed:{
res(){
return this.message.split("").reverse().join("");
},
fullName:{
get(){
return this.firstName+" "+this.lastName;
},
set(newv){
var newValue=newv.split(" ")
this.firstName=newValue[0]
this.lastName=newValue[1]
// return this.firstName+" "+this.lastName
}
}
},
watch:{
message(newn,oldn){
console.log(newn,oldn);
}
}
})
3.v-for v-if v-show 等方法使用，数据变化的实时跟踪和检测
<div id="app">
<template>
<p v-if="pd">
v-if {{pd}}
</p>
<p v-else>
v-else {{pd}}
</p>
</template>
<!-- v-show不能和template一起出现，改变的是html的内容 -->
<div v-show="dis">
显示隐藏
</div>
<h3>v-for使用</h3>
<h4>数组</h4>
<ul>
<li v-for="(item,index) in score">
{{item}}+{{index}}
</li>
<li v-for="scoos in scoo">{{scoos.add}}</li>
</ul>
<div>
<div v-if="dis">
<label>邮箱</label><input type="text" placeholder="邮箱" key="yx">
</div>
<div v-else>
<label>手机</label><input type="text" placeholder="手机" key="sj">
</div>
<p><button type="button" @click="dis=(dis==false?true:false)">切换</button></p>
</div>
<!-- {{b}} -->
<div>
<ul>
<li v-for="item in items">{{item}}</li>
</ul>
</div>
<div>
<label>姓名</label>{{obj.name}}
<label>年龄</label>{{obj.age}}
<label>性别</label>{{obj.sex}}
<label>地址</label>{{obj.addr}}
</div>
<div @click="ts">点击</div>
<button @click="cl('mesaa',$event)">点击</button>
<div>
<div @click="cona()">
<div>
<button @click="con">点击</button>
<button @click.stop="con">点击</button>
<!-- 阻止冒泡事件 -->
</div>
</div>
</div>
<label>提交</label><input type="text" @keyup.enter="go">
<!-- 组合事件 ctrl+click -->
<div @click.ctrl="doSomething">Do something</div>
<!-- alt+c -->
<input type="text" @keyup.alt.67="clear">
<!-- 鼠标点击事件 -->
<button type="button" @click.left="le" @click.right="ri($event)">点击点击</button>
</div>
var vm=new Vue({
el:"#app",
data:{
pd:true,
dis:false,
score:[1,2,3,4,56,7],
scoo:[{"add":2},{"add":3}],
items:["a","b","c"],
obj:{"name":"张三",sex:"男"}
},
methods:{
clear(){
alert("al");
},
doSomething(){
alert("123");
},
ts(){
alert("1");
},
cl(mesaa,event){
console.log(mesaa,event);
},
con(){
alert("qwe");
},
cona(){
alert("qwer");
},
go(){
alert("成功");
},le(){
alert("左边");
},ri(event){
event.preventDefault();
alert("右边");
}
}
})
// vm.b=2;不能动态的监测变化
vm.$set(vm.scoo,"add",4);
vm.$forceUpdate();//强制更新 数组的下标调用和长度都是没用的
// 弥补的方法
// vm.$set(target,key,value)
// Vue.set(target,key,value)
// vm.items.splice(key,1,value)
// key可以是下标也可以是key值
// vm.items.splice(0)改变数组的长度
vm.obj=Object.assign({},vm.obj,{"age":20,"addr":"hh"})
4.
<div id="app">
<label>爱好</label> <input type="checkbox" value="打篮球" v-model="hobby">打篮球 <input type="checkbox" value="踢足球" v-model="hobby">踢足球 <input type="checkbox" value="羽毛球" v-model="hobby">羽毛球 {{hobby}} <h3>单选</h3> <input type="radio" value="nan" v-model="sex">男 <input type="radio" value="nv" v-model="sex">女 {{sex}} <h3>选择框</h3> <select name="sel" id="sl" v-model="sel"> <option value="1">11</option> <option value="2">22</option> <option value="3">33</option> <option value="4">44</option> </select> {{sel}} <h3>修饰符</h3> <input type="text" v-model.lazy="ljz">{{ljz}} <p> <input type="number" v-model.number="age">{{age}} </p> <p> <input type="text" v-model.trim="mesg">{{mesg.length}} </p> </div>var vm=new Vue({ el:"#app", data:{ hobby:[], sex:"nv", sel:"2", ljz:"",//懒加载 age:"",//输入值转为数值类型 mesg:"",//去空格 } })拓展：今天写购物车的练习的时候关于动态监听一堆input框的时候学到了一个深度监听的方法，可以监听数组，数据等的变化
watch:{
buysp:{
handler(){
this.allmon();
},
deep:true,
},
},