Vue基础汇总

1)双向绑定：

1. <div id="app">
2. <p>{{message}}</p>
3. <input v-model="message"/>
4. </div>

1. new Vue({
2. el:'#app',
3. data:{
4. message:'Hello vue.js'
5. }
6. })

2)渲染列表

1. <div id="app">
2. <ul>
3. <li v-for="todo in todos">{{todo.text}}</li>
4. </ul>
5. </div>

1. new Vue({
2. el:'#app',
3. data:{
4. todos:[
5. {text:'学习vue'},
6. {text:'学习Sass'},
7. {text:'学习webpack'}
8. ]
9. }
10. })

3)处理用户输入

1. <div id="app">
2. <p>{{message}}</p>
3. <input v-model='message'/>
4. <button type="button" v-on:click="reverseMessage">反转</button>
5. </div>

1. new Vue({
2. el:'#app',
3. data:{
4. message:'hello world'
5. },
6. methods:{
7. reverseMessage:function(){
8. this.message=this.message.split('').reverse().join('')
9. }
10. }
11. })

4)综合小例子：记事本

1. <div id="app">
2. <input v-model="newTodo" v-on:keyup.enter="addTodo" placeholder="请记录未完成的计划" />
3. <ul>
4. <li v-for="todo in todos">
5. <span>{{todo.text}}</span>
6. <button type="button" v-on:click="removeTodo($index)">X</button>
7. </li>
8. </ul>
9. </div>

1. new Vue({
2. el:'#app',
3. data:{
4. newTodo:'',
5. todos:[
6. {text:'学习Vue'},
7. {text:'学习Sass'},
8. {text:'学习webpack'}
9. ]
10. },
11. methods:{
12. addTodo:function(){
13. var text = this.newTodo.trim();
14. if(text){
15. this.todos.push({text:text});
16. this.newTodo='';
17. }
18. },
19. removeTodo:function(index){
20. this.todos.splice(index,1);
21. }
22. }
23. })

5)插值

1. <div id="app">
2. <!-- 单次文本插值 -->
3. <p>{{*message}}</p>
4. <!-- 解析真的html字符串 -->
5. <p>{{{raw_html}}}</p>
6. <!-- html特性 -->
7. <p id="item-{{id}}">html特性</p>
8. </div>

1. new Vue({
2. el:'#app',
3. data:{
4. message:'Hello vue.js',
5. raw_html:'<span>原始的html</span>',
6. id:'1'
7. }
8. })

6)绑定表达式

1. <div id="app">
2. <!-- javascript表达式 -->
3. <p>{{number+1}}</p>
4. <p>{{ok ? 'Yes' : 'No'}}</p>
5. <p>{{message.split('').reverse().join('')}}</p>
6. <!-- 过滤器 -->
7. <p>{{name | capitalize}}</p>
8. </div>

1. new Vue({
2. el:'#app',
3. data:{
4. number:2,
5. ok:false,
6. message:'123456789',
7. name:'brucee lee'
8. }
9. })

7)指令

1. <div id="app">
2. <!-- 参数 -->
3. <a v-bind:href="url" v-on:click="dosomething">指令带参数</a>
4. <!-- v-bind、v-on缩写 -->
5. <a :href="url" @click="dosomething">指令缩写</a>
6. </div>

1. new Vue({
2. el:'#app',
3. data:{
4. url:'http://g.pptv.com'
5. },
6. methods:{
7. dosomething:function(){
8. alert(this.url);
9. }
10. }
11. })

8)计算属性

1. <div id="app">
2. <p>a={{a}},b={{b}}</p>
3. <p>{{fullName}}</p>
4. </div>

1. new Vue({
2. el:'#app',
3. data:{
4. a:1,
5. firstName:'Micro',
6. lastName:'Jodon'
7. },
8. computed:{
9. b:function(){
10. return this.a + 1;
11. },
12. /*fullName:function(){
13. return this.firstName + ' ' + this.lastName;
14. }*/
15. fullName:{
16. get:function(){
17. return this.firstName + ' ' + this.lastName;
18. },
19. set:function(newValue){
20. var names = newValue.split(' ');
21. this.firstName = names[0];
22. this.lastName = names[names.length-1];
23. }
24. }
25. }
26. })

