首页 > 代码库 > vue.js的基本操作
vue.js的基本操作
1.{{message}}输出data数据中的message。
2.v-for="todo in todos"输出data数据中的dotos数组
3.v-on:click="aaaa"绑定methods中的aaaa()事件,可以简写为@click
4.v-model="input" 输出data数据中input的值,双向绑定。
5.this.$dispatch("aaa", this.msg)向上派发事件,aaa写在events中
6.:id="branch"表示id的值由data数据中的branch决定,通常用于for循环
<template v-for="branch in branches">
<!--:为传入的branch值-->
<input type="radio" name="branch" :id="branch" :value="http://www.mamicode.com/branch" v-model="currentBranch"><label :for="branch">{{branch}}</label>
</template>
7.:class="{bold: isFolder}"或:class="{isFolder1 > 0 ? ‘aaa1‘ : ‘bbb1‘ }"表示当isFolder为true时class=bold。
8.v-show="open"表示当open为true时显示
9.v-if="isFolder"表示当isFolder为true时显示
10.v-show与v-if的区别为当元素不显示时,v-show可以将data中的open设置为false,实现双向数据绑定
11.子组件获取数据的方式
例:在父级中设置<item class="item" :model="treeData"></item>
子级中使用
Vue.compoent("item", {
props: [‘model‘]
...
})
的方式获取
12.created:生命周期,DOM还未形成之前
13.computed:生命周期,在例如:class="{bold: isFolder}中的isFolder是true还是false的时候执行
14.在子级下的数据data的写法为
data:function() { return { open: false } }
以上的return值表示open的获取,不表示将open返回到父级,与双向绑定无关.
var Person = Vue.extend({ template: "<div><span>name: </span>{{name}}<span>age: </span>{{age}}</div>", data: function() { return { name: "lili", age: 22 } } });
15.{{key | filter}}表示key通过filters中的filter()函数进行过滤
16.v-for="entry in data | filterBy filterKey"表示在循环中直接进行数据过滤
16.debounce="300"表示延迟执行300ms
17.v-html相当于
<div v-html="html"></div>
<!-- 相同 -->
<div>{{{html}}}</div>
即可以输出html的标签,在表单提交的时候不使用,防止xss攻击
18.watch表示监听
watch: {
currentBranch: ‘fetchData‘
}
当打他数据中的currentBranch发生改变时,执行fetchData函数
19.slot的使用
<div class="modal-header"> <slot name="header"> default header </slot> </div> <div class="modal-body"> <slot name="body"> default body </slot> </div> <h3 slot="header">custom header</h3>
slot会将defaut中的default header变为custom header。
20.sync实现双向数据绑定,将父级通过props传入到子级中的变量通过子级进行修改,双向绑定后会改变父级中的对应传到子级的那个变量
21.transition添加css属性实现动态效果
例一个class="expand"的属性
.expand-transition { transition: all .3s ease; height: 30px; padding: 10px; background-color: #eee; overflow: hidden; }//表示正常情况下的效果 .expand-enter, .expand-leave { height: 0; padding: 0 10px; opacity: 0; }//元素在消失或显示的时候展示的效果 <div transition="expand"></div>直接写在html标签中 <div v-if="show" :transition="transitionName">hello</div> new Vue({ el: ‘...‘, data: { show: false, transitionName: ‘expand‘ } }) //写在Vue里
写在Vue里
22.
var data = {a: 1}; var vm = new Vue({ el: ‘#app‘, data: data }) console.log(vm.a === data.a);//true vm.a = 2; console.log(data.a);//2 data.a = 3; console.log(vm.a);//3
23.v-for循环输出,点击事件可以通过设置参数获取位置
例:<button v-on:click="removeTodo($index)">X</button>
23.子级下的子级添加组件的方式
例:
var Person = Vue.extend({}); var Contact = Vue.extend({ template: "<person></person>", components: { ‘person‘: Person } })
24.项目实例:https://github.com/PLDaily/vuejs-project
vue.js的基本操作