Vue学习

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>‘
　　　　　　　　}
　　　　　　　}
　　　　　　})

原文：http://www.cnblogs.com/heroy/p/5486995.html