9)class与style绑定

1. .static{
2. width: 200px;
3. margin: 20px auto;
4. height: 25px;
5. line-height: 25px;
6. text-align: center;
7. font-size: 18px;
8. }
9. .class-a{
10. background-color: #f00;
11. }
12. .class-b{
13. color: #fff;
14. }
15. .class-c{
16. padding: 5px 0;
17. }

1. <div id="app">
2. <!-- 绑定class:对象语法 -->
3. <p class="static" v-bind:class="{'class-a':isA,'class-b':isB}">绑定class</p>
4. <p class="static" v-bind:class="classObject">绑定class</p>
5. <!-- 绑定class:数组语法 -->
6. <p class="static" v-bind:class="[classA,classB,classC]">绑定class</p>
7. <p class="static" v-bind:class="[classA,{ 'class-b': isB,'class-c': isC}]">绑定class</p>
8. <!-- 绑定style:对象语法 -->
9. <p class="static" v-bind:style="styleObject">绑定style</p>
10. <!-- 绑定style:数组语法 -->
11. <p class="static" v-bind:style="[styleObjectA,styleObjectB]">绑定style</p>
12. </div>

1. new Vue({
2. el:'#app',
3. data:{
4. classA:'class-a',
5. classB:'class-b',
6. classC:'class-c',
7. isA:true,
8. isB:false,
9. isC:true,
10. classObject:{
11. 'class-a':true,
12. 'class-b':true
13. },
14. styleObject:{
15. color:'red',
16. fontSize:'13px',
17. backgroundColor:'#00f'
18. },
19. styleObjectA:{
20. color:'green',
21. fontSize:'16px'
22. },
23. styleObjectB:{
24. backgroundColor:'#f0f',
25. transform:'rotate(7deg)'
26. }
27. }
28. })

10)条件渲染

1. <div id="app">
2. <h1 v-if="Math.random() > 0.5">对不起！</h1>
3. <h1 v-else>没关系</h1>
4. <template v-if="ok">
5. <h1>标题</h1>
6. <p>段落1</p>
7. <p>段落2</p>
8. </template>
9. <h1 v-show="isShow">Hello!</h1>
10. <custom-component v-show="condition"></custom-component>
11. <p v-show="!condition">这可能也是一个组件</p>
12. </div>

1. // 定义
2. var MyComponent = Vue.extend({
3. template: '<div>A custom component!</div>'
4. });
5. // 注册
6. Vue.component('custom-component', MyComponent);
7. new Vue({
8. el:'#app',
9. data:{
10. ok:true,
11. isShow:false,
12. condition:true
13. },
14. })

11)列表渲染

1. <div id="app">
2. <!-- 数组v-for -->
3. <ul>
4. <template v-for="item in items" track-by="_uid">
5. <li>{{ parentMessage }} - {{ $index }} - {{ item.message }}</li>
6. <li class="divider"></li>
7. </template>
8. </ul>
9. <!-- 对象v-for -->
10. <ul>
11. <li v-for="(key,val) in object">{{key}} : {{val}}</li>
12. </ul>
13. <!-- 值域v-for -->
14. <span v-for="n in 10">{{ n }}</span>
15. </div>

1. ul{
2. list-style: none;
3. width: 150px;
4. }
5. .divider{
6. height: 2px;
7. background-color: #00f;
8. }
9. span{
10. padding: 0 2px;
11. }

1. var vm=new Vue({
2. el:'#app',
3. data:{
4. parentMessage:'水果',
5. items:[
6. { _uid:'001',message:'香蕉'},
7. { _uid:'002',message:'橘子'}
8. ],
9. object:{
10. FirstName: 'John',
11. LastName: 'Doe',
12. Age: 30
13. }
14. }
15. });
16. //变异方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
17. vm.items.push({message:'苹果'},{message:'梨子'});//推入两项
18. vm.items.shift();//取出第一项
19. //非变异方法：filter(), concat(), slice(),可用替换数组来修改原数组
20. vm.items=vm.items.filter(function (item) {
21. return item.message.match(/子/);
22. })

