VUE一些指令的使用

关注

原创最新推荐文章于 2026-06-06 09:03:50 发布 1.3k 阅读 AI 写同款· GEO 优化 ›

vue的使用及绑定和一些vue指令保存界面中所需的所有变量和事件处理函数constvm=newVue({//MVVM框架vm层el'#app',data{//model层name'张超'}methods{}})data{}保存界面中所需的所有变量和初始值；methods{}保存界面中所需的所有事件处理函数；methods中的事件处理函数中，如果要操作data中的变量，必须加this.... 阅读详情

vue简介

官方定义: 渐进式 javascript框架 ====> 简化页面中js操作通俗定义: js框架用来简化页面dom操作,通过使用vue实现页面中复杂功能从而不需要频繁操作dom甚至不需要操作任何dom vue 框架前后端分离基础

特性: MVVM 双向绑定机制 Model数据变化 <----> 视图View

vue优缺点

其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。

Vue.js通过简单的API（应用程序编程接口）提供高效的数据绑定和灵活的组件系统。

Vue.js的特性如下：

　　 1.轻量级的框架（相对而言）

　　 2.双向数据绑定

　　 3.指令

　　 4.插件化

优点：

简单：官方文档很清晰，比 Angular 简单易学。（国内框架，demo，文档多）
1. 快速：异步批处理方式更新 DOM。（同时进行）
  1. 组合：用解耦的、可复用的组件组合你的应用程序。（功能由不同的单个功能组件构成）
    1. 紧凑：~18kb min+gzip，且无依赖。：表达式 & 无需声明依赖的可推导属性 (computed properties)。
      1. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

缺点:

新生儿：Vue.js是一个新的项目，没有angular那么成熟。
1. 影响度不是很大、不支持IE8。
  1. 无成名库

v-text、v-html指令使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
    <div id="app">

        <h1>{{msg}} hello {{msg}} 小陈 {{msg}}</h1>
        <h1 >小陈 <span v-text="msg"></span></h1>
        <h1 v-html="msg"></h1>
        <span v-text="content"></span> <br>
        <span v-html="content"></span>
    </div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//指定vue实例作用范围
        data:{ //用来给vue实例绑定数据
            msg:"hello vue",
            content:"<a href='http://www.baidu.com'>点我查看详细</a>"
        }
    })
</script>

v-text和v-html作用: 用来获取vue实例中data属性声明数据

使用语法: 在哪个标签上获取直接在哪个标签上定义v-text v-html 在v-text="属性名"

{{}} 取值和 v-text 取值区别: 1.{{}}取值不会将标签原始数据清空使用v-text取值清空标签原始数据 {{}}===>这种方式取值插值表达式 2.{{}}取值存在插值闪烁 v-text v-html取值不存在插值闪烁

推荐: 两种方式都可以使用 {{}} 更加灵活

v-text (innerText)、v-html (innerHtml)区别：

v-on指令基本使用

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <button v-on:click="test">vue中事件绑定</button>
    </div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//用来指定vue实例作用范围
        data:{    //用来给vue实例绑定数据
            msg:"hello vue"
        },
        methods:{ //用来vue实例绑定一些列函数 方法
            test : function(){  //定义一个test函数
                alert('vue中test');
            }
        }
    });
</script>

js中事件(event): 事件三要素:

事件源: 发生特定动作html标签 事件: 发生特定动作事件单击事件 onclick ondblclick onmouseover onmouseout keyup keydown .....

监听器: 事件处理程序一般在js中是事件处理函数 function(){}

v-on 指令: 作用: 用来给页面中标签绑定事件用的语法: 在对应标签上使用v-on:事件名="事件处理函数名"

v-if、v-show指令的使用

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h2 name="if" v-if="isShow">{{msg}}</h2>
        <h2 name="show" v-show="isShow">{{msg}}</h2>
    </div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//代表vue实例作用范围
        data:{    //用来vue实例绑定数据
            msg:"hello vue",
            isShow:true
        },
        methods: { //用来给vue实例定义一些列的相关方法

        }
    });
</script>

v-if 、v-show指令作用：用来通过vue方式控制页面中哪些标签展示和隐藏

语法: 控制那个标签显示隐藏直接在那个标签上加入v-if="true|false|逻辑运算表达式" v-show="true|false"

区别: 1.v-if 底层通过控制dom树上元素节点实现页面标签展示和隐藏 dom树 2.v-show 底层通过控制标签css中display属性实现标签展示和隐藏 css样式

使用总结: 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好变化快用v-show 变化慢 v-if

v-for指令使用

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <h3>遍历对象</h3>
        <span v-for="value,key,index in user">   [{{index}} {{key}} {{value}}]  </span>
        <h3>遍历数组</h3>
        <ul>
            <li v-for="item,index in schools">{{index+1}}--- {{item}}</li>
        </ul>

        <h4>遍历数组里面对象</h4>
        <table border="1" width="100%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>工资</th>
                <th>简介</th>
                <th>操作</th>
            </tr>
            <tr v-for="user,index in users"  :key="user.id" >
                <td>{{user.id}}</td>
                <td v-text="user.name"></td>
                <td v-html="user.age"></td>
                <td>{{user.salary}}</td>
                <td>{{user.content}}</td>
                <td><a href="">删除</a><a href="">修改</a></td>
            </tr>
        </table>

    </div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//代表vue实例作用范围
        data:{    //用来vue实例绑定数据
            msg:"hello vue",
            user:{id:21,name:"xiaochen",age:23,salary:23000.23},//定义一个对象
            schools:["河南校区","北京校区","天津校区"],
            users:[
                {id:21,name:"xiaochen",age:23,salary:23000.23,content:"xiaochen是好人"},
                {id:22,name:"xiaoming",age:23,salary:23000.23,content:"xiaoming是一个好奥特曼"},
                {id:23,name:"xiaosan",age:23,salary:23000.23,content:"xiaosan是一个好姑娘"},
            ]
        },
        methods: { //用来给vue实例定义一些列的相关方法

        }
    });
