vue常见指令

已于 2023-06-26 16:53:20 修改
阅读量239 收藏
点赞数
分类专栏： vue 文章标签： vue 常见指令
于 2020-04-22 21:56:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/low666/article/details/105692665
版权

vue常见指令

vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令。

Vue.js 使用了基于 HTML 的模板语法，最简单的使用vue的方式是渲染数据，渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。

1.v-html

双大括号语法无法渲染HTML标签，需要使用v-html。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
</head>
<body>
    <div id="app">
        <div v-html="vue"></div>
    </div>

    <script src="vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                vue: '<h1>Hello Vue!</h1>'
            }
        })
    </script>

</body>
</html>

2.v-text

类似双大括号语法渲染数据的另一种方式是使用v-text。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
</head>
<body>
    <div id="app">
        <div v-text="name"></div>
    </div>

    <script src="vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "builder"
            }
        })
    </script>

3.v-for

用v-for对数组和对象的渲染方式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>老师</h2>
        <ul>
            <li v-for="item in teacher">{{ item }}</li>
        </ul>
        <h2>学生</h2>
        <ul>
            <li v-for="stu in student">学号：{{ stu.id }}姓名：{{ stu.name}}</li>
        </ul>
    </div>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
               teacher: [
                    "张三",
                    "李四",
                    "王五"
                ],
                student: [
                    {
                        id: "1",
                        name: "sun"
                    },
                    {
                        id: "2",
                        name: "builder"
                    },
                    {
                        id: "3",
                        name: "builder2991"
                    }
                ]
            }
        })
    </script>
</body>
</html>

4.v-if

渲染数据的时候，同样也可以使用条件判断。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-if</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="role == 'sun'">
            <h2>come on sun</h2>
        </div>
        <div v-else-if="role == 'builder'">
            <h2>welcome builder</h2>
        </div>
        <div v-else>
            <h2>sorry</h2>
        </div>
    </div>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                role: "builder"
            }
        })
    </script>
</body>
</html>

5.v-show

与v-if不同，v-show通过样式的display控制标签的显示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-show</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h1 v-show="isShow">Hello Vue!</h1>
    </div>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                isShow: true
            }
        })
    </script>
</body>
</html>

6.v-bind

属性绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <style>
        .active {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <a v-bind:href='link' v-bind:class="{active: isActive}">Github</a>
    </div>
	<script src="vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                link: "https://github.com/sunbuilder",
                isActive: true
            }
        })
    </script>
</body>
</html>

7.v-on

另一个非常重要的指令是v-on，使用v-on可以在标签上面绑定事件，注意vue中多了一个属性methods，是实现具体事件的方式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<body>
    <div id="app">
        <!-- 绑定一个事件-->
        <a v-bind:href='link'
           v-bind:class="{active: isActive}"
           v-on:click="myClick"
           >去百度</a>
        <!--绑定多个事件-->
        <button v-on="{click: myClick,
                       mouseenter: mouseEnter,
                       mouseleave: mouseLeave}">
            点我今晚吃鸡~~~
        </button>
    </div>
    <script src="vue.js"></script>
    <script>
        // 绑定属性，简写冒号：
        let app = new Vue({
            el: "#app",
            data: {
                link: "https://www.baidu.com",
                isActive: false
            },
            methods: {
                myClick: function () {
                    console.log("哈哈哈哈哈哈哈")
                },
                mouseEnter: function () {
                    console.log("come on");
                },
                mouseLeave: function () {
                    console.log("go out");
                }
            }
        })
    </script>
</body>
</html>

8.v-model

修改后的数据能够及时的渲染到模板层，需要获取到数据，可以使用v-mode指令。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>
<body>
    <div id="app">
        <p>请选择你的性别</p>
        <br>
        <input v-model="name"/>
        <p><input type="text" v-model="name"/></p>
        <p>
            <input type="checkbox" value="男" v-model="gender"/>
            <input type="checkbox" value="女" v-model="gender"/>
        </p>
        <br>
        {{ name }}
        {{ gender }}

        <p>请选一本书</p>
        <select name="" id="" v-model="book">
            <option>浪潮之巅</option>
            <option>余生请多指教</option>
            <option>三体</option>
        </select>
        <br>
        {{ book }}

        <p>
            <textarea v-model="article"></textarea>
        </p>
        <br>
        {{ article }}
    </div>
    <script src="vue.js"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "builder",
                gender: [],
                book: [],
                article: "这是一篇文章",
            }
        })
    </script>