12)方法与事件处理器

1. <div id="app">
2. <!-- 内联语句处理器 -->
3. <button type="button" v-on:click="say('Hello',$event)">提交</button>
4. <!-- 事件修饰符 -->
5. <!-- 阻止单击事件冒泡 -->
6. <a v-on:click.stop="doThis"></a>
7. <!-- 提交事件不再重载页面 -->
8. <form v-on:submit.prevent="onSubmit"></form>
9. <!-- 修饰符可以串联 -->
10. <a v-on:click.stop.prevent="doThat"></a>
11. <!-- 只有修饰符 -->
12. <form v-on:submit.prevent></form>
13. <!-- 添加事件侦听器时使用 capture 模式 -->
14. <div v-on:click.capture="doThis">...</div>
15. <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
16. <div v-on:click.self="doThat">...</div>
17. <!-- 按键修饰符 -->
18. <input v-on:keyup.enter="submit">
19. </div>

1. var vm=new Vue({
2. el:'#app',
3. methods:{
4. say:function(msg,event){
5. alert(msg+","+event.target.tagName);
6. event.preventDefault();
7. }
8. }
9. });

13)表单控件绑定

1. <div id="app">
2. <!-- 多行文本 -->
3. <span>这是您的评论：</span>
4. <p>{{message}}</p>
5. <textarea v-model="message" placeholder="请输入您的评论"></textarea>
6. <br>
7. <!-- 单选框 -->
8. <input type="checkbox" id="checkbox" v-model="checked">
9. <label for="checkbox">{{ checked }}</label>
10. <br>
11. <!-- 多个单选框 -->
12. <input type="checkbox" id="jack" value="马云" v-model="checkedNames">
13. <label for="jack">马云</label>
14. <input type="checkbox" id="john" value="马化腾" v-model="checkedNames">
15. <label for="john">马化腾</label>
16. <input type="checkbox" id="mike" value="李彦宏" v-model="checkedNames">
17. <label for="mike">李彦宏</label>
18. <br>
19. <span>选中的值: {{ checkedNames | json }}</span>
20. <br>
21. <!-- 单选钮 -->
22. <input type="radio" id="one" value="One" v-model="picked">
23. <label for="one">One</label>
24. <br>
25. <input type="radio" id="two" value="Two" v-model="picked">
26. <label for="two">Two</label>
27. <br>
28. <span>选中的值: {{ picked }}</span>
29. <br>
30. <!-- 下拉列表单选 -->
31. <select v-model="selected">
32. <option selected>湖北</option>
33. <option>北京</option>
34. <option>上海</option>
35. </select>
36. <span>选中的值: {{ selected }}</span>
37. <br>
38. <!-- 下拉列表多选 -->
39. <select v-model="selecteds" multiple>
40. <option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
41. </select>
42. <br>
43. <span>选中的值: {{ selecteds | json }}</span>
44. <br>
45. <!--绑定动态值到Vue实例-->
46. <!-- 选中时为a，未选中时为b -->
47. <input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"/>
48. <span>选中时的值：{{toggle}}</span>
49. <br>
50. <input type="radio" v-model="pick" v-bind:value="c">男
51. <input type="radio" v-model="pick" v-bind:value="d">女
52. <span>选中时的值：{{pick}}</span>
53. <!-- 在 "change" 而不是 "input" 事件中更新 -->
54. <input v-model="msg" lazy>
55. <!-- 设置转换为数值类型 -->
56. <input v-model="age" number>
57. <!-- 设置延时 -->
58. <input v-model="msg" debounce="500">
59. </div>

1. var vm=new Vue({
2. el:'#app',
3. data: {
4. checkedNames: [],
5. options:[
6. {text:'南京',value:'南京'},
7. {text:'苏州',value:'苏州'},
8. {text:'无锡',value:'无锡'}
9. ],
10. a:'选中',
11. b:'未选中',
12. c:'男',
13. d:'女'
14. }
15. });

14)css过渡

1. <div id="app">
2. <div v-if="show" transition="expand">Hello1</div>
3. <div v-if="show" :transition="transitionName">Hello2</div>
4. <button type="button" v-on:click="toggle">过渡效果演示</button>
5. </div>

