Vue.js基础之小栗子（上）

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与css绑定

   .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. 列表渲染

  ul{          list-style: none;          width: 150px;      }      .divider{          height: 2px;          background-color: #00f;      }      span{          padding: 0 2px;      }  

<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>  

 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();          }      }  });