vue指令学习

最新推荐文章于 2024-07-22 17:05:48 发布
最新推荐文章于 2024-07-22 17:05:48 发布
阅读量72 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45737653/article/details/104422259
版权

1、el

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<!--
        Vue实例挂载(el)的标签

            使用构造函数创建一个vue对象：
            这个对象作用与哪一个html标签，是通过el属性来挂载的，常用的有id和class挂载方式：
            id挂载:el:"#id"
            class挂载：el:".class"

        Vue中的数据(data)详解
        Vue实例的数据保存在配置属性data中, data自身也是一个对象.
        通过Vue实例直接访问和修改data对象中的数据,及时同步的页面上


 -->

<div id="myDiv1">
    {{msg}}
</div>
<div class="myDiv2">
    {{msg}}
    <hr />
    {{user.name}}今年{{user.age}}性别{{user.sex}}
</div>
<script>
    new Vue({
        el: "#myDiv1",
        data: {msg: "我是id挂载方式"}
    })

    var x = new Vue({
        el: ".myDiv2",
        data: {
            msg: "我是类加载器方式",
            user: {
                name: "隔壁老王",
                age: "20",
                sex: "男"
            },
        },

    })

    // 通过Vue实例直接修改data对象中的数据,及时同步的页面上
    x.user.name="王哈哈";
</script>
</body>
</html>

2.数值双向绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--
        v-model="msg":双向绑定数据
        v-on:click="clickMe"添加点击事件
-->

<div class="myDiv">
    <input type="text" v-model="mssage" v-on:click="click" v->
</div>


<script>
    new Vue({
        el:".myDiv",
        data:{
            mssage:"王哈哈"
        },
        methods:{
            click(){
                alert(this.mssage);
            }
        }
    })
</script>
</body>
</html>

3.js表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--简单表达式  -->
    <h1>{{5+5}}</h1>
    <!-- +:运算，字符串连接 -->
    <h1>{{5+"v5"}}</h1>
    <h1>{{5+"5"}}</h1>
    <h1>{{"5"+"5"}}</h1>
    <!-- -：减法 -->
    <h1>{{"5"-"5"}}</h1>
    <h1>{{5-"5"}}</h1>
    <h1>{{5*5}}</h1>
    <!-- *:乘 -->
    <h1>{{"5"*"5"}}</h1>
    <h1>{{5*"5"}}</h1>
    <!-- / 除-->
    <h1>{{"5"/5}}</h1>
    <h1>{{"5"/"5"}}</h1>
    <h1>{{5/5}}</h1>
</div>

<script>
    var app = new Vue({
        //挂载到id=app元素上
        el:"#app"
    });
</script>

</body>
</html>

4.三目表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{show?"正确":"错误"}}
</div>

<script>
    var app = new Vue({
        //挂载到id=app元素上
        el:"#app",
        data:{
            show:true,
        }
    });
</script>

</body>
</html>

5.字符串操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <!--
            直接使用字符串字面值作为字符串对象
            使用data中的字符串对象
    -->

<div id="app">
    {{"王哈哈"}}<br/>
    {{"王哈哈".length}}<br/>
    {{message.length}}<br/>
    {{message.substring(1,5)}}<br/>
    {{message.substring(2,6).toUpperCase()}}<br/>
</div>

<script>
    var app = new Vue({
        //挂载到id=app元素上
        el:"#app",
        data:{
            message:"王哈哈abc"
        }
    });
</script>

</body>
</html>

6.对象操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

        <!--
                对象操作
               在表达式中可以使用data中定义的对象的各种用法.像使用js对象中的方法和属性一样
        -->

<div id="app">
    <!--有toString格式所以会自动默认toString格式-->
    {{user}}<br/>
    <!--转换为json格式-->
    {{JSON.stringify(user)}}<br/>
    {{user.toString()}}<br/>
    {{user.name}}<br/>
    {{user.age}}<br/>
    {{user.getAge()}}<br/>
</div>
<script>
    var user1 = {
        name: "王哈哈",
        age: 20,
        getAge: function () {
            return this.age;
        },
        toString: function () {
            return "姓名:" + this.name + ",年龄:" + this.age;
        }
    };
    var app = new Vue({
        el: "#app",
        data: {
            user: user1
        }
    });
</script>
</body>
</html>

7.数组操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<!--
        数组操作
        在表达式中可以使用JavaScript数组中的任何语法来操作数组.
-->