1. /* 必需 */
2. .expand-transition {
3. transition: all 0.5s ease;
4. height: 30px;
5. padding: 10px;
6. background-color: #eee;
7. overflow: hidden;
8. }
9. /* .expand-enter 定义进入的开始状态 */
10. /* .expand-leave 定义离开的结束状态 */
11. .expand-enter, .expand-leave {
12. height: 0;
13. padding: 0 10px;
14. opacity: 0;
15. }
16. .fade-transition{
17. transition: all 0.5s ease;
18. height: 30px;
19. padding: 10px;
20. background-color: #2df;
21. overflow: hidden;
22. }
23. .fade-enter, .fade-leave {
24. padding: 0 10px;
25. opacity: 0.5;
26. }

1. var vm=new Vue({
2. el:'#app',
3. data: {
4. show:true,
5. transitionName:'fade'
6. },
7. methods:{
8. toggle:function(){
9. if(this.show){
10. this.show=false;
11. }else{
12. this.show=true;
13. }
14. }
15. },
16. transitions: {
17. expand: {
18. beforeEnter: function (el) {
19. el.textContent = 'beforeEnter'
20. },
21. enter: function (el) {
22. el.textContent = 'enter'
23. },
24. afterEnter: function (el) {
25. el.textContent = 'afterEnter'
26. },
27. beforeLeave: function (el) {
28. el.textContent = 'beforeLeave'
29. },
30. leave: function (el) {
31. el.textContent = 'leave'
32. },
33. afterLeave: function (el) {
34. el.textContent = 'afterLeave'
35. }
36. }
37. }
38. });

15)css自定义过渡（注：与animats.css配合使用）

1. <div id="app">
2. <div v-show="ok" class="animated" transition="bounce">只有我最摇摆</div>
3. <button type="button" v-on:click="toggle">演示过渡效果</button>
4. </div>

1. .animated{
2. width: 150px;
3. background-color: #2df;
4. height: 30px;
5. padding: 10px;
6. }

1. var vm=new Vue({
2. el:'#app',
3. data: {
4. ok:true
5. },
6. methods:{
7. toggle:function(){
8. if(this.ok){
9. this.ok=false;
10. }else{
11. this.ok=true;
12. }
13. }
14. },
15. transitions: {
16. bounce: {
17. enterClass: 'bounceInLeft',
18. leaveClass: 'bounceOutRight'
19. }
20. }
21. });

16)CSS动画（注：与animats.css配合使用）

1. <div id="app">
2. <div v-show="ok" class="animated" transition="bounce">看我变一个</div>
3. <button type="button" v-on:click="toggle">演示动画效果</button>
4. </div>

1. .animated{
2. width: 150px;
3. background-color: #2df;
4. height: 30px;
5. padding: 10px;
6. }
7. .bounce-transition {
8. display: inline-block; /* 否则 scale 动画不起作用 */
9. }
10. .bounce-enter {
11. animation: bounce-in .5s;
12. }
13. .bounce-leave {
14. animation: bounce-out .5s;
15. }
16. @keyframes bounce-in {
17. 0% {
18. transform: scale(0);
19. }
20. 50% {
21. transform: scale(1.5);
22. }
23. 100% {
24. transform: scale(1);
25. }
26. }
27. @keyframes bounce-out {
28. 0% {
29. transform: scale(1);
30. }
31. 50% {
32. transform: scale(1.5);
33. }
34. 100% {
35. transform: scale(0);
36. }
37. }

1. var vm=new Vue({
2. el:'#app',
3. data: {
4. ok:true
5. },
6. methods:{
7. toggle:function(){
8. if(this.ok){
9. this.ok=false;
10. }else{
11. this.ok=true;
12. }
13. }
14. }
15. });

17)Javascript过渡

1. <div id="app">
2. <p transition='fade'>什么和什么？</p>
3. </div>

1. .fade-transition{
2. transition: all 0.5s ease;
3. height: 30px;
4. padding: 10px;
5. background-color: #2df;
6. overflow: hidden;
7. }

