vue入门

Vue.js是一套构建用户界面的渐进式框架。

Vue只关注图层，采用自底向上增量开发的设计。

通过尽可能简单的API实现响应的数据，绑定和组合的视图组件。

以下Vue案例，是v1.0.26版本

首先，先引入vue.js

<script src="vue.js"></script>

然后写一个div开启vue

<div id="div">
       {{a}}      //和angular一样vue也是用模板标记将数据展示在页面上的
</div>

接着写js

window.onload = function(){

//自定义过滤器：     Vue.filter("todou",function(input){           //小于10的数字前面加上0 , 大于10则返回           return input<10 ? ‘0‘ + input : input;     })
     new Vue({             //定义vue对象
           el:"#div",        //el 是固定的参数，不能改
           data:{            //data:也是固定的参数
               //数据绑定的数据                a:"welcome to Vue",               //循环数据               arr:[1,2,3,4,5,6]，               json:{                   a:‘apple‘,                   o:‘orange‘,                   p:‘pear‘,                   b:‘banana‘               },

//过滤器的数据

str1: ‘welcome to Vue‘,
                  str2: ‘welcome to Vue‘,
                  str3: ‘WELCOME TO VUE‘,
                  arr: [1, 2, 3, 4, 5, 6, 7],

                iNum:1234,

//自定义过滤器                iNum:1,

//转义输出                msg:"<strong>字体加粗</strong>"

           },           //点击事件的数据           methods:{              add:function(){                  //这里的this指向new Vue 中的对象                  this.arr.push(this.arr.length+1);              }           }
     });
}

当然Vue也有数据双向绑定

v-model 来实现数据绑定

结合上面的js来实现

eg:

<input type="text" v-model="a"/>
<p>{{a}}</p>
<p>{{*a}}</p>    //*dataName  *不受数据改变的影响

循环：v-for

结合上文js来实现

<div id="div">
       <div v-for="item in arr">{{item}} {{$index}}</div>  //$index数组中的小方法,可以获取元素的下标
</div>

循环一个json

<div id="div">
     <div v-for="item in json">{{item}}{{$index}}{{$key}}</div>

//另外一种写法     <div v-for="(key,value) in item">{{item}}{{key}}{{value}}</div>

</div> //$index 可以获取下标 $key获取键 

点击事件 v-on:click=""/@click=""

还是结合上文js

//这里用点击按钮往数组里添加元素为例
<div id="div">
      <input type="button" value="添加" v-on:click="add()"/>      //第二种写法：

      //<input type="button" value="添加" @click="add()"/>

<ul> <li v-for="item in arr">{{item}}</li> </ul> </div>

过滤器：

结合上文js

<div id="div">
    {{iNum | currency ‘￥‘}} <br>
    {{str1 | capitalize}}<br>
    {{str2 | uppercase}}<br>
    {{str3 | lowercase}}<br>
    {{arr | limitBy 3}}<br>
</div>

自定义过滤器：

结合上文js

<div id="div">
    {{iNum1 | toDou}}
</div>

转义输出：

<div id="div">
    <!--转义输出-->
    {{{msg}}}
</div>

今天的Vue就讲到这里，希望能帮到大家！谢谢