<div id="app">
    {{hobbys}}<br/>
    {{hobbys[0]}}<br/>
    {{hobbys.length}}<br/>
    {{hobbys.toString()}}<br/>
    {{hobbys.join("------")}}<br/>
</div>


<script>
    var app = new Vue({
        el: "#app",
        data: {
            hobbys: ["打游戏", "打篮球", '踢足球', "打排球"]
        }
    });
</script>
</body>
</html>

8.v-text指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<!--
      v-text指令
        语法:
        <标签名 v-text="表达式"></标签名>

        作用:
        通过data中的数据更新标签标签中的textContent属性的值.(标签中的文本内容)

        注意事项:
        如果值是html的值,会作为普通的文本使用。
        标签中的属性值必须是data中的一个属性.
-->

<div id="app">
    <span v-text="message"></span><br/>
    <span v-text="user.username"></span><br/>
    <span v-text="message2"></span><br/>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: "<h1>哈哈哈</h1>",
            message2: "哈哈哈",
            user: {
                username: "王哈哈"
            },
        }
    });
</script>
</body>
</html>

9.v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<!--
      v-html指令(重点)
            语法:
               <标签名 v-html="表达式"></标签名>

            作用:
            通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)

            注意事项:
            如果值是html的值,不会作为普通的文本使用,要识别html标签。
            {{表达式}} 可以插入的标签的内容中
            v-text和v-html更改标签中的所有内容
-->

<div id="app">
    <div v-html="message1"></div>
    <div v-html="message2"></div>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            message1: "<h1>哈哈哈</h1>",
            message2: "哈哈哈"
        }
    });
</script>
</body>
</html>

10.v-for指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<!--
            v-for指令(重点)
                    语法:
                    <标签 v-for="元素 in 数据源"></标签>

                      数据源:   数组,
                        元素:   数组中的一个元素,

                      数据源:   对象
                        元素:   对象中的一个属性名

                    <标签 v-for="(元素,索引|键) in 数据源"></标签>
                        当数据源是数组时,  ()的第二个参数值索引
                        当数据源是对象时,  ()的第二个参数值键

                    <标签 v-for="(元素,键,索引) in 对象"></标签>

                    作用:
                    基于数据源多次循环达到多次渲染当前元素.
-->

<div id="app">
    <h1>循环数组</h1>
    <ul>
        <li v-for="hobby in hobbys">{{hobby}}</li>
    </ul>
    <h1>遍历对象</h1>
    <ul>
        <li v-for="value in student">{{value}}</li>
    </ul>

    <h1>索引循环数组</h1>
    <ul>
        <li v-for="(index,hobby) in hobbys">{{index}}--{{hobby}}</li>
    </ul>
    <h1>键值对遍历对象</h1>
    <ul>
        <li v-for="(index,key,value) in student">{{index}}---{{key}}--{{value}}</li>
    </ul>
</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            hobbys : ["打游戏","打篮球","踢足球","打排球"],
            student : {
                name: "王哈哈",
                age: 20,
                sex: "男",
            },
        }
    });
</script>
</body>
</html>

11.v-bind指令

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<!--
            v-bind指令(重点)
                    将data中的数据绑定到标签上,作为标签的属性.

                    语法:
                    为一个标签属性绑定一个值
                    <标签 v-bind:标签属性名字="表达式"></标签>
                    <img v-bind:src=”msg”>
                    简写形式:
                    <标签 :标签属性名字="表达式"></标签>
                    为一个标签绑定一个对象作为该标签的多个属性
                    <标签 v-bind="对象"></标签>

                    注意事项
                    将一个对象键和值作为标签的属性的名字和值时,  在v-bind后不需要指定属性的名字
-->

<div id="app">
    <img v-bind:src="image" v-bind:title = "title"/>

    <!--简写方式-->
    <img :src="image" :title = "title"/>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            image: "1.gif",
            title:"<h1>王哈哈</h1>",
        }
    });
</script>
</body>
</html>

12.v-model指令

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<!--
            v-model 指令(重点)
                    语法:
                    <标签 v-model="表达式"></标签>

                    在表单控件上创建双向绑定
                    表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,
                    当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变. 双向绑定
                    注意事项:
                    如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
                    绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中-回显
                    v-model只作用于以下表单:
                    input  select textarea

                    data中的值是Value的属性值
-->

