Vue.js介绍以及vue的常见指令_vue指令是什么-优快云博客

本文详细介绍了Vue.js的基本概念及其实现原理，并通过具体示例展示了Vue.js中的常见指令，如v-text、v-model、v-if等的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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);
            }
        }
    });