二、Vue进阶语法

最新推荐文章于 2023-02-14 12:30:06 发布

飞翔荷兰号

最新推荐文章于 2023-02-14 12:30:06 发布

阅读量152

点赞数

文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/weixin_43374578/article/details/108690070

版权

一、v-bind

1. 变量- 动态绑定

# 1. 图片，网站地址
1. 直接将连接地址写到src中,会将其当做字符串解析
2. 前面加v-bind：会将其当做变量解析，再去对应的Vue模块加载

# 2. 一般v-bind适用于 动态获取的图片及网址

# 3. 语法糖
：

<body>

<div id="first">
    <a href="https://www.baidu.com/">百度一下</a><br>
    <a href="website">百度一下</a><br>
    <a v-bind:href="website">百度一下</a><br>
    <a :href="website">百度一下</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#first",
        data: {
            name: 'erick',
            website: 'https://www.baidu.com/',
        }
    });
</script>
</body>

2. class属性- 动态绑定

用于动态切换元素的一些属性

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind绑定class</title>

    <!--1. 在head中定义多个样式-->
    <style>
        .first {
            color: red;
        }
        .second {
            background: black;
        }
        .third {
            height: 200px;
        }
    </style>
</head>
<body>

<div id="first">
    <!--1. class属性直接解析，再从对应的head中去拿
          可以拿多个style-->
    <h2 class="first second third">{{message}}</h2>

    <!--2. v-bind: 将对应的class当做变量解析，从Vue中去拿结果
              一次只能拿一个结果-->
    <h2 v-bind:class="firstStyle">{{message}}</h2>

    <!--3. class属性和v-bind属性共同起作用: class和 v-bind:class都只能出现一次-->
    <h2 class="second third" v-bind:class="firstStyle">{{message}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#first',
        data: ({
            message: 'erick',
            firstStyle: 'first',
            secondStyle: 'second',
            thirdStyle: 'third',
        })
    })
</script>
</body>
</html>

对象语法

v-bind的特性
通过控制对象属性写法，动态改变对象属性的boolean，实现动态切换属性

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .first {
            color: red;
        }

        .second {
            background: black;
        }

        .third {
            height: 200px;
        }
    </style>
</head>
<body>

<div id="first">

    <!--1.v-bind 引入了 对象语法 {key1:boolean, key2:boolean, key3:boolean}-->

    <!--1.1  key是去head的style中去找，boolean是写死的-->
    <h2 v-bind:class="{first:true,second:true,third:true}">{{ message }}</h2>

    <!--1.2  key是去head中的style中去找,boolean是去vue中去找-->
    <h2 v-bind:class="{first:isFirstStyle,second:isSecondStyle,third:isThirdStyle}">{{ message }}</h2>

    <!--1.3  使用button切换对应的class属性-->
    <button v-on:click="changeColor()">切换颜色按钮</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#first',
        data: ({
            message: 'erick',
            isFirstStyle: true,
            isSecondStyle: true,
            isThirdStyle: true,
        }),
        methods: {
            changeColor: function () {
                this.isFirstStyle = !this.isFirstStyle;
            }
        }
    })
</script>
</body>
</html>

3. style属性-动态绑定

对象语法

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="module">
    <!-- 1.1 原始使用-->
    <h2 style="color: red; background: blue; font-size: 100px">{{message}}</h2>

    <!-- 1.2 v-bind对象属性绑定
                      {key:value, key:value}: 其中key不用解析，value带''是当做常量解析-->
    <h2 v-bind:style="{color:'red',background:'black',fontSize:'100px'}">{{message}}</h2>

    <!-- 1.3 v-bind对象属性绑定
                  {key:value, key:value}: 其中key不用解析，value不带''是当做变量解析-->
    <h2 v-bind:style="{color:finalColor,background:finalBgcolor,fontSize:finalSize}">{{message}}</h2>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: '#module',
        data: ({
            message: 'erick',
            finalColor: 'red',
            finalBgcolor: 'black',
            finalSize: '100px'
        })
    })
</script>
</body>
</html>

二、v-on 事件

1. 基本使用

<body>
<div id="first">
    计数器：{{counter}}<br>
    
    <!--1. v-on简单用法-->
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>

    <!--2. v-on调用函数:如果方法不需要参数，则 v-on对应的()可以省略-->
    <button v-on:click="plus()">+</button>
    <button v-on:click="minus">-</button>

    <!--3. v-on: 的语法糖：@-->
    <button @click="plus">+</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let module = new Vue({
        el: '#first',
        data: {
            counter: 0,
        },
        methods: {
            plus: function () {
                this.counter++;
            },
            minus: function () {
                this.counter--;
            },
        }
    })
