1)双向绑定:
-
<div id="app">
-
<p>{{message}}</p>
-
<input v-model="message"/>
-
</div>
-
new Vue({
-
el:'#app',
-
data:{
-
message:'Hello vue.js'
-
}
-
})
2)渲染列表
-
<div id="app">
-
<ul>
-
<li v-for="todo in todos">{{todo.text}}</li>
-
</ul>
-
</div>
-
new Vue({
-
el:'#app',
-
data:{
-
todos:[
-
{ text:'学习vue'},
-
{ text:'学习Sass'},
-
{ text:'学习webpack'}
-
]
-
}
-
})
3)处理用户输入
-
<div id="app">
-
<p>{{message}}</p>
-
<input v-model='message'/>
-
<button type="button" v-on:click="reverseMessage">反转</button>
-
</div>
-
new Vue({
-
el:'#app',
-
data:{
-
message:'hello world'
-
},
-
methods:{
-
reverseMessage:function(){
-
this.message=this.message.split('').reverse().join('')
-
}
-
}
-
})
4)综合小例子:记事本
-
<div id="app">
-
<input v-model="newTodo" v-on:keyup.enter="addTodo" placeholder="请记录未完成的计划" />
-
<ul>
-
<li v-for="todo in todos">
-
<span>{{todo.text}}</span>
-
<button type="button" v-on:click="removeTodo($index)">X</button>
-
</li>
-
</ul>
-
</div>
-
new Vue({
-
el:'#app',
-
data:{
-
newTodo:'',
-
todos:[
-
{ text:'学习Vue'},
-
{ text:'学习Sass'},
-
{ text:'学习webpack'}
-
]
-
},
-
methods:{
-
addTodo:function(){
-
var text = this.newTodo.trim();
-
if(text){
-
this.todos.push({text:text});
-
this.newTodo='';
-
}
-
},
-
removeTodo:function(index){
-
this.todos.splice(index,1);
-
}
-
}
-
})
5)插值
-
<div id="app">
-
<!-- 单次文本插值 -->
-
<p>{{*message}}</p>
-
<!-- 解析真的html字符串 -->
-
<p>{{{raw_html}}}</p>
-
<!-- html特性 -->
-
<p id="item-{{id}}">html特性</p>
-
</div>
-
new Vue({
-
el:'#app',
-
data:{
-
message:'Hello vue.js',
-
raw_html:'<span>原始的html</span>',
-
id:'1'
-
}
-
})
6)绑定表达式
-
<div id="app">
-
<!-- javascript表达式 -->
-
<p>{{number+1}}</p>
-
<p>{{ok ? 'Yes' : 'No'}}</p>
-
<p>{{message.split('').reverse().join('')}}</p>
-
<!-- 过滤器 -->
-
<p>{{name | capitalize}}</p>
-
</div>
-
new Vue({
-
el:'#app',
-
data:{
-
number:2,
-
ok:false,
-
message:'123456789',
-
name:'brucee lee'
-
}
-
})
7)指令
-
<div id="app">
-
<!-- 参数 -->
-
<a v-bind:href="url" v-on:click="dosomething">指令带参数</a>
-
<!-- v-bind、v-on缩写 -->
-
<a :href="url" @click="dosomething">指令缩写</a>
-
</div>
-
new Vue({
-
el:'#app',
-
data:{
-
url:'http://g.pptv.com'
-
},
-
methods:{
-
dosomething:function(){
-
alert( this.url);
-
}
-
}
-
})
8)计算属性
-
<div id="app">
-
<p>a={{a}},b={{b}}</p>
-
<p>{{fullName}}</p>
-
</div>
-
new Vue({
-
el:'#app',
-
data:{
-
a:1,
-
firstName:'Micro',
-
lastName:'Jodon'
-
},
-
computed:{
-
b:function(){
-
return this.a + 1;
-
},
-
/*fullName:function(){
-
return this.firstName + ' ' + this.lastName;
-
}*/
-
fullName:{
-
get:function(){
-
return this.firstName + ' ' + this.lastName;
-
},
-
set:function(newValue){
-
var names = newValue.split(' ');
-
this.firstName = names[0];
-
this.lastName = names[names.length-1];
-
}
-
}
-
}
-
})
9)class与style绑定
-
.static{
-
width: 200px;
-
margin: 20px auto;
-
height: 25px;
-
line-height: 25px;
-
text-align: center;
-
font-size: 18px;
-
}
-
.class-a{
-
background-color: #f00;
-
}
-
.class-b{
-
color: #fff;
-
}
-
.class-c{
-
padding: 5px 0;
-
}
-
<div id="app">
-
<!-- 绑定class:对象语法 -->
-
<p class="static" v-bind:class="{'class-a':isA,'class-b':isB}">绑定class</p>
-
<p class="static" v-bind:class="classObject">绑定class</p>
-
<!-- 绑定class:数组语法 -->
-
<p class="static" v-bind:class="[classA,classB,classC]">绑定class</p>
-
<p class="static" v-bind:class="[classA,{ 'class-b': isB,'class-c': isC}]">绑定class</p>
-
<!-- 绑定style:对象语法 -->
-
<p class="static" v-bind:style="styleObject">绑定style</p>
-
<!-- 绑定style:数组语法 -->
-
<p class="static" v-bind:style="[styleObjectA,styleObjectB]">绑定style</p>
-
</div>
-
new Vue({
-
el:'#app',
-
data:{
-
classA:'class-a',
-
classB:'class-b',
-
classC:'class-c',
-
isA:true,
-
isB:false,
-
isC:true,
-
classObject:{
-
'class-a':true,
-
'class-b':true
-
},
-
styleObject:{
-
color:'red',
-
fontSize:'13px',
-
backgroundColor:'#00f'
-
},
-
styleObjectA:{
-
color:'green',
-
fontSize:'16px'
-
-
},
-
styleObjectB:{
-
backgroundColor:'#f0f',
-
transform:'rotate(7deg)'
-
}
-
}
-
})
10)条件渲染
-
<div id="app">
-
<h1 v-if="Math.random() > 0.5">对不起!</h1>
-
<h1 v-else>没关系</h1>
-
-
<template v-if="ok">
-
<h1>标题</h1>
-
<p>段落1</p>
-
<p>段落2</p>
-
</template>
-
-
<h1 v-show="isShow">Hello!</h1>
-
-
<custom-component v-show="condition"></custom-component>
-
<p v-show="!condition">这可能也是一个组件</p>
-
</div>
-
// 定义
-
var MyComponent = Vue.extend({
-
template: '<div>A custom component!</div>'
-
});
-
-
// 注册
-
Vue.component( 'custom-component', MyComponent);
-
new Vue({
-
el:'#app',
-
data:{
-
ok:true,
-
isShow:false,
-
condition:true
-
},
-
-
})
11)列表渲染
-
<div id="app">
-
<!-- 数组v-for -->
-
<ul>
-
<template v-for="item in items" track-by="_uid">
-
<li>{{ parentMessage }} - {{ $index }} - {{ item.message }}</li>
-
<li class="divider"></li>
-
</template>
-
</ul>
-
<!-- 对象v-for -->
-
<ul>
-
<li v-for="(key,val) in object">{{key}} : {{val}}</li>
-
</ul>
-
<!-- 值域v-for -->
-
<span v-for="n in 10">{{ n }}</span>
-
</div>
-
ul{
-
list-style: none;
-
width: 150px;
-
}
-
.divider{
-
height: 2px;
-
background-color: #00f;
-
}
-
span{
-
padding: 0 2px;
-
}
-
var vm=new Vue({
-
el:'#app',
-
data:{
-
parentMessage:'水果',
-
items:[
-
{ _uid:'001',message:'香蕉'},
-
{ _uid:'002',message:'橘子'}
-
],
-
object:{
-
FirstName: 'John',
-
LastName: 'Doe',
-
Age: 30
-
}
-
}
-
});
-
//变异方法:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
-
vm.items.push({ message:'苹果'},{message:'梨子'});//推入两项
-
vm.items.shift(); //取出第一项
-
//非变异方法:filter(), concat(), slice(),可用替换数组来修改原数组
-
vm.items=vm.items.filter( function (item) {
-
return item.message.match(/子/);
-
})
12)方法与事件处理器
-
<div id="app">
-
<!-- 内联语句处理器 -->
-
<button type="button" v-on:click="say('Hello',$event)">提交</button>
-
<!-- 事件修饰符 -->
-
<!-- 阻止单击事件冒泡 -->
-
<a v-on:click.stop="doThis"></a>
-
-
<!-- 提交事件不再重载页面 -->
-
<form v-on:submit.prevent="onSubmit"></form>
-
-
<!-- 修饰符可以串联 -->
-
<a v-on:click.stop.prevent="doThat"></a>
-
-
<!-- 只有修饰符 -->
-
<form v-on:submit.prevent></form>
-
-
<!-- 添加事件侦听器时使用 capture 模式 -->
-
<div v-on:click.capture="doThis">...</div>
-
-
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
-
<div v-on:click.self="doThat">...</div>
-
-
<!-- 按键修饰符 -->
-
<input v-on:keyup.enter="submit">
-
-
</div>
-
var vm=new Vue({
-
el:'#app',
-
methods:{
-
say:function(msg,event){
-
alert(msg+ ","+event.target.tagName);
-
event.preventDefault();
-
}
-
}
-
});
13)表单控件绑定
-
<div id="app">
-
<!-- 多行文本 -->
-
<span>这是您的评论:</span>
-
<p>{{message}}</p>
-
<textarea v-model="message" placeholder="请输入您的评论"></textarea>
-
<br>
-
<!-- 单选框 -->
-
<input type="checkbox" id="checkbox" v-model="checked">
-
<label for="checkbox">{{ checked }}</label>
-
<br>
-
<!-- 多个单选框 -->
-
<input type="checkbox" id="jack" value="马云" v-model="checkedNames">
-
<label for="jack">马云</label>
-
<input type="checkbox" id="john" value="马化腾" v-model="checkedNames">
-
<label for="john">马化腾</label>
-
<input type="checkbox" id="mike" value="李彦宏" v-model="checkedNames">
-
<label for="mike">李彦宏</label>
-
<br>
-
<span>选中的值: {{ checkedNames | json }}</span>
-
<br>
-
<!-- 单选钮 -->
-
<input type="radio" id="one" value="One" v-model="picked">
-
<label for="one">One</label>
-
<br>
-
<input type="radio" id="two" value="Two" v-model="picked">
-
<label for="two">Two</label>
-
<br>
-
<span>选中的值: {{ picked }}</span>
-
<br>
-
<!-- 下拉列表单选 -->
-
<select v-model="selected">
-
<option selected>湖北</option>
-
<option>北京</option>
-
<option>上海</option>
-
</select>
-
<span>选中的值: {{ selected }}</span>
-
<br>
-
<!-- 下拉列表多选 -->
-
<select v-model="selecteds" multiple>
-
<option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
-
</select>
-
<br>
-
<span>选中的值: {{ selecteds | json }}</span>
-
<br>
-
-
<!--绑定动态值到Vue实例-->
-
-
<!-- 选中时为a,未选中时为b -->
-
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"/>
-
<span>选中时的值:{{toggle}}</span>
-
<br>
-
-
<input type="radio" v-model="pick" v-bind:value="c">男
-
<input type="radio" v-model="pick" v-bind:value="d">女
-
<span>选中时的值:{{pick}}</span>
-
-
<!-- 在 "change" 而不是 "input" 事件中更新 -->
-
<input v-model="msg" lazy>
-
<!-- 设置转换为数值类型 -->
-
<input v-model="age" number>
-
<!-- 设置延时 -->
-
<input v-model="msg" debounce="500">
-
</div>
-
var vm=new Vue({
-
el:'#app',
-
data: {
-
checkedNames: [],
-
options:[
-
{ text:'南京',value:'南京'},
-
{ text:'苏州',value:'苏州'},
-
{ text:'无锡',value:'无锡'}
-
],
-
a:'选中',
-
b:'未选中',
-
c:'男',
-
d:'女'
-
}
-
});
14)css过渡
-
<div id="app">
-
<div v-if="show" transition="expand">Hello1</div>
-
<div v-if="show" :transition="transitionName">Hello2</div>
-
<button type="button" v-on:click="toggle">过渡效果演示</button>
-
</div>
-
/* 必需 */
-
.expand-transition {
-
transition: all 0.5s ease;
-
height: 30px;
-
padding: 10px;
-
-
overflow: hidden;
-
}
-
-
/* .expand-enter 定义进入的开始状态 */
-
/* .expand-leave 定义离开的结束状态 */
-
.expand-enter, .expand-leave {
-
height: 0;
-
padding: 0 10px;
-
opacity: 0;
-
}
-
.fade-transition{
-
transition: all 0.5s ease;
-
height: 30px;
-
padding: 10px;
-
outline: 0px; color: rgb(209, 154, 102); word-break: break-all;">2df;
-
overflow: hidden;
-
}
-
.fade-enter, .fade-leave {
-
padding: 0 10px;
-
opacity: 0.5;
-
}
-
var vm=new Vue({
-
el:'#app',
-
data: {
-
show:true,
-
transitionName:'fade'
-
},
-
methods:{
-
toggle:function(){
-
if(this.show){
-
this.show=false;
-
} else{
-
this.show=true;
-
}
-
-
}
-
},
-
transitions: {
-
expand: {
-
beforeEnter: function (el) {
-
el.textContent = 'beforeEnter'
-
},
-
enter: function (el) {
-
el.textContent = 'enter'
-
},
-
afterEnter: function (el) {
-
el.textContent = 'afterEnter'
-
},
-
beforeLeave: function (el) {
-
el.textContent = 'beforeLeave'
-
},
-
leave: function (el) {
-
el.textContent = 'leave'
-
},
-
afterLeave: function (el) {
-
el.textContent = 'afterLeave'
-
}
-
}
-
}
-
});
15)css自定义过渡(注:与animats.css配合使用)
-
<div id="app">
-
<div v-show="ok" class="animated" transition="bounce">只有我最摇摆</div>
-
<button type="button" v-on:click="toggle">演示过渡效果</button>
-
</div>
-
.animated{
-
width: 150px;
-
background-color: #2df;
-
height: 30px;
-
padding: 10px;
-
}
-
var vm=new Vue({
-
el:'#app',
-
data: {
-
ok:true
-
},
-
methods:{
-
toggle:function(){
-
if(this.ok){
-
this.ok=false;
-
} else{
-
this.ok=true;
-
}
-
}
-
},
-
transitions: {
-
bounce: {
-
enterClass: 'bounceInLeft',
-
leaveClass: 'bounceOutRight'
-
}
-
}
-
});
16)CSS动画(注:与animats.css配合使用)
-
<div id="app">
-
<div v-show="ok" class="animated" transition="bounce">看我变一个</div>
-
<button type="button" v-on:click="toggle">演示动画效果</button>
-
</div>
-
.animated{
-
width: 150px;
-
background-color: #2df;
-
height: 30px;
-
padding: 10px;
-
}
-
.bounce-transition {
-
display: inline-block; /* 否则 scale 动画不起作用 */
-
}
-
.bounce-enter {
-
animation: bounce-in .5s;
-
}
-
.bounce-leave {
-
animation: bounce-out .5s;
-
}
-
@ keyframes bounce-in {
-
0% {
-
transform: scale(0);
-
}
-
50% {
-
transform: scale(1.5);
-
}
-
100% {
-
transform: scale(1);
-
}
-
}
-
@ keyframes bounce-out {
-
0% {
-
transform: scale(1);
-
}
-
50% {
-
transform: scale(1.5);
-
}
-
100% {
-
transform: scale(0);
-
}
-
}
-
var vm=new Vue({
-
el:'#app',
-
data: {
-
ok:true
-
},
-
methods:{
-
toggle:function(){
-
if(this.ok){
-
this.ok=false;
-
} else{
-
this.ok=true;
-
}
-
}
-
}
-
});
17)Javascript过渡
-
<div id="app">
-
<p transition='fade'>什么和什么?</p>
-
</div>
-
.fade-transition{
-
transition: all 0.5s ease;
-
height: 30px;
-
padding: 10px;
-
background-color: #2df;
-
overflow: hidden;
-
}
-
var vm=new Vue({
-
el:'#app'
-
});
-
vm.transition( 'fade', {
-
css: false,
-
enter: function (el, done) {
-
// 元素已被插入 DOM
-
// 在动画结束后调用 done
-
$(el)
-
.css( 'opacity', 0)
-
.animate({ opacity: 1 }, 1000, done)
-
},
-
enterCancelled: function (el) {
-
$(el).stop()
-
},
-
leave: function (el, done) {
-
// 与 enter 相同
-
$(el).animate({ opacity: 0 }, 1000, done)
-
},
-
leaveCancelled: function (el) {
-
$(el).stop()
-
}
-
})
18)渐进过渡
-
<div id="example-1">
-
<input v-model="query">
-
<ul>
-
<li v-for="item in list | filterBy query" transition="staggered" stagger="100">
-
{{item.msg}}
-
</li>
-
</ul>
-
</div>
-
#example-1{
-
width:200px;
-
margin:20px auto;
-
font-size:14px;
-
color:#ff6600;
-
}
-
ul {
-
padding-left: 0;
-
font-family: Helvetica, Arial, sans-serif;
-
}
-
.staggered-transition {
-
transition: all .5s ease;
-
overflow: hidden;
-
margin: 0;
-
height: 25px;
-
}
-
.bounceInLeft, .bounceOutRight {
-
opacity: 0;
-
height: 0;
-
}
-
var exampleData={
-
query: '',
-
list: [
-
{ msg: 'Bruce Lee' },
-
{ msg: 'Jackie Chan' },
-
{ msg: 'Chuck Norris' },
-
{ msg: 'Jet Li' },
-
{ msg: 'Kung Fury' }
-
]
-
};
-
var exampleVM = new Vue({
-
el:'#example-1',
-
data:exampleData,
-
transitions:{
-
staggered:{
-
enterClass:'bounceInLeft',
-
leaveClass: 'bounceOutRight'
-
}
-
}
-
});
-
-
/* exampleVM.transition('stagger', {
-
stagger: function (index) {
-
// 每个过渡项目增加 50ms 延时
-
// 但是最大延时限制为 300ms
-
return Math.min(300, index * 50)
-
}
-
})*/
19)组件
-
<div id="example">
-
<my-component></my-component>
-
</div>
-
//定义
-
/*var myComponent=Vue.extend({
-
template:'<div>A custom component!</div>'
-
});*/
-
//注册
-
//Vue.component('my-component',myComponent);
-
//在一个步骤中定义与注册
-
Vue.component( 'my-component',{
-
template:'<div>A custom component!</div>'
-
});
-
//创建根实例
-
new Vue({
-
el:'#example'
-
});
20)组件局部注册
-
<div id="example">
-
<parent-component></parent-component>
-
</div>
-
//定义
-
/*var Child=Vue.extend({
-
template:'<div>A child component!</div>'
-
});*/
-
var Parent=Vue.extend({
-
template:'<div>A parent component!<my-component></my-component></div>',
-
components:{
-
// <my-component> 只能用在父组件模板内
-
'my-component':{
-
template:'<div>A child component!</div>'
-
}
-
}
-
});
-
// 注册父组件
-
Vue.component( 'parent-component', Parent);
-
//创建根实例
-
new Vue({
-
el:'#example'
-
});
21)使用props传递数据
-
<div id="example" class="demo">
-
<input type="text" v-model="parentMessage"/><br>
-
<child v-bind:my-message="parentMessage"></child>
-
<!-- 双向绑定 -->
-
<child :msg.sync="parentMessage"></child>
-
-
<!-- 单次绑定 -->
-
<child :msg.once="parentMessage"></child>
-
</div>
-
.demo{
-
border: 1px solid #eee;
-
border-radius: 2px;
-
padding: 25px 35px;
-
margin-bottom: 40px;
-
font-size: 1.2em;
-
line-height: 1.5em;
-
}
-
new Vue({
-
el:'#example',
-
data:{
-
parentMessage:'Message from parent'
-
},
-
components:{
-
child:{
-
props:['myMessage'],
-
template:'<span>{{myMessage}}</span>'
-
}
-
}
-
});
22)prop验证
-
<div id="example" class="demo">
-
<child></child>
-
</div>
-
.demo{
-
border: 1px solid #eee;
-
border-radius: 2px;
-
padding: 25px 35px;
-
margin-bottom: 40px;
-
font-size: 1.2em;
-
line-height: 1.5em;
-
}
-
new Vue({
-
el:'#example',
-
components:{
-
child:{
-
props: {
-
// 基础类型检测 (`null` 意思是任何类型都可以)
-
propA: Number,
-
// 多种类型 (1.0.21+)
-
propM: [ String, Number],
-
// 必需且是字符串
-
propB: {
-
type: String,
-
required: true
-
},
-
// 数字,有默认值
-
propC: {
-
type: Number,
-
default: 100
-
},
-
// 对象/数组的默认值应当由一个函数返回
-
propD: {
-
type: Object,
-
default: function () {
-
return { msg: 'hello' }
-
}
-
},
-
// 指定这个 prop 为双向绑定
-
// 如果绑定类型不对将抛出一条警告
-
propE: {
-
twoWay: true
-
},
-
// 自定义验证函数
-
propF: {
-
validator: function (value) {
-
return value > 10
-
}
-
},
-
// 转换函数(1.0.12 新增)
-
// 在设置值之前转换值
-
propG: {
-
coerce: function (val) {
-
return val + ''; // 将值转换为字符串
-
}
-
},
-
propH: {
-
coerce: function (val) {
-
return JSON.parse(val); // 将 JSON 字符串转换为对象
-
}
-
}
-
},
-
template:'<span>hello world!</span>'
-
}
-
}
-
});
23)父子组件通信
-
<!--子组件模板-->
-
<template id="child-template">
-
<input type="text" v-model="msg"/>
-
<button type="button" v-on:click="notify">派发事件</button>
-
</template>
-
<!--父组件模板-->
-
<div id="events-example" class="demo">
-
<p>Messages:{{ messages | json }}</p>
-
<child v-on:child-msg="handleIt"></child>
-
</div>
-
.demo{
-
border: 1px solid #eee;
-
border-radius: 2px;
-
padding: 25px 35px;
-
margin-bottom: 40px;
-
font-size: 1.2em;
-
line-height: 1.5em;
-
}
-
// 注册子组件,将当前消息派发出去
-
Vue.component( 'child',{
-
template:'#child-template',
-
data:function(){
-
return {msg:'hello'}
-
},
-
methods:{
-
notify:function(){
-
if(this.msg.trim()){
-
this.$dispatch('child-msg',this.msg);
-
this.msg='';
-
}
-
}
-
}
-
});
-
// 初始化父组件,收到消息时将事件推入一个数组
-
var parent=new Vue({
-
el:'#events-example',
-
data:{
-
messages:[]
-
},
-
methods:{
-
handleIt:function(msg){
-
this.messages.push(msg);
-
}
-
}
-
// 在创建实例时 `events` 选项简单地调用 `$on`
-
/*events:{
-
'child-msg':function(msg){
-
this.messages.push(msg);
-
}
-
}*/
-
})
24)自定义指令-基础
<div id="demo" v-demo:hello.a.b="msg"></div>
-
Vue.directive( 'demo', {
-
bind: function () {
-
console.log('demo bound!')
-
},
-
update: function (value) {
-
this.el.innerHTML =
-
'name - ' + this.name + '<br>' +
-
'expression - ' + this.expression + '<br>' +
-
'argument - ' + this.arg + '<br>' +
-
'modifiers - ' + JSON.stringify(this.modifiers) + '<br>' +
-
'value - ' + value
-
}
-
});
-
var demo = new Vue({
-
el: '#demo',
-
data: {
-
msg: 'hello!'
-
}
-
})
25)自定义指令-高级选项
-
<div id="demo" >
-
<!--对象字面量-->
-
<div v-demo-1="{ color: 'white', text: 'hello!' }"></div>
-
<!--字面修饰符-->
-
<div v-demo-2.literal="foo bar baz"></div>
-
<!--元素指令-->
-
<my-directive></my-directive>
-
<!--高级选项-params-->
-
<div v-example a="hi"></div>
-
</div>
-
Vue.directive( 'demo-1', function(value){
-
console.log(value.color);
-
console.log(value.text);
-
});
-
Vue.directive( 'demo-2',function(value){
-
console.log(value);
-
});
-
Vue.elementDirective( 'my-directive',{
-
bind:function(){
-
console.log(this.el);
-
}
-
});
-
Vue.directive( 'example',{
-
params:['a'],
-
bind:function(){
-
console.log(this.params.a);
-
}
-
});
-
Vue.directive( 'two', {
-
twoWay: true,
-
bind: function () {
-
this.handler = function () {
-
// 将数据写回 vm
-
// 如果指令这样绑定 v-example="a.b.c"
-
// 它将用给定值设置 `vm.a.b.c`
-
this.set(this.el.value)
-
}.bind( this);
-
this.el.addEventListener('input', this.handler);
-
},
-
unbind: function () {
-
this.el.removeEventListener('input', this.handler)
-
}
-
});
-
var vm=new Vue({
-
el: '#demo'
-
});
26)自定义过滤器
-
<div id="demo" class="demo">
-
<!--基础过滤器-->
-
<span v-text="message | reverse"></span><br>
-
<span v-text="message | wrap 'before' 'after'"></span><br>
-
<!--双向过滤器-->
-
<input type="text" v-model="money | currencyDisplay"/>
-
<p>ModelValue:{{money | currencyDisplay}}</p>
-
<!--动态参数-->
-
<input v-model="userInput"/>
-
<span>{{msg | concat userInput}}</span>
-
</div>
-
.demo{
-
border: 1px solid #eee;
-
border-radius: 2px;
-
padding: 25px 35px;
-
margin-bottom: 40px;
-
font-size: 1.2em;
-
line-height: 1.5em;
-
}
-
Vue.filter( 'reverse',function(value){
-
return value.split('').reverse().join('');
-
});
-
Vue.filter( 'wrap',function(value,begin,end){
-
return begin+' '+value+' '+end;
-
});
-
Vue.filter( 'currencyDisplay',{
-
// model -> view
-
// 在更新 `<input>` 元素之前格式化值
-
read: function(val){
-
return '$'+val.toFixed(2)
-
},
-
// view -> model
-
// 在写回数据之前格式化值
-
write: function(val, oldVal) {
-
var number = +val.replace(/[^\d.]/g, '')
-
return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
-
}
-
});
-
Vue.filter( 'concat',function(value,input){
-
return value+input;
-
})
-
new Vue({
-
el:'#demo',
-
data:{
-
message:'abc',
-
money:123.45,
-
msg:'hello',
-
userInput:'hi'
-
}
-
});
27)混合
-
<div id="demo" class="demo">
-
-
</div>
-
.demo{
-
border: 1px solid #eee;
-
border-radius: 2px;
-
padding: 25px 35px;
-
margin-bottom: 40px;
-
font-size: 1.2em;
-
line-height: 1.5em;
-
}
-
var myMixin={
-
created:function(){
-
this.hello();
-
},
-
methods:{
-
hello:function(){
-
console.log('hello from mixin!');
-
}
-
}
-
};
-
// 定义一个组件,使用这个混合对象
-
var Component = Vue.extend({
-
mixins: [myMixin]
-
});
-
var component = new Component();
-
new Vue({
-
el:'#demo'
-
});
28)混合-选项合并
-
<div id="demo" class="demo">
-
-
</div>
-
.demo{
-
border: 1px solid #eee;
-
border-radius: 2px;
-
padding: 25px 35px;
-
margin-bottom: 40px;
-
font-size: 1.2em;
-
line-height: 1.5em;
-
}
-
-
var mixin={
-
created:function(){
-
console.log('mixin hook called');
-
},
-
methods: {
-
foo: function () {
-
console.log('foo');
-
},
-
conflicting: function () {
-
console.log('from mixin');
-
}
-
}
-
};
-
var vm=new Vue({
-
el:'#demo',
-
mixins:[mixin],
-
created:function(){
-
console.log('component hook called');
-
},
-
methods:{
-
bar: function () {
-
console.log('bar');
-
},
-
conflicting: function () {
-
console.log('from self');
-
}
-
}
-
});
-
vm.foo();
-
vm.bar();
-
vm.conflicting(); //组件优先
-