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>