</script>
</body>

2. 带参方法

<body>
<div id="first">
    <!--1. 无参方法， ()可省-->
    <button @click="firstFunction()">点击</button>
    <button @click="firstFunction">点击</button>

    <!--2.1 单参方法，调用时不传，打印出是 undefined
        2.2 单参方法，调用时不传，且省略()，
                    打印出是 [object MouseEvent]：即为鼠标的操作-->
    <button @click="secondFunction()">点击</button>
    <button @click="secondFunction">点击</button>

    <!--3 传入两个一般参数：  ' '，常量解析,不带为变量解析-->
    <button @click="thirdFunction('张三','陕西')">点击</button>
    <button @click="thirdFunction(firstName,lastName)">点击</button>

    <!--4. 传入一个一般参数和鼠标参数: $event-->
    <button @click="fourthFunction(firstName,$event)">点击</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let module = new Vue({
        el: '#first',
        data: {
            firstName: '舒',
            lastName: '展',
        },

        methods: {
            firstFunction: function () {
                console.log("无参方法");
            },

            secondFunction: function (name) {
                console.log(name);
            },

            thirdFunction: function (name, address) {
                console.log(name + '---' + address);
            },

            fourthFunction: function (name, event) {
                console.log(name + '---' + event);
            },
        }
    })
</script>
</body>

3. v-on修饰符

<body>
<div id="module">

    <!--1. 事件冒泡及阻止： stop
                   1.1 点击按钮，会冒泡执行两次方法；
                   1.2 点击"舒展"，会执行最上面的方法
                   1.3 阻止冒泡-->
    <div v-on:click="firstOpe()">
        <h2>舒展</h2>
        <button v-on:click="firstOpe()">按钮</button>
    </div>

    <div v-on:click="firstOpe()">
        <h2>舒展</h2>
        <button v-on:click.stop="firstOpe()">按钮</button>
    </div>

    <!--2. 按钮点击只生效一次： once-->
    <button v-on:click.once="firstOpe()">一次性按钮</button>
    <br>

    <!--3. 监听某个键帽的事件：
               3.1 键帽抬起就触发的事件
               3.2 输入后敲回车才触发的事件-->
    <input type="text" v-on:keyup="firstOpe()"><br>
    <input type="text" v-on:keyup.enter="firstOpe()"><br>

    <!--4. 阻止默认事件： prevent>
                      4.1 有些组件会自动触发 相关的事件
                      4.2 在该种组件加入自定义事件后，两个事件都会执行
                      4.3 阻止默认事件的执行-->
    <form action="Demo01.html"> <!--action代表提交到哪里去-->
        <input type="submit" value="提交">
    </form>

    <form action="Demo01.html">
        <input type="submit" value="提交" v-on:click="firstOpe()">
    </form>

    <form action="Demo01.html">
        <input type="submit" value="提交" v-on:click.prevent="firstOpe()">
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let app = new Vue({
        el: "#module",
        data: {
            name: 'Jack Sparrow',
        },

        methods: {
            firstOpe: function () {
                console.log("你好");
            }
        }
    })
</script>
</body>

三、v-for遍历

1. 数组

数组遍历：不带索引
数组遍历：带索引,从0开始
名字随意

<body>

<div id="first">
    <!--  1. 数组遍历： 不带索引  -->
    <ol>
        <li v-for="item in movies">{{ item }}</li>
    </ol>
    <!-- 2. 数组遍历： 带索引,从0开始    -->
    <ol>
        <li v-for="(item_e,index_e) in movies">{{ index_e }} === {{ item_e }}</li>
    </ol>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>

    let firstVue = new Vue({
        el: '#first',
        data: {
            movies: ['lucy', 'jack', 'erick']
        },
    });
</script>
</body>

2. 对象属性

可以获取对象属性，对象值，对象属性的索引

<body>

<div id="first">
    <!-- 1. 对象属性的值    -->
    <ol>
        <li v-for="value_e in student">{{ value_e }}</li>
    </ol>

    <!-- 2. 对象值，对象属性   -->
    <ol>
        <li v-for="(value_e, key_e) in student">{{ key_e }}==={{ value_e }}</li>
    </ol>

    <!-- 3. 对象值，对象属性 ,对象属性的index  -->
    <ol>
        <li v-for="(value_e,key_e,index_e) in student">{{ index_e }}==={{ key_e }}===={{ value_e }}</li>
    </ol>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>

    let firstVue = new Vue({
        el: '#first',
        data: {
            student: {
                name: 'erick',
                age: 20,
                address: 'xian'
            }
        },
    });
