Vue2的基础用法——Vue的指令

今天星期几呢

已于 2023-01-09 16:59:32 修改

阅读量275

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-01-09 16:55:16 首次发布

本文链接：https://blog.csdn.net/shhghvvh/article/details/128559498

版权

本文介绍了Vue2的基础用法，特别是重点讲解了Vue的六种指令：内容渲染、属性绑定、事件绑定、双向绑定、条件渲染和列表渲染。内容包括v-text、v-html的区别，v-bind的使用，v-on及其事件修饰符的应用，v-model的双向绑定及其修饰符，v-show和v-if的条件渲染原理及适用场景，以及v-for的列表渲染，强调了key值的重要性。

摘要由CSDN通过智能技术生成

1.vue基础用法

1.1初步使用vue

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入vue库文件 -->
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 希望Vue能够控制下面的这个div，帮我们在把数据填充到div内部 -->
    <div id="app">
        <p>{
  { message }}</p>
    </div>

    <script>
        //创建vue实例对象
        const vm = new Vue({
            //表示当前要控制页面上的哪个区域，接收的值是一个选择器
            el: '#app',
            //data对象就是要渲染的数据
            data: {
                message: 'Hello Vue.js!'
            }
        })
    </script>
</body>

</html>

1.2体验vue调试工具和数据驱动视图

安装调试工具

Edge：Vue.js devtools - Microsoft Edge Addonshttps://microsoftedge.microsoft.com/addons/detail/vuejs-devtools/olofadcdnkkjdfgjcmjaadnlehnnihnl?hl=zh-CN

Chrome：https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjimejiglipccpnnnanhbledajbpdhttps://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjimejiglipccpnnnanhbledajbpd

1.3vue的指令与过滤器

指令(Directives)是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。
vue中的指令按照不同的用途可以分为如下6大类:
内容渲染指令
属性绑定指令

事件绑定指令

双向绑定指令

条件渲染指令

列表渲染指令

1.3.1内容渲染指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3个:

v-text：会覆盖元素内部原有内容

{ { }} ： vue提供的语法，专门用来解决v-text 会覆盖默认文本内容的问题。这种((}}语法的专业名称是插值表达式（英文名为:Mustache)

v-html：v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素,则需要用到v-html这个指令:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入vue库文件 -->
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 希望Vue能够控制下面的这个div，帮我们在把数据填充到div内部 -->
    <div id="app">
        <!-- 把username的值渲染到p标签 -->
        <p v-text="username"></p>
        <hr>
        <!-- 会覆盖元素内部原有内容 -->
        <p v-text="age">年龄</p>
        <hr>
        <!-- 插值表达式 -->
        <p>性别: {
  { gender }}</p>
        <hr>
        <!-- 可以把包含HTML标签的字符串渲染为页面的HTML元素 -->
        <div v-html="info"></div>
    </div>


    <script>
        //创建vue实例对象
        const vm = new Vue({
            //表示当前要控制页面上的哪个区域，接收的值是一个选择器
            el: '#app',
            //data对象就是要渲染的数据
            data: {
                username: "zhangsan",
                age: 30,
                gender: "男",
                info: '<h2 style="color:aqua;font-weight: bold;">一二三四五六七</h2>'
            }
        })

    </script>
</body>

</html>

1.3.2属性绑定指令

注意:插值表达式只能用在元素的内容节点中ÿ

最低0.47元/天解锁文章

今天星期几呢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2的基础用法——Vue的指令

{{ }} ： vue提供的语法，专门用来解决v-text 会覆盖默认文本内容的问题。vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。指令(Directives)是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令。建议把数据项id属性的值作为key 的值（因为id属性的值具有唯一性)在vue中，可以使用v-bind:指令，为元素的属性动态绑定值;
复制链接

扫一扫

专栏目录