</body>
</html>
builder2991
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue入门
sdrfsef的博客
05-10 401
目录 1.Vue数据渲染 1.1数据渲染的几种方式与对比 2.条件渲染 2.1v-if 2.2v-show 2.3 v-if与v-show的对比 3.v-for渲染数组和对象 4.v-on绑定事件 1.1数据渲染的几种方式与对比 1.差值表达式: {{变量或者表达式 }} 双大括号里边可以写变量名和简单的表达式 例如 : {{name}} {{ num++ }} {{ num<10? "0"+num :num }} <body&gt...
vue常见面试题vue常见面试题
03-14
以下是一些Vue.js常见面试题及其详细解答： 1. **Vue的优点** - 轻量级：Vue的核心库专注于视图层，体积小巧，方便快速加载。 - 易学性：由国人开发，拥有中文文档，学习曲线较平缓。 - 双向数据绑定：简化了...
Vue的官方指令
weixin_42924369的博客
10-08 111
Vue的官方指令 插值表达式（{{}}） 内容指令（v-text和v-html） 相同点：都是可以让html标签里的内容变成动态的 不同点：v-text和{{}}相当于innerText不会解析html代码，原样输出。 v-html等价于innerHTML：会解析html代码 对比v-text和插值({{}})表达式 1）、当网络速度慢的时候，插值表达式会在页面上出现 {{}} 的显示，但是指令v-text不会，因为，v-text是自定义属性，最多不做解读。当，标签中的内容全部来自于
从Vue2(2)，面试篇，CSS文本样式值
最新发布
m0_60452141的博客
03-18 946
在上面介绍React中如何绑定变量形式的 Class 和 Style 的过程已经定义了styleDataisHeadclassName这些内部数据。在类组件中是在this.state这个对象中定义数据：复制代码在函数组件的写法中使用useState这个React Hook定义了数据：复制代码个人推荐使用函数形式来开发React组件，可以使用React Hook，来避免去学习 ES6 中 的 class 语法，还有烦人的this指向问题，从而来降低入门难度。关于的React Hook 可以看。
VUE常用指令
weixin_30522095的博客
11-07 65
Vue.js常用指令 vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令。本文详细介绍了vue.js的常用指令。 vue.js常用指令 Vue.js使用方式及文本插值 Vue.js 使用了基于 HTML...
VUE 常见指令
qq_51386142的博客
06-07 256
指令：包含简单DOM操作功能的组件Vue中提供自己的内建指令、也可根据实际情况自定义指令指令格式：v-名称 固定语法格式一、v-text名称：文本渲染指令描述：输出指令表达式对应的数据，数据中的html标签按照文本输出 html内容 js内容 二、v-html 名称：超文本/富文本渲染指令描述：输出指令对应表达式的数据，数据中的html标签按照html输出，渲染解释并执行代码！！注意：该指令在实际使用时，数据一般为完全安全的数据，可能会造成xss漏洞 html内容 js内容 三、v
vue常见指令缩写
xiaozaq的博客
08-10 96
v-bind:placeholder 与 :placeholder 等价。注意双引号里面是data中的变量名称，不是实际的值。
vue常见指令及其用法
m0_51134729的博客
03-21 2547
v-show\v-if\v-else-if\v-else <template> <div>在 Vue 中提供两种指令：一种是内置指令，另一种是自定义指令。所有的指令都是以 v- 开头的。</div> <div>v-show 指令是用于显示或隐藏元素，它是以 style 样式的方式来实现的。</div> <div>v-if 指令也是用于根据条件表达式来带有条件的渲染。如果条件为假，那么页面中将不会渲染当前的元素。&
vue常用指令
jayLog的博客
01-29 2万+
vue2.x的常用指令。篇幅简短，易懂
vue常见指令以及自定义指令
m0_62785037的博客
07-24 320
v-html指令能够解析v-text不能解析的（安全性问题1在网页上动态渲染任意HTML是很危险的，容易遭受xss攻击。安全性问题2可信内容使用v-html）v-cloak指令是当Vue实例创建成功并接管容器时，自动销毁该属性。自定义指令(函数)中第一个参数是dom元素，第二个是对象。v-once指令是初次动态渲染页面就成变成了静态内容。v-text指令直接替换元素里面的内容。v-pre指令跳过编译过程。............
vue的基本用法与常见指令
10-19
Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。接下来通过本文给大家介绍vue的基本用法与常见指令，感兴趣的朋友一起看看吧
Vue自定义指令写法与个人理解
10-17
在Vue中，预定义了一些内置指令，如v-if、v-else、v-for等，用于条件渲染、循环遍历等常见任务。然而，Vue也允许开发者自定义指令，以满足特定需求。 Vue自定义指令的创建主要是通过`Vue.directive()`函数来完成。...
2019vue常用指令.rar
07-17
6. **v-model**：实现双向数据绑定，常见于表单元素，如`<input>`，使得输入框的值与Vue实例的数据同步。 7. **v-ref**：用于获取或引用Vue实例，常用于自定义组件，创建一个在Vue实例上的引用，方便在Vue实例中...
vue自定义指令合集 vue2.0版本
12-17
一个常见的自定义指令示例是创建一个聚焦输入框的指令： ```javascript Vue.directive('focus', { inserted: function (el) { el.focus() } }) // 使用 ``` 当这个输入框被插入到DOM时，它将自动获得焦点。 #...
Vue3.0和Vue2.0的区别
热门推荐
low666的博客
11-01 7万+
Vue3.0和Vue2.0的区别 默认进行懒观察（lazy observation）。 在 2.x 版本里，不过数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。 更精准的变更通知。 比例来说：2.x 版本中，你使用 Vue.set 来给对象新增一个属性时，这...
vue-cli中mock本地json数据踩雷：报错404 （GET http://localhost:8080/goods 404 (Not Found) ）
low666的博客
09-16 1万+
标题vue-cli中mock本地json数据踩雷：报错404 运用vue的脚手架进行了项目的搭建，想要通过json文件模拟后台传输数据，结果一直报错：404，经过不断的查找资料和调试终于找到问题的所在。 想通过本地的json文件进行数据的请求，首先要建立一个goods.json的文件，进行数据储存。 { "status":"0", "msg":"", "result":[ {...
vue之实现列表的渲染，增加，删除和查询
low666的博客
03-05 8288
vue之实现列表的渲染，增加，删除和查询 1.列表的渲染 首先创建 Vue 实例，得到 ViewModel，然后在列表中渲染数据 <tbody> <tr v-for="item in list" :key="item.id"> <td>{{ item.id }}</td> <td v-t...
什么是MVVM，MVC和MVVM的区别，MVVM框架VUE实现原理
low666的博客
03-31 1988
什么是MVVM，MVC和MVVM的区别，MVVM框架VUE实现原理 Mvvm定义 MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。 【模型】指的是后端传递的数据。 【视图】指的是所看到的页面。 【视图模型】mvvm模式的核心，它是连接view和model的桥梁。 它有两个方向： 一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值