vue.js笔记
引入vue.js
<script src="vue.js"></script>
初始化vue.js
插值：
<div id="box">{{name}}</div><script>
var vm = new Vue({
el:'#box', //选择对象
data:{ //数据绑定
name:'myname'
}
});
</script>原html 代码输出 v-html="值"
<p v-html="name"></p>
支持加减剩除及三步运算
{{10+20}}
{{10<20?'小于':'大于'}}v-if与v-show指令：
<p v-if="true">动态创建和删除</p> <p v-show="true">动态显示和隐藏</p>
触发事件
<button v-on:click="handleClick">clickMe</button> 简写 <button @click="handleClick">clickMe</button>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
name:'<b>myname</b>'
},
methods:{
handleClick:function(){ //方法
this.name = 'aaaa'; //修改data值
}
}
});
</script>v-bind 属性修改：
<p v-bind:class="isShow?'aaa':'bbb'"></p> 简写 <p :class="isShow?'aaa':'bbb'"></p>
计算属性 computed
<p>{{name.substring(0,1).toUpperCase()+name.substring(1)}}</p> //首字母大写或
<p>{{upperword}}</p><script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
name:'myname',
},
computed:{
upperword:function(){
return this.name.substring(0,1).toUpperCase()+this.name.substring(1);
}
}
});
</script>或（不推荐 ，方法会计算两次）
<p>{{upperwordfun()}}</p><script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
name:'myname'
},
methods:{
upperwordfun:function(){
return this.name.substring(0,1).toUpperCase()+this.name.substring(1);
}
}
});
</script>双向数据绑定
<div id="box">
<input type="text" v-model="price">
{{price}}
</div><script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
price:100,
}
});
</script>watch 方法
<div id="box">
<input type="text" v-model="price">
<input type="text" v-model="num">
<p>总金额：{{sum}}</p>
</div><script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
price:0,
num:0,
sum:0
},
watch:{
price:function(newvalue){
this.sum = newvalue*this.num; //动态计算总金额
},
num:function(newvalue){
this.sum = newvalue*this.price; //动态计算总金额
}
}
});
</script>对比 computed
<div id="box">
<input type="text" v-model="price">
<input type="text" v-model="num">
<p>总金额：{{computedSum}}</p>
</div><script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
price:0,
num:0,
sum:0
},
computed:{
computedSum:function(){
return this.sum = this.num*this.price;
}
}
});
</script>class 与 style, 动态修改class值
三元运算
<p class="default" :class="isShow?'aaa':'bbb'"></p>
键
<p class="default" :class="{active:isShow}"></p>键数组
<p class="default" :class="{active:isShow,show:isShow2}"></p><script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
isShow:true,
isShow2:true
}
});
</script>或
<p class="default" :class="['wow','show']"></p>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
wow:'aaaa' //控制class值
}
});
</script>或
<p class="default" :style="{background:color}">style</p><script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
color:'red' //定义color的参数
}
});
</script>或
<p class="default" :style="obj">style</p>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
obj:{ //对象方式来控制样式
background:"blue",
fontSize:"30px"
}
}
});
</script>或数组对象
<p class="default" :style="[obj,obj2]">style</p>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
obj:{
fontSize:"30px"
},
obj2:{
background:"blue",
}
}
});
</script>条件渲染
v-if,v-else
<p v-if="iscrea">有</p> <p v-else>无</p>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
iscrea:true
}
});
</script>包装标签
<template v-if="iscrea"> <p>有</p> <p>有</p> <p>有</p> <p>有</p> </template>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
iscrea:true
}
});
</script>v-show
<p v-show="isShow">我动态的隐藏和显示</p>
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
isShow:true
}
});
</script>例表渲染
v-for
<ul>
<li v-for="data in dataList">{{data}}</li>
</ul>
调用index参数
<ul>
<li v-for="(data,index) in dataList">{{data}}--{{index}}</li>
</ul><script type="text/javascript">
var vm = new Vue({
el:'#box',
data:{
dataList:['a','b','c']
}
});
</script>