</script>
</body>

3. 数组方法-即刻响应

数组的某些方法，调用函数修改后，会立刻相应渲染到页面上
可以在控制台或者直接修改源码

# 1. 数组末尾，可加多个
arr.push('aaa');
arr.push('aaa','bbb','ccc');

# 2. 数组前面，可加多个
arr.unshift('aaa');
arr.unshift('aaa','bbb','ccc');

# 3. 删除最后一个元素
arr.pop();

# 4. 删除第一个元素
arr.shift();

# 5. 整理元素
arr.sort();

# 6. 倒序排列
arr.reverse();

<script>
   let module = new Vue({
       el: '#first',
       data:{
           movies:['雷神','美队','钢铁侠','蚁人'],
       },
       methods:{
           firstOpe:function () {
               this.movies.push('黑豹','蜘蛛侠');
           }
       }
   })
</script>
</body>

4. 数组方法 - 延迟响应

数组索引，进行重新赋值

 <body>
<div id="first">
    <ul>
        <li v-for="movie in movies">{{movie}}</li>
    </ul>

    <button @click=firstOpe()>add one</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    let module = new Vue({
        el: '#first',
        data: {
            movies: ['雷神', '美队', '钢铁侠', '蚁人'],
        },
        methods: {
            firstOpe: function () {
                this.movies[0] = '洛基';
                // 如果和及时响应的函数结合，页面就会重新渲染
                //this.movies.reverse();
                console.log(this.movies);
            }
        }
    })
</script>
</body>

5. v-for 加key

一般v-for是用来遍历集合或者数组
官方建议，在使用v-for时候尽量为每个元素添加和元素对应的key
key一般用对应的到tem，在向数组中间插值时，能够提高效率

<ul>
    <li v-for="movie in movies" :key="movie">{{movie}}</li>
</ul>

四、v-if

1. 基本使用

<body>
<div id="first">
    <!--1. v-if单独使用
                     1.1 布尔值直接使用
                     1.1 否则isShow当做变量来看-->
    <h2 v-if="true">{{name}}</h2>
    <h2 v-if="false">{{address}}</h2>
    <h2 v-if="isShow">{{address}}</h2>

    <!--2. v-if 和 v-else 结合使用
                   2.1 v-else只针对最近的v-if生效-->
    <h2 v-if="isShow">{{name}} ---</h2>
    <h2 v-else>{{address}} ---</h2>

    <!-- 3. v-if, v-else-if, else 结合使用
                  3.1 一般不建议这种复杂逻辑写在html中，通过函数或者计算属性替代-->
    <h2 v-if="score>90">优秀</h2>
    <h2 v-else-if="score>75">良好</h2>
    <h2 v-else-if="score>60">及格</h2>
    <h2 v-else>不及格</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let module = new Vue({
        el: '#first',
        data: {
            name: '舒展',
            address: '陕西',
            isShow: true,
            score: 67,
        },
    })
</script>
</body>

2. 登录切换案例

<body>
<div id="first">
    <!--切换后，用户输入的信息不回被清空-->
    <span v-if="logWithPhone">
        用户手机号 <input type="text" placeholder="请输入手机号码"><br>
    </span>

    <span v-else>
        用户邮箱 <input type="text" placeholder="请输入邮箱"><br>
    </span>
    <button @click="logWithPhone=!logWithPhone">切换登录方式</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let module = new Vue({
        el: '#first',
        data: {
            logWithPhone: true,
        },
    })
</script>
</body>

3.组件复用问题

1. Vue在解析页面元素时候，会先去创建一个虚拟的DOM
2. 发现了两个互斥的，可以复用的两个input组件，所以只会创建一个input
3. 导致问题：切换后，用户在页面输入的东西不会清除
4. 在每个input组件中加上唯一的key即可解决

<span v-if="logWithPhone">
     用户手机号<input type="text" placeholder="请输入手机号码" key="phone"><br>
</span>

五、v-show

 1. v-show： 类似于v-if，决定是否渲染 
    1.1 v-if：如果为false，则直接将该组件在DOM中删除掉
    1.2 v-show： 如果为false，不会删除该组件，只是把他设定为了 display:none
    
    2.1 如果切换次数少，则选择v-if
    2.2 如果频繁切换，则选择v-show

<span v-show="logWithPhone">
    用户手机号 <input type="text" placeholder="请输入手机号码"><br>
</span>

飞翔荷兰号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