首页 > 代码库 > vue入门

vue入门

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

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

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

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

首先,先引入vue.js

<script src="http://www.mamicode.com/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="http://www.mamicode.com/添加" v-on:click="add()"/>
//第二种写法:
      //<input type="button" value="http://www.mamicode.com/添加" @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就讲到这里,希望能帮到大家!谢谢

vue入门