vue.js（一）

1.作用：仅仅需要提供数据，以及要绑定的元素的id,就可以把一个 json对象的数据，显示到一个元素上去。

//链接vue.min.js
<script src="http://how2j.cn/study/vue.min.js"></script>
 
<div id="div1">{{gareen.name}}</div>
  
<script>  
//准备数据
var gareen = {"name":"盖伦","hp":616}; 
//通过vue.js 把数据和元素关联起来
new Vue({
      el: '#div1',
      data: {
        message: gareen
      }
    })  
</script>

2.点击事件

<div id="div1"> 
  <div>一共点击了  {{clickNumber}}次</div> 
  <button @click="count">点击</button>  
</div>
   
<script>  
new Vue({
      el: '#div1',
      data: {
          clickNumber:0
      },
      methods:{
          count: function(){
              this.clickNumber++;
          }
      }
    })   
</script>

3.循环

<div id="div1">   
    <table align="center" >
        <tr>
            <td>name</td>
            <td>hp</td>
       </tr>
         
        <tr v-for="hero in heros">
            <td>{{hero.name}}</td>
            <td>{{hero.hp}}</td>
        </tr>       
    </table> 
</div>

<script> 
var data = [
          {name:"盖伦",hp:341},
          {name:"提莫",hp:225},
          {name:"安妮",hp:427},
          {name:"死歌",hp:893}
    ];
new Vue({
      el: '#div1',
      data: {
          heros:data
      }
    })
 </script>

4.绑定属性值

<div id="div1">
    <a v-bind:href="page">http://12306.com</a>
</div>
    
<script>  
new Vue({
      el: '#div1',
      data:{
          page:'http://12306.com'
      }
    })    
</script>

5.将视图上传来的数据放到Vue对象上去

<div id="div1">  
    <table align="center" >
        <tr class="firstLine"><td>视图类型</td><td>输入数据</td><td>绑定到Vue上的数值</td>
        </tr>
               
        <tr>
            <td>
                文本
            </td>
            <td>
            	//将客户输入的数据先传到vue对象中的数据然后在显示
                <input v-model.lazy="input1" placeholder="输入数据">
            </td>
            <td>
                <p>{{ input1 }}</p>   
            </td>
        </tr>
    </table>
</div>
     
<script>   
new Vue({
      el: '#div1',
      data: {
          input1:''     
      }
    })    
</script>

6.计算computed

<div id="div1">     
    <table align="center" >
        <tr class="firstLine"><td>人民币</td><td>美元</td></tr>  
            
        <tr>
            <td align="center" colspan="2">
            汇率： <input type="number" v-model.number="exchange" />
            </td>
        </tr>
         
        <tr>
          <td align="center">
                ￥: <input type="number" v-model.number = "rmb"  />
          </td>
          <td align="center">
                $: {{ dollar }}
          </td>
        </tr>
    </table>  
</div>
      
<script>    
new Vue({
      el: '#div1',
      data: {
          exchange:6.4,
          rmb:0
      },
      computed:{
          dollar:function() {
              return this.rmb / this.exchange;
          }
      }
    })     
</script>

7.过滤器filter

<div id="div1">
   <table align="center" >
   		<tr class="firstLine"><td>输入数据</td> <td>过滤后的结果</td></tr>    
   		  
        <tr>
            <td align="center">
                <input v-model= "data"  />
            </td>
            <td align="center">
                {{ data|capitalize }}
            </td>
        </tr>
    </table>  
</div>
      
<script>
Vue.filter('capitalize', function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
      el: '#div1',
      data: {
          data:''
      }
    })      
</script>

8.组件模板

<div id="div1">
    <product v-for="item in products" v-bind:product="item"></product>
</div>
 
<script>
Vue.component('product', {
      props:['product'],
      template: '<div class="product" v-on:click="increaseSale">{{product.name}} 销量: {{product.sale}} </div>',
      methods:{
          increaseSale:function(){
              this.product.sale++
          }
      }
    })
 
new Vue({
  el: '#div1',
  data:{
      products:[
                {"name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","sale":"18"},
                {"name":"宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包","sale":"35"},
                {"name":"唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮","sale":"29"}
      ]
  }
})
</script>