1. var vm=new Vue({
2. el:'#app'
3. });
4. vm.transition('fade', {
5. css: false,
6. enter: function (el, done) {
7. // 元素已被插入 DOM
8. // 在动画结束后调用 done
9. $(el)
10. .css('opacity', 0)
11. .animate({ opacity: 1 }, 1000, done)
12. },
13. enterCancelled: function (el) {
14. $(el).stop()
15. },
16. leave: function (el, done) {
17. // 与 enter 相同
18. $(el).animate({ opacity: 0 }, 1000, done)
19. },
20. leaveCancelled: function (el) {
21. $(el).stop()
22. }
23. })

18)渐进过渡

1. <div id="example-1">
2. <input v-model="query">
3. <ul>
4. <li v-for="item in list | filterBy query" transition="staggered" stagger="100">
5. {{item.msg}}
6. </li>
7. </ul>
8. </div>

1. #example-1{
2. width:200px;
3. margin:20px auto;
4. font-size:14px;
5. color:#ff6600;
6. }
7. ul {
8. padding-left: 0;
9. font-family: Helvetica, Arial, sans-serif;
10. }
11. .staggered-transition {
12. transition: all .5s ease;
13. overflow: hidden;
14. margin: 0;
15. height: 25px;
16. }
17. .bounceInLeft, .bounceOutRight {
18. opacity: 0;
19. height: 0;
20. }

1. var exampleData={
2. query: '',
3. list: [
4. { msg: 'Bruce Lee' },
5. { msg: 'Jackie Chan' },
6. { msg: 'Chuck Norris' },
7. { msg: 'Jet Li' },
8. { msg: 'Kung Fury' }
9. ]
10. };
11. var exampleVM = new Vue({
12. el:'#example-1',
13. data:exampleData,
14. transitions:{
15. staggered:{
16. enterClass:'bounceInLeft',
17. leaveClass: 'bounceOutRight'
18. }
19. }
20. });
21. /*    exampleVM.transition('stagger', {
22. stagger: function (index) {
23. // 每个过渡项目增加 50ms 延时
24. // 但是最大延时限制为 300ms
25. return Math.min(300, index * 50)
26. }
27. })*/

19)组件

1. <div id="example">
2. <my-component></my-component>
3. </div>

1. //定义
2. /*var myComponent=Vue.extend({
3. template:'<div>A custom component!</div>'
4. });*/
5. //注册
6. //Vue.component('my-component',myComponent);
7. //在一个步骤中定义与注册
8. Vue.component('my-component',{
9. template:'<div>A custom component!</div>'
10. });
11. //创建根实例
12. new Vue({
13. el:'#example'
14. });

20)组件局部注册

1. <div id="example">
2. <parent-component></parent-component>
3. </div>

1. //定义
2. /*var Child=Vue.extend({
3. template:'<div>A child component!</div>'
4. });*/
5. var Parent=Vue.extend({
6. template:'<div>A parent component!<my-component></my-component></div>',
7. components:{
8. // <my-component> 只能用在父组件模板内
9. 'my-component':{
10. template:'<div>A child component!</div>'
11. }
12. }
13. });
14. // 注册父组件
15. Vue.component('parent-component', Parent);
16. //创建根实例
17. new Vue({
18. el:'#example'
19. });

21)使用props传递数据

1. <div id="example" class="demo">
2. <input type="text" v-model="parentMessage"/><br>
3. <child v-bind:my-message="parentMessage"></child>
4. <!-- 双向绑定 -->
5. <child :msg.sync="parentMessage"></child>
6. <!-- 单次绑定 -->
7. <child :msg.once="parentMessage"></child>
8. </div>

1. .demo{
2. border: 1px solid #eee;
3. border-radius: 2px;
4. padding: 25px 35px;
5. margin-bottom: 40px;
6. font-size: 1.2em;
7. line-height: 1.5em;
8. }

1. new Vue({
2. el:'#example',
3. data:{
4. parentMessage:'Message from parent'
5. },
6. components:{
7. child:{
8. props:['myMessage'],
9. template:'<span>{{myMessage}}</span>'
10. }
11. }
12. });

22)prop验证

1. <div id="example" class="demo">
2. <child></child>
3. </div>

