Vue学习
数据绑定
{{ msg }} 双向
{{* msg }} 只绑定一次
{{{ htmlInfo }}} 表示htmlinfo里 有html标签 ，里面的{{}}将不可用
Vue.partial('my-partial', '<p>This is a partial! {{msg}}</p>') 可以动态html并包含{{}}
{{number+1}} {{ok?'yes':'no'}} {{message.split('').reverse().join('')}} 支持js表达式，不支持语句，if,支持三元
{{ message | filterA | filterB 'arg1' }} 过滤器，可接收参数，不能和js表达式混合，第一参数为message,2为 'arg1'
<p v-if="greeting">Hello!</p> 指令 可以写表达式判断
<a v-bind:href="url"></a> == <a href="{{url}}"></a>
<a v-bind:href="url"></a>==<!-- 缩写 --><a :href="url"></a>
<a v-on:click="doSomething"></a>==<a @click="doSomething"></a>
计算属性
var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
// 一个计算属性的 getter
b: function () {
// `this` 指向 vm 实例
return this.a + 1
}
}
})
观察属性
var vm = new Vue({
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
}
})
vm.$watch('firstName', function (val) {
this.fullName = val + ' ' + this.lastName
})
计算Setter
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
绑定class
案例
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
data: {isA: true,isB: false}
<div v-bind:class="classObject"></div>
data: {
classObject: {
'class-a': true,
'class-b': false
}
}
条件渲染
<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>
v-show 不同 是改变display
v-else 可以跟在上面俩个后面
列表渲染
v-for
<ul id="example-1">
<li v-for="item in items">
{{$index}}---{{ item.message }}
</li>
</ul>
别名
<div v-for="(index, item) in items">
{{ index }} {{ item.message }}
</div>
<div v-for="item of items"></div> 新版的
template
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
vue.js包装的数组方法，能触发视图更新
push() example1.items.push({ message: 'Baz' })
pop()
shift()
unshift()
splice()
sort()
reverse()
非变异方法 filter(), concat() 和 slice() 不会修改
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
替换数组
track-by 可以设置数组的标识 用来复用
问题
vm.items[0] = {} 不认， vm.items.$set(0, { childMsg: 'Changed!'})
vm.items.length = 0 不认，vm.items=[];
删除
this.items.$remove(item)
$key
<ul id="repeat-object" class="demo">
<li v-for="value in object">
{{ $key }} : {{ value }}
</li>
</ul>
<div v-for="(key, val) in object">
{{ key }} {{ val }}
</div>
<div>
<span v-for="n in 10">{{ n }} </span>
</div>
过滤器 filterBy 和 orderBy
方法处理
绑定方法
var vm = new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// 方法内 `this` 指向 vm
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
// 也可以在 JavaScript 代码中调用方法
vm.greet()
//或html中
<div id="example">
<button v-on:click="greet">Greet</button>
</div>
内联
<button v-on:click="say('hi')">Say Hi</button>
<button v-on:click="say('hello!', $event)">Submit</button> // $event.preventDefault() 事件原生对象
表单绑定
v-model
<input type="text" v-model="message" placeholder="edit me">
<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b">
<input type="radio" v-model="pick" v-bind:value="a"> // 选中 vm.pick === vm.a
参数特性
lazy 默认在input事件中同步，加了 lazy 改为 change中同步 <input v-model="msg" lazy>
number <input v-model="age" number> 保持为数字
<input v-model="msg" debounce="500"> 延时同步
过度 (没太细看)
<div v-if="show" transition="my-transition"></div>
<div v-show="ok" class="animated" transition="bounce">Watch me bounce</div>
Vue.transition('bounce', {
enterClass: 'bounceInLeft',
leaveClass: 'bounceOutRight'
})
组件
案例
// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
})
// 注册
Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
el: '#example'
})
// 在一个步骤中扩展与注册，data,el参数选项必须是函数
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 局部注册也可以这么做
var Parent = Vue.extend({
components: {
'my-component': {
template: '<div>A custom component!</div>'
}
}
})