vue的指令-vue的学习之旅

最新推荐文章于 2022-10-06 21:04:23 发布

still water

最新推荐文章于 2022-10-06 21:04:23 发布

阅读量702

点赞数 1

分类专栏：笔记文章标签： js vue

本文链接：https://blog.csdn.net/weixin_43131450/article/details/116855687

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊特性。
指令特性的预期值是：单个 JavaScript 表达式。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
例如 v-on，代表绑定事件。

1.插值表达式

1.1花括号

格式：{{表达式}} 说明：

该表达式支持 JS 语法，可以调用 js 内置函数（必须有返回值）
表达式必须有返回结果。例如 1 +1，没有结果的表达式不允许使用，如：let a = 1 + 1;
可以直接获取 Vue 实例中定义的数据或函数

<body>

    <div id="app">
        <h1>{{name}},is very handsome!!! and got {{100+30}} likes, {{cancel()}}</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //1.声明式渲染
        let vue = new Vue({
            el:"#app",
            data:{
                name:"dengyongqing",
                num:1
            },
            methods: {
                cancel() {
                    return "but he is not my mr right"
                }
            }
        })
    </script>
</body>

页面效果为：
在这里插入图片描述

1.2v-text 和 v-html

可以使用 v-text 和 v-html 指令来替代{{}}
说明：

v-text：将数据输出到元素内部，如果输出的数据有 HTML 代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有 HTML 代码，会被渲染

<body>

    <div id="app">
        <div v-html="element"></div>
        <div v-text="element"></div>
    </div>
    
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //1.声明式渲染
        let vue = new Vue({
            el:"#app",
            data:{
                element:`<span>god is girl</span>`,
            }
        })
    </script>
</body>

效果为：
在这里插入图片描述

1.3v-bind

html 属性不能使用双大括号形式绑定，我们使用 v-bind 指令给 HTML 标签属性绑定值；而且在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。

1.3.1绑定class

<body>

    <div id="app">
        <div v-bind:class="{class1:isActive, class2:isActive2}"></div>
    </div>
    
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //1.声明式渲染
        let vue = new Vue({
            el:"#app",
            data:{
                isActive:true,
                isActive2:true
            }
        })
    </script>
</body>

效果为：
在这里插入图片描述

1.3.2绑定style

v-bind:style 的对象语法十分直观，看着非常像 CSS，但其实是一个 JavaScript 对象。style 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，这种方式记得用单引号括起来) 来命名。例如：font-size–>fontSize

<p v-bind:style="{color:color, size:fontSize}">It is a trap</p>
---省略
    <script>
        //1.声明式渲染
        let vue = new Vue({
            el:"#app",
            data:{
                isActive:true,
                isActive2:true,
                color:"red",
                fontSize:16
            }
        })
    </script>

1.3.3绑定其他任意属性

<div v-bind:user="username"></div>

在这里插入图片描述
v-bind还可以直接缩写成 :bind

1.4v-model

v-text、v-html、v-bind 可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。
接下来学习的 v-model 是双向绑定，视图（View）和模型（Model）之间会互相影响。既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。
目前 v-model 的可使用元素有：

input
select
textarea
checkbox
radio
components
（Vue 中的自定义组件）基本上除了最后一项，其它都是表单的输入项。

<body>

    <div id="app">
        <input type="checkbox" v-model="language" value="Java" />Java<br />
        <input type="checkbox" v-model="language" value="PHP" />PHP<br />
        <input type="checkbox" v-model="language" value="Swift" />Swift<br />
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        //1.声明式渲染
        let vue = new Vue({
            el: "#app",
            data: {
                language: ["Java", "Swift"]

            }
        })
    </script>
</body>

效果为：
在这里插入图片描述

1.5v-on

1.5.1基本使用

v-on 指令用于给页面元素绑定事件。语法： v-on:事件名=“js 片段或函数名”

    <div id="app">
        <!--事件中直接写 js 片段-->
        <button v-on:click="num++">点赞</button>
        <!--事件指定一个回调函数，必须是 Vue 实例中定义的函数-->
        <button v-on:click="decrement">取消</button>
        <h1>有{{num}}个赞</h1>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        //1.声明式渲染
        let vue = new Vue({
            el: "#app",
            data: {
                num:14

            },
            methods: {
                decrement() {
                    this.num--;
                }
            }
        })
    </script>
</body>

1.5.2事件修飾符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

.stop ：阻止事件冒泡到父元素
.prevent：阻止默认事件发生
.capture：使用事件捕获模式
.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once：只执行一次

    <div id="app2">
        <!--阻止默认右击事件-->
        <button v-on:contextmenu.prevent="num++">点赞</button>
        <!--阻止默认右击事件-->
        <button v-on:contextmenu="decrement($event)">取消</button>
        <h1>有{{num}}个赞</h1>
    </div>
    ---
    <script>
    //1.声明式渲染
    let vue = new Vue({
        el: "#app2",
        data: {
            num:100

        },
        methods: {
            decrement(ev) {
                ev.preventDefault();
                this.num--;
            }
        }
    })
</script>

1.5.3按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

    <div id="app3">
        <input type="text" value="no1" v-on:keyup.enter="submit">
        <input type="text"  value="no2" @keyup.enter="submit">
        <h1>有{{num}}个赞</h1>
    </div>

1.6v-for

语法：v-for=“item in items”

items：要遍历的数组，需要在 vue 的 data 中定义好。
item：迭代得到的当前正在遍历的元素

        <ul>
            <li v-for="user in users">
                {{user.name}} - {{user.gender}} - {{user.age}}
            </li>
        </ul>

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：语法：v-for="(item,index) in items"

items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从 0 开始。

v-for 除了可以迭代数组，也可以迭代对象。语法基本类似语法：
v-for=“value in object”
v-for="(value,key) in object"
v-for="(value,key,index) in object"

1 个参数时，得到的是对象的属性值
2 个参数时，第一个是属性值，第二个是属性名
3 个参数时，第三个是索引，从 0 开始

1.7v-if,v-else-if,v-else

v-if，顾名思义，条件判断。当得到结果为 true 时，所在的元素才会被渲染。
v-show，当得到结果为 true 时，所在的元素才会被显示。
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
语法：v-if=“布尔表达式”, v-show=“布尔表达式”

        <ul>
            <li v-for="user in users" v-if="user.gender=='f'">
                {{user.name}} - {{user.gender}} - {{user.age}}
            </li>
        </ul>

still water

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue的指令-vue的学习之旅

什么是指令？指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。例如 v-on，代表绑定事件。1.插值表达式1.1花括号格式：{{表达式}} 说明：该表达式支持 JS 语法，可以调用 js 内置函数（必须有返回值）表达式必须有返回结果。例如 1 +1，没有结果的表达式不允许使用，如：let a = 1 + 1;可以直接获取 Vue 实例中定
复制链接

扫一扫