1. .demo{
2. border: 1px solid #eee;
3. border-radius: 2px;
4. padding: 25px 35px;
5. margin-bottom: 40px;
6. font-size: 1.2em;
7. line-height: 1.5em;
8. }

1. new Vue({
2. el:'#example',
3. components:{
4. child:{
5. props: {
6. // 基础类型检测 （`null` 意思是任何类型都可以）
7. propA: Number,
8. // 多种类型 (1.0.21+)
9. propM: [String, Number],
10. // 必需且是字符串
11. propB: {
12. type: String,
13. required: true
14. },
15. // 数字，有默认值
16. propC: {
17. type: Number,
18. default: 100
19. },
20. // 对象/数组的默认值应当由一个函数返回
21. propD: {
22. type: Object,
23. default: function () {
24. return { msg: 'hello' }
25. }
26. },
27. // 指定这个 prop 为双向绑定
28. // 如果绑定类型不对将抛出一条警告
29. propE: {
30. twoWay: true
31. },
32. // 自定义验证函数
33. propF: {
34. validator: function (value) {
35. return value > 10
36. }
37. },
38. // 转换函数（1.0.12 新增）
39. // 在设置值之前转换值
40. propG: {
41. coerce: function (val) {
42. return val + ''; // 将值转换为字符串
43. }
44. },
45. propH: {
46. coerce: function (val) {
47. return JSON.parse(val); // 将 JSON 字符串转换为对象
48. }
49. }
50. },
51. template:'<span>hello world!</span>'
52. }
53. }
54. });

23)父子组件通信

1. <!--子组件模板-->
2. <template id="child-template">
3. <input type="text" v-model="msg"/>
4. <button type="button" v-on:click="notify">派发事件</button>
5. </template>
6. <!--父组件模板-->
7. <div id="events-example" class="demo">
8. <p>Messages:{{ messages | json }}</p>
9. <child v-on:child-msg="handleIt"></child>
10. </div>

1. .demo{
2. border: 1px solid #eee;
3. border-radius: 2px;
4. padding: 25px 35px;
5. margin-bottom: 40px;
6. font-size: 1.2em;
7. line-height: 1.5em;
8. }

1. // 注册子组件,将当前消息派发出去
2. Vue.component('child',{
3. template:'#child-template',
4. data:function(){
5. return {msg:'hello'}
6. },
7. methods:{
8. notify:function(){
9. if(this.msg.trim()){
10. this.$dispatch('child-msg',this.msg);
11. this.msg='';
12. }
13. }
14. }
15. });
16. // 初始化父组件,收到消息时将事件推入一个数组
17. var parent=new Vue({
18. el:'#events-example',
19. data:{
20. messages:[]
21. },
22. methods:{
23. handleIt:function(msg){
24. this.messages.push(msg);
25. }
26. }
27. // 在创建实例时 `events` 选项简单地调用 `$on`
28. /*events:{
29. 'child-msg':function(msg){
30. this.messages.push(msg);
31. }
32. }*/
33. })

24)自定义指令-基础

1. <div id="demo" v-demo:hello.a.b="msg"></div>

1. Vue.directive('demo', {
2. bind: function () {
3. console.log('demo bound!')
4. },
5. update: function (value) {
6. this.el.innerHTML =
7. 'name - '       + this.name + '<br>' +
8. 'expression - ' + this.expression + '<br>' +
9. 'argument - '   + this.arg + '<br>' +
10. 'modifiers - '  + JSON.stringify(this.modifiers) + '<br>' +
11. 'value - '      + value
12. }
13. });
14. var demo = new Vue({
15. el: '#demo',
16. data: {
17. msg: 'hello!'
18. }
19. })

25)自定义指令-高级选项

1. <div id="demo" >
2. <!--对象字面量-->
3. <div v-demo-1="{ color: 'white', text: 'hello!' }"></div>
4. <!--字面修饰符-->
5. <div v-demo-2.literal="foo bar baz"></div>
6. <!--元素指令-->
7. <my-directive></my-directive>
8. <!--高级选项-params-->
9. <div v-example a="hi"></div>
10. </div>

