Vue实例及选项
el绑定模板
data数据
在组件中data和props不能重名
methods函数集合
extend的用法
<div id="app"> <todo :todo-data="groceryList"></todo> </div> <script type="text/javascript"> var todoItem=Vue.extend({ template:` <li>{{text}}</li> `, props: { text: { type: String, default: '' } } }); var todoWarp=Vue.extend({ template:` <ul> <todo-item v-for="(item,index) in todoData" v-text="item.text"></todo-item> </ul> `, props:{ todoData:{ type:Array, default: [] } }, components:{ todoItem:todoItem } }); Vue.component('todo',todoWarp); new Vue({ el:"#app", data:{ groceryList:[ {id:1,text:"苹果"}, {id:2,text:"香蕉"}, {id:3,text:"你好"}, {id:4,text:"阿达"} ] } }) </script>
定义的组件中所用数据为两部分,一个是父组件传入,或外界传入,第二个就是自身事先定义好的一些数据,自身的数据一定要是通过data()函数返回的一个json串,里面可以放入很多值。
可参考组件数据通信
计算属性computed
有时候在页面渲染时,会一些数据需要处理之后才渲染,因此,Vue提供了一个计算属性computed,该计算属性,将处理函数写入其中,调用即可。
当然将处理函数写入methods也可以实现,为什么要用computed呢,因为computed提供了一个缓存机制,对于重复的操作有缓存记录,下次相同操作则会立即返回记录中的数据,而不是耗费资源重新计算。
v-model结合表单使用
文本框,和普通标签的v-model很简单,绑定变量名就可以直接使用,这里主要学习涉及到操作的元素。
单选框,复选框应用:
<div id="app"> <label v-for="item in groceryList" > <input type="checkbox" :value="item.id" v-model="fu">{{item.text}} </label> <br> <label v-for="item in groceryList" > <input type="radio" :value="item.id" v-model="check">{{item.text}} </label> </div> <script type="text/javascript"> var app= new Vue({ el:"#app", data:{ check:"03", fu:['03'], groceryList:[ {id:'01',text:"苹果"}, {id:'02',text:"香蕉"}, {id:'03',text:"你好"}, {id:'04',text:"阿达"} ] } }) </script>
效果:
select应用:(使用的上方例子数据)
<label>单选下拉框</label> <select v-model="selectonce"> <option label="---请选择---"></option> <option v-for="item in groceryList" :label="item.text" :value="item.id" ></option> </select> <br> <label>多选下拉框</label> <select multiple v-model="selectmultple"> <option v-for="item in groceryList" :label="item.text" :value="item.id" ></option> </select>
原生的单选下拉框还正常,多选的简直没法看,需要自己做一个或者引用插件。
Vue v-model修饰指令
Vue v-model同步数据很快,页面没渲染的时候就已经同步了,可是频繁的同步,有时候并不是我们需要的,
Vue提供了lazy特性,设置之后,文本框需要按下回车键或者失去焦点才同步数据,类似原生onchange方法。
<input type="text" v-model.lazy="selectonce">
number暂时没看出来
<input type="text" v-model.number="selectonce">
debounce延时函数在Vue2.0被弃用。
v-bind结合style使用 4种方式
<div id="app">
<button width="300px" height="80px" :style="mystyle">你好</button>
<button width="300px" height="80px" :style="{color:redback,fontSize:fontsize}">你好</button>
<button width="300px" height="80px" :style="[redback2,fontsize2]">你好</button>
<div :style="{display: ['-webkit-box','-ms-flexbox-','flex']}"></div>
</div>
<script type="text/javascript">
var app= new Vue({
el:"#app",
data:{
redback:'red',
fontsize:'33px',
redback2:{color:'red'},
fontsize2:{'font-size':'33px'},
mystyle:{
backgroundColor:"orange",
fontSize:'33px'
}
}
});
</script>