Vue.js介绍以及vue的常见指令

来源：互联网发布：网络盒子全网通编辑：程序博客网时间：2024/05/17 09:20

Vue是一个构建数据驱动的web界面库，vue.js的目标是尽量通过简单的API实现响应的数据绑定和组合的试图组件。

Vue实现的是MVVM的功能

这里写图片描述
一方面，通过ViewModel将Model的数据绑定到View的Dom元素上面，当Model里面的数据发生变化的时候，通过ViewModel里面数据绑定的机制，触发View里面Dom元素的变化；

另一方面，又通过ViewModel来监听View里面的Dom元素的数据变化，当页面上面的Dom元素发生变化的时候，ViewModel通过Dom树的监听机制，触发对应的Model的数据变化。

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>hello Vue</title>    <script src="js/vue.js"></script>    <script src="js/jquery-3.1.1.js" ></script></head><body>    <div id="app">        {{aa}}{{bb}}        <ul >            <li v-for="todo in dos"> {{todo.text}}</li>        </ul>        <input v-model="aa">    </div></body><script>    new Vue({        el:"#app",        data:{"aa":1,"bb":2,dos:[{text:1},{text:2},{text:3}]}    });    $(function () {        $("#app").css({"color":"red"});    })</script></html>

证明了vue和jquery并不冲突，显示了Vue的基本用法

vue的常用指令

v-text,v-html属性

html代码

    <div id="app">        <h1>编辑姓名<input type="text" v-model="name"></h1>        <h1>学校：<label v-text="school"></label></h1>        <h1>姓名：{{name}}</h1>        <div v-html="age">年龄：{{age}}</div>    </div>

js代码

<script>    var data1={school:"理工大学",name:"赵文娟",age:"<h1>18</h1>"}    var app=new Vue({        el:"#app",        data:data1,    });</script>

这两个指令的绑定都是单向的绑定

V-model指令

这个指令实现了属性绑定，但是必须在data中为他赋初始值
html代码

 <div id="app">        <h1>编辑姓名<input type="text" v-model="name"></h1>        <h1>姓名：{{name}}</h1>       <h2>备注:编辑备注<textarea v-model="Remark"></textarea></h2>          <h2>备注：{{Remark}}</h2>        <input type="checkbox" value="篮球" id="basketball" v-model="hooby">        <label for="basketball"> 篮球 </label>        <input type="checkbox" value="足球" id="football" v-model="hooby">        <label for="football"> 足球 </label>        <input type="checkbox" value="跳绳" id="skip" v-model="hooby">        <label for="skip"> 跳绳 </label>        <h2>爱好：{{hooby}}</h2>        <h2>户籍:{{Huji}}</h2>        <select v-model="Huji">            <option >山西</option>            <option >天津</option>            <option >北京</option>        </select>    </div>

js代码

 var data1={school:"理工大学",name:"赵文娟",age:"<h1>18</h1>",Remark:"三好学生",hooby:[],Huji:""}    var app=new Vue({        el:"#app",        data:data1,    });

实现了为input、textArea、checkbox、下拉菜单的数据绑定

v-if和v-else

一般来说这两个指令是一起出现的

    <div id="app">       <h1>年龄<span v-if="Age>18">大人</span><span v-else>小孩</span></h1>    </div>

js代码

  var data1={Age:13};    var app=new Vue({        el:"#app",        data:data1,    });

当然也可以只使用v-if指令

v-show指令

v-show实现的功能是将某一个元素显示或者不显示
通过v-if也可以实现这个功能

v-for指令

通常用于循环的显示一个列表
html代码

    <div id="app">     <ul>         <li v-for="todo in todos">{{todo.text}}</li>     </ul>    </div>

js代码

 var data1={todos:[{text:"aaa"},{text:"bbb"},{text:"ccc"}]};    var app=new Vue({        el:"#app",        data:data1,    });

使用v-for实现json数据的绑定

   <div id="app">     <ul>         <li v-for="todo in todos">年龄：{{todo.name}},年龄：{{todo.age}}</li>     </ul>    </div>

js代码

  var data1={todos:[{name:"赵文娟",age:121},{name:"赵文娟",age:121}]};    var app=new Vue({        el:"#app",        data:data1,    });

在v-for里面使用来渲染多个元素块
结合bootstrap实现分页的按钮
html代码

 <div id="app">     <ul class="pagination ">       <template v-for="page in pages">           <li v-if="page==1" class="disabled"><a href="#">上一页</a></li>           <li v-if="page==1" class="active"><a href="#">1</a></li>           <li v-else><a href="#">{{page}}</a></li>           <li v-if="page==pages"><a href="#">下一页</a></li>       </template>     </ul>    </div>

js代码

    var data1={pages:10};    var app=new Vue({        el:"#app",        data:data1,    });

v-once指令

表示只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过

 <div id="app">        <h1 v-once>{{message}}</h1>    </div>

js代码

  var data1={message:"sasa"};    var app=new Vue({        el:"#app",        data:data1,    });

如果没有v-once指令的话，在控制台的改变会改变具体的message的内容，但是经过v-once指令的修饰以后，控制台不会动态的改变message的内容

v-bind指令

用来绑定class和style的值

    <div id="app">        <h1 v-bind:class="{red:isred}">{{message}}</h1>    </div>

js代码

   var data1={isred:true,message:"sasa"};    var app=new Vue({        el:"#app",        data:data1,    });

v-on指令用来绑定标签的事件

绑定标签的事件

    <div id="app">        <button v-on:click="dd">点我会输出1</button>    </div>

js代码

   var app=new Vue({        el:"#app",        methods:{            dd:function () {                console.log(11);            }        }    });

0 0