</script>

v-for指令作用: 用来在页面中实现vue中定义数据的遍历语法: 直接在对应标签上加入v-for指令 a.遍历对象: v-for="value,key,index in data中变量名" b.遍历数组: v-for="item(普通类型元素),index in data中变量名" c.遍历数组对象: v-for="item(对象),index in data中变量名" 注意: 在使用v-for 建议尽可能在使用 v-for 时提供 key attribute key属性唯一

v-model指令使用

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <input type="text" v-model="msg">
    </div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//代表vue实例作用范围
        data:{    //用来vue实例绑定数据
            msg:"hello vue111",
        },
        methods: { //用来给vue实例定义一些列的相关方法
        }
    });
</script>

v-bind绑定作用: 用来将html标签的属性进行绑定,交给vue实例管理除了value属性以外所有属性 v-model模型作用: 用来将html标签的value属性进行绑定,交给vue实例管理主要用在表单元素上最能体现双向绑定机制一个指令\ 语法: 在表单元素标签上直接加入 v-model="vue实例中一个变量"

Vue常用7个属性

el属性

用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。

data属性

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

template属性

用来设置模板，会替换页面元素，包括占位符。

methods属性

放置页面中的业务逻辑，js方法一般都放置在methods中

render属性

创建真正的Virtual Dom

computed属性

用来计算

watch属性

watch:function(new,old){}

监听data中数据的变化

两个参数，一个返回新值，一个返回旧值，

v-bind绑定元素（单向绑定）

我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似，但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联，所有东西都是响应式的。我们在控制台操作对象属性,界面可以实时更新

我们还可以使用v-bind来绑定元素特性!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    {{message}}<br>

<!--    v-bind被称为指令-->
<!--    你看到的v-bind等被称为指令。指令带有前缀v-，以表示它们是Vue
提供的特殊特性。可能你已经猜到了，它们会在渲染的DOM上应用特殊的响应式行为。
在这里，该指令的意思是:“将这个元素节点的title 特性和Vue 实例的message属性保持一致”。
-->
    <span v-bind:title="message">
        鼠标悬停查看提示信息
    </span>
</div>
<!--    1.导入vue.min.js  js/vue.js-->
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        //el 元素
        el: "#app",
        //model：数据
        data: {
            message: "hellow vue"
        }
    });
</script>
</body>
</html>

v-if v-else-if v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
<h1 v-if="ok">true</h1>
<h1 v-else>false</h1>
</div><br>
<div id="app2">
    <h1 v-if="type==='a'">A</h1>
    <h1 v-else-if="type==='b'">B</h1>
    <h1 v-else>C</h1>
</div>
<!--    1.导入vue.min.js  js/vue.js-->
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        //el 元素
        el: "#app",
        //model：数据
        data: {
            ok:true
        }
    });
    var vm2 = new Vue({
        //el 元素
        el: "#app2",
        //model：数据
        data: {
            type:'a'
        }
    });
</script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <li v-for="(item,index) in items">
        {{index}}
        {{item.message}}
    </li>
</div>
<!--    1.导入vue.min.js  js/vue.js-->
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        //el 元素
        el: "#app",
        data: {
            items: [
                {message: '杨张宣'},
                {message: '男'},
                {message: '二十一'}
            ]
        }
    });
</script>
</body>
</html>

v-on绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="btn">点 击</button>

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

    var v = new Vue({
        el: '#app',
        data: {
            message: "点击触发成功"
        },
        methods: {
            btn: function (event) {
                console.log(event)
                alert(this.message)
                console.log("vue点击事件");
            }
        }
    })
</script>
</body>
</html>

VUE表单双绑、组件

什么是双向数据绑定

Vue.js是一个 MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化这也算是 Vue.js 的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

为什么要实现数据的双向绑定

在Vue.js中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用的UI控件来说，对于我们处理表单，Vue.js 的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪;局部性数据流使用双向，简单易操作。

在表单中使用双向数据绑定

你可以用v-model指令在表单〈input> , <textarea〉及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
输入<input type="text" v-model="message"> <br>
    性别:<input type="radio" name="sex"  v-model="sex" value="男">男
    <input type="radio" name="sex" v-model="sex" value="女">女<br>
    {{sex}}
    <br>
    下拉菜单
    <select v-model="sele">
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
    选中了{{sele}}
</div>
<script src="js/vue.js"></script>
<script>
    var v=new Vue({
        el:"#app",
        data:{
            message:"杨张宣",
            sex:"男",
            sele:"B"
        }
    })
</script>
</body>
</html>

复选框

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
    
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>
 
 <script src="js/vue.js"></script>
 
<script>
new Vue({
  el: '#app',
  data: {
    checked : false,
    checkedNames: []
  }
})
</script>
</body>
</html>