<div id="app">
    <h1>绑定到type=text的input表单元素</h1>
    姓名:<input type="text" v-model="inputValue"><br/>
    data中的值:{{inputValue}}

    <h1>绑定到type=checkbox的input表单元素</h1>
    打篮球:<input type="checkbox" v-model="checkboxValue"  value="打篮球"><br/>
    踢足球:<input type="checkbox" v-model="checkboxValue"  value="踢足球"><br/>
    data中的值:{{checkboxValue}}


    <h1>绑定到type=radio的input表单元素</h1>
    打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
    踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
    data中的值:{{radioValue}}

    <h1>绑定到textarea的元素</h1>
    个人简介:<textarea v-model="textareaValue"></textarea><br/>
    data中的值:{{textareaValue}}


    <h1>绑定到单选的select的元素</h1>
    技能:<select v-model="skill">
    <option value="java">java</option>
    <option value="php">php</option>
    <option value="python">python</option>
</select><br/>
    data中的值:{{skill}}

</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            inputValue: "初始化的值",
            checkboxValue: ["踢足球"],
            radioValue: "打篮球",
            textareaValue: "王哈哈！！！",
            skill: "php",
        }
    });
</script>
</body>
</html>

13.v-show指令

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<!--
            v-show指令
                    语法:
                       <标签名 v-show="表达式"></标签名>

                    作用:
                       根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
                       当v-show的值为假时,  会在标签的css中添加 display: none :
                    注意事项:
                    当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
                    标签的值会自动转换为boolean类型的值
-->

<div id="app">
    <div v-show="show">1</div>
    <div v-show="score>=90">优秀</div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            "show":true,
            "score":90,
            /*"a":false,
            "score":89,*/
        }
    });
</script>
</body>
</html>

14.v-if指令

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<!--
            v-if指令
                    语法:
                       <标签名 v-if="表达式"></标签名>

                    作用:
                       根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

                    注意事项:
                       当表达式中的值是false时, 是从页面上删除.
                       标签的值会自动转换为boolean类型的值

            v-if指令将页面中的样式删除掉

-->

<div id="app">
    <div v-if="show">你看到我了!</div>
    <div v-if="hidden">你看不到我了!</div>
    <div v-if="score>=90">优秀</div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
           /* "show":true,
            "hidden":true,
            "score":90,*/
            "show":false,
            "hidden":false,
            "score":89,
        }
    });
</script>
</body>
</html>

15.v-else指令

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<!--
            v-else指令
                    语法:
                       <标签名 v-if="表达式"></标签名>
                       <标签名 v-else></标签名>

                    作用:
                       当v-if表达式不成立时, v-else执行.

                    注意事项:
                       该指令必须也v-if搭配起来使用.
                       v-else是一个单独的属性, 该属性是不要赋值的.

-->

<div id="app">
    <div v-if="a">王哈哈！！！</div>
    <div v-else>王嘻嘻！！！</div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            a: true
        }
    });
</script>
</body>
</html>

16.v-else-if指令

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<!--
           v-else-if指令
                语法:
                <标签名 v-if="表达式"></标签名>
                <标签名 v-else-if="表达式"></标签名>
                <标签名 v-else-if="表达式"></标签名>
                <标签名 v-else></标签名>

-->

<div id="app">
    <div v-if="score>=90">优秀!!</div>
    <div v-else-if="score>=60">良好!!</div>
    <div v-else="score<60">不及格!!</div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            score:100
        }
    });
