vue入门

Posted 2020-09-27

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就讲到这里，希望能帮到大家！谢谢