1. Vue.directive('demo-1', function(value){
2. console.log(value.color);
3. console.log(value.text);
4. });
5. Vue.directive('demo-2',function(value){
6. console.log(value);
7. });
8. Vue.elementDirective('my-directive',{
9. bind:function(){
10. console.log(this.el);
11. }
12. });
13. Vue.directive('example',{
14. params:['a'],
15. bind:function(){
16. console.log(this.params.a);
17. }
18. });
19. Vue.directive('two', {
20. twoWay: true,
21. bind: function () {
22. this.handler = function () {
23. // 将数据写回 vm
24. // 如果指令这样绑定 v-example="a.b.c"
25. // 它将用给定值设置 `vm.a.b.c`
26. this.set(this.el.value)
27. }.bind(this);
28. this.el.addEventListener('input', this.handler);
29. },
30. unbind: function () {
31. this.el.removeEventListener('input', this.handler)
32. }
33. });
34. vm=new Vue({
35. el: '#demo'
36. });

26)自定义过滤器

1. <div id="demo" class="demo">
2. <!--基础过滤器-->
3. <span v-text="message | reverse"></span><br>
4. <span v-text="message | wrap 'before' 'after'"></span><br>
5. <!--双向过滤器-->
6. <input type="text" v-model="money | currencyDisplay"/>
7. <p>ModelValue:{{money | currencyDisplay}}</p>
8. <!--动态参数-->
9. <input v-model="userInput"/>
10. <span>{{msg | concat userInput}}</span>
11. </div>

1. .demo{
2. border: 1px solid #eee;
3. border-radius: 2px;
4. padding: 25px 35px;
5. margin-bottom: 40px;
6. font-size: 1.2em;
7. line-height: 1.5em;
8. }

1. Vue.filter('reverse',function(value){
2. return value.split('').reverse().join('');
3. });
4. Vue.filter('wrap',function(value,begin,end){
5. return begin+' '+value+' '+end;
6. });
7. Vue.filter('currencyDisplay',{
8. // model -> view
9. // 在更新 `<input>` 元素之前格式化值
10. read:function(val){
11. return '$'+val.toFixed(2)
12. },
13. // view -> model
14. // 在写回数据之前格式化值
15. write: function(val, oldVal) {
16. var number = +val.replace(/[^\d.]/g, '')
17. return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
18. }
19. });
20. Vue.filter('concat',function(value,input){
21. return value+input;
22. })
23. new Vue({
24. el:'#demo',
25. data:{
26. message:'abc',
27. money:123.45,
28. msg:'hello',
29. userInput:'hi'
30. }
31. });

27)混合

1. <div id="demo" class="demo">
2. </div>

1. .demo{
2. border: 1px solid #eee;
3. border-radius: 2px;
4. padding: 25px 35px;
5. margin-bottom: 40px;
6. font-size: 1.2em;
7. line-height: 1.5em;
8. }

1. var myMixin={
2. created:function(){
3. this.hello();
4. },
5. methods:{
6. hello:function(){
7. console.log('hello from mixin!');
8. }
9. }
10. };
11. // 定义一个组件，使用这个混合对象
12. var Component = Vue.extend({
13. mixins: [myMixin]
14. });
15. var component = new Component();
16. new Vue({
17. el:'#demo'
18. });

28)混合-选项合并

1. <div id="demo" class="demo">
2. </div>

1. .demo{
2. border: 1px solid #eee;
3. border-radius: 2px;
4. padding: 25px 35px;
5. margin-bottom: 40px;
6. font-size: 1.2em;
7. line-height: 1.5em;
8. }

1. var mixin={
2. created:function(){
3. console.log('mixin hook called');
4. },
5. methods: {
6. foo: function () {
7. console.log('foo');
8. },
9. conflicting: function () {
10. console.log('from mixin');
11. }
12. }
13. };
14. var vm=new Vue({
15. el:'#demo',
16. mixins:[mixin],
17. created:function(){
18. console.log('component hook called');
19. },
20. methods:{
21. bar: function () {
22. console.log('bar');
23. },
24. conflicting: function () {
25. console.log('from self');
26. }
27. }
28. });
29. vm.foo();
30. vm.bar();
31. vm.conflicting();//组件优先