</script>
</body>
</html>
可乐不加冰哦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue指令学习文档
流楚丶格念的博客
03-09 4090
文章目录Vue指令插值表达式Vue基本指令Vue指令之`v-bind`的三种用法Vue指令使用综合案例Vue指令之`v-on`和`跑马灯效果`跑马灯效果跑马灯完整代码Vue指令之`v-on的缩写`和`事件修饰符`事件修饰符：Vue指令之`v-model`实现`双向数据绑定`双向数据绑定案例Vue指令之`v-for`和`key`属性1. 迭代数组案例：循环遍历普通数组案例 ：循环遍历对象数组2. 迭代对象中的属性案例：遍历对象中属性3. 迭代数字案例：迭代数字输出4.for循环中key的使用Vue指令之`v-
简单学习vue指令directive
09-01
在本文中，我们将深入学习Vue指令，特别是`directive`的使用方法。 首先，让我们了解如何注册指令。Vue提供了两种注册指令的方式：全局注册和局部注册。全局注册的指令可以在整个应用中使用，通过`Vue.directive()`...
vue指令学习——vue基本用法
qq_46153157的博客
05-08 1469
vue的基本使用，放心食用哈哈哈哈我会继续努力更新的
vue基本指令学习
u012758488的博客
03-25 1237
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
vue指令的学习
m0_52364694的博客
12-01 616
一、vue指令是什么？有什么用？ vue中的指令本质上一个对象，因此可定义一些函数作为指令的生命周期。当把vue指令绑定到一个组件时，vue会在合适的时机调用指令的生命周期钩子函数。 vue指令可以简化开发步骤，提高开发效率，降低组件耦合度。 二、vue指令的定义与注册 定义指令并导出 import Vue from 'vue' import Loading from './loading.vue' const loadingDirective = { inserted(el,binding)
Vue指令实现原理
05-02 1070
自定义指令是`vue`中使用频率仅次于组件，其包含`bind`、`inserted`、`update`、`componentUpdated`、`unbind`五个生命周期钩子
19 VUE学习：自定义指令
热门推荐
百锦再的博客
05-28 9万+
除了 Vue 内置的一系列指令 (比如v-model或v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。我们已经介绍了两种在 Vue 中重用代码的方式：[组件]和。组件是主要的构建模块，而组合式函数则侧重于有状态的逻辑。另一方面，自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。
Vue的指令学习
qq_50260510的博客
06-07 785
Vue中的指令修饰符
Vue学习心得与总结
2201_75464762的博客
12-28 2367
大二开课，跟老师学+自学，一开始看老师分享的培训课程深入学习，虽然知道学习内容且有计划，但总是学着学着就学不下去（课程冗长没有成就感，知识理论不太好接受，学的蛮难过的），最后，三天打鱼两天晒网。我认识到Vue不仅仅是一种框架，更是一种优秀的工具和理念，在我未来的开发中，我会继续深入学习和实践Vue.js，不断提升自己的能力。通过实际的开发经验，我学会了如何将Vue.js应用于真实的项目中，如何与后端API进行交互，获取和更新数据，以及如何处理用户输入和交互反馈，这些都是学习课程中不能替代的经验。
Vue2.0教程（二） vue指令学习
qq_43682422的博客
04-09 2390
vue的基本使用 1）导入vue.js的script脚本文件 可以前往 https://staticfile.org/ 下载vue.js或者引入在线cdn 也可以前往 https://www.bootcdn.cn/ 下载vue.js或者引入在线cdn 2）在页面中声明一个将要被vue所控制的DOM区域 3）创建vm实例对象（vue实例对象） <body> <!--2.在页面中声明一个将要被vue所控制的DOM区域--> <div id="test">hel
Vue自定义指令与Vue插槽学习
m0_74963840的博客
07-22 1411
vue学习
Vue 自定义指令功能完整实例
10-16
自定义指令允许开发者封装和复用DOM操作，甚至可以模拟出类似Vue指令的行为。在Vue.js中，创建自定义指令需要遵循特定的结构和生命周期。Vue文档中提供了自定义指令的五个钩子函数，分别是： 1. bind：只调用一次，...
Vue.js自定义指令学习使用详解
12-13
自定义指令 自定义指令的注册方法和组件很像，也分全局注册和局部注册，比如注册一个v-focus指令用于在<input>、<textarea>元素初始化时自动获得焦点，共有两种写法： //全局注册 Vue.directive('focus...
Vue学习之常用指令实例详解
12-29
本文实例讲述了Vue常用指令。分享给大家供大家参考，具体如下： 1、创建一个vue实例 vue的一个特点就是数据驱动界面，一旦对js中的数据进行修改，界面中用到数据的地方也会立马做出更改。为了对界面进行操纵，需要先...
源代码-创意互动网站导航（ASP静态版） v1.0.zip
最新发布
08-24
源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip 源代码-创意互动网站导航（ASP静态版） v1.0.zip
java源码资源很不错的Java计算器java源码资源很不错的Java计算器
08-24
java源码资源很不错的Java计算器java源码资源很不错的Java计算器提取方式是百度网盘分享地址
源代码-补单系统 v1.0.zip
08-24
源代码-补单系统 v1.0.zip
java源码资源网络蚂蚁Java版java源码资源网络蚂蚁Java版
08-24
java源码资源网络蚂蚁Java版java源码资源网络蚂蚁Java版提取方式是百度网盘分享地址
数字万用表使用介绍.mp4
08-24
数字万用表使用介绍.mp4
Vue框架学习与常用指令总结
课程重点在于介绍Vue的基本使用方法和内置指令。首先，为了在HTML页面中使用Vue，需要引入Vue.min.js库，这通常通过`<script>`标签完成。例如： ```html <script src="./js/vue.min.js"> ``` 接下来，通过Vue构造...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值