Vue基础复习(1)Vue2.X核心技术

原创已于 2022-04-02 00:36:18 修改 · 395 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

于 2022-03-08 11:32:41 首次发布

本文深入探讨Vue2.x的核心特性，包括v-model双向绑定、MVVM模型、模板数据绑定、指令（如v-if、v-for、v-once、v-bind等）、计算属性与函数的区别、class和style的元素绑定、事件处理与修饰符，以及表单元素的双向数据绑定。通过实例代码详细解析各项技术的使用和应用场景。

6. class和style的v-bind元素绑定

vue官方文档:VUE

vue2.X核心技术

1. v-model双向绑定事件

npm -y : 出现package.json

npm i vue@2.6.10 :安装vue

<body>

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

    <div id="app">

        <!-- 标签体显示数据： {{xxxxx}} -->

        <h1>helloword,{{msg}}</h1>

        <!-- 表单元素双向数据绑定： v-model -->

        <input type="text" v-model="msg">

    </div>

    <script>

        // 实力化Vue应用程序

        new Vue({

            // el选项： 元素element的缩写，指定被 Vue 管理的 Dom 节点入口（值为选择器 )，必须是一个普通的HTML 标签节点，一般是 div。注意：el的值不能为 html 或 body

            el:'#app',

            data:{

                msg:'Vue.js'

            }

        })

    </script>

</body>

2. vue采用MVVM模型

通过数据驱动视图，把需要改变视图的数据初始化到 Vue中，然后再通过修改 Vue 中的数据，从而实现对视图的更新。

3. 模板数据绑定

可生成动态的HTML页面，页面中使用嵌入 Vue.js 语法可动态生成

{{xxxx}} 双大括号文本绑定

v-xxxx 以v-开头用于标签属性绑定，称为指令

4.指令

(1)v-once一次性插值:通过使用 v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

(2)v-html输出HTML指令

(3)v-bind元素绑定指令：完整格式： v-bind:元素的属性名='xxxx'；缩写格式： :元素的属性名='xxxx'；作用：将数据动态绑定到指定的元素上案例源码：

(4)v-on事件绑定指令：用于监听DOM事件，完整格式： v-on:事件名称="事件处理函数名"；缩写格式： @事件名称="事件处理函数名" 注意： @ 后面没有冒号

body>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <div id="app">
        <h3>1.{{}}双大括号显示文本内容</h3>
        <!-- 文本内容 -->
        <p>{{message}}</p>
        <!-- JS表达式 -->
        <p>{{score + 1}}</p>
        <h3>2.一次性插值</h3>
        <!-- 通过使用   v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新 -->
        <p v-once>{{message}}</p>
        <h3>3.指令输出真正的html内容</h3>
        <p>{{contentHtml}}</p>
        <!-- v-html作用：
        1.输出的内容是html数据，双大括号会将数据以普通文本进行输出，如果要输出真正的html需要使用v-html 
        2.防止xss攻击    -->
        <p>v-html:<span v-html:"contentHtml"></span></p>
        <h3>4.元素绑定召指令</h3>
        <!-- 解析不出来图片 -->
        <img src="imgUrl" alt="">
       <h4> v-bind绑定</h4>
        <img v-bind:src="imgUrl" alt="" width="200">
        <!-- 简写形式 -->
        <img :src="imgUrl" alt="" width="200">
        <a :href="testUrl">跳转</a>
        <br>
        <h4>v-model双向数据绑定</h4>
        <input type="text" value="1" v-model="num">
        <h3>5.事件绑定 v-on</h3>
        <button v-on:click = "add">点击+1</button>
        <!-- 简写 -->
        <button @click = "add">点击+1</button>
    </div>
    <script>
        const vm = new Vue({
            el:"app",
            data:{
                message:"test",
                score:10,
                contentHtml:'<span style = "color:blue">span中带颜色的内容</span>',
                imgUrl:"https://cn.vuejs.org/images/logo.svg",
                testUrl:"https://www.baidu.com",
                num:10,
            },
            methods:{
                add(){
                    console.log("调用了add");
                    // 操作data中数据需要this.
                    this.num++
                }
            },
        })
    </script>
</body>

5. 计算属性和函数的区别

(1)示例1：函数及计算属性的单向绑定计算(函数只支持单向)
<body>

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

    <div id="app">

        数学:<input type="text" v-model="mathScore">

        <br>

        英语:<input type="text" v-model="englishScore">

        <br>

        <!-- v-model调用函数时，函数需要加() -->

        总成绩(函数):<input type="text" v-model="sumScore()">

        <br>

        <!-- 属性调用不需要加小括号 -->

        总成绩(计算属性):<input type="text" v-model="sumScore1">

        <br>

    </div>

    <script>

        new Vue({

            el:"#app",

            data:{

                mathScore:80,

                englishScore:90,



            },

            //函数调用

            methods:{

                sumScore(){

                    return (this.mathScore-0) + (this.englishScore-0);

                    console.log("函数被调用了");

                }

            },

            //定义计算属性

            computed:{

                sumScore1(){

                    return (this.mathScore-0) + (this.englishScore-0);

                    console.log("计算属性被调用了");

                }

            }

            // 区别：函数无论怎么调用都会执行，计算属性只有参与计算属性的值更改的时候才会执行，更大程度上节省缓存。函数没有缓存，每次都会调用，计算属性有缓存，只用计算属性体内参与计算属性的值发生更改的时候才会调用

        })

    </script>

</body>

(2)示例2：计算函数的双向绑定计算 + watch监听器
<body>

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

    <div id="app">

        数学:<input type="text" v-model="mathScore">

        <br>

        英语:<input type="text" v-model="englishScore">

        <br>

        <!-- v-model调用函数时，函数需要加() -->

        总成绩(函数):<input type="text" v-model="sumScore()">

        <br>

        <!-- 属性调用不需要加小括号 -->

        总成绩(计算属性):<input type="text" v-model="sumScore1">

        <br>

        总成绩(计算属性-双向):<input type="text" v-model="sumScore2">

        <br>

        总成绩(监听器):<input type="text" v-model="sumScore3">

        <br>

    </div>

    <script>

        // vm:MVVM模型缩写命名

        const vm = new Vue({

            el:"#app",

            data:{

                mathScore:80,

                englishScore:90,

                sumScore3:0,

            },

            //函数调用

            methods:{

                sumScore(){

                    return (this.mathScore-0) + (this.englishScore-0);

                    console.log("函数被调用了");

                }

            },

            //定义计算属性

            // 区别：函数无论怎么调用都会执行，计算属性只有参与计算属性的值更改的时候才会执行，更大程度上节省缓存。函数没有缓存，每次都会调用，计算属性有缓存，只用计算属性体内参与计算属性的值发生更改的时候才会调用

            computed:{

                sumScore1(){

                    return (this.mathScore-0) + (this.englishScore-0);

                    console.log("计算属性被调用了");

                },

                sumScore2:{

                    get(){

                        return (this.mathScore-0) + (this.englishScore-0);

                    },

                    set(newValue){//Value为更新后的值，被调用说明更新了sumScore2

                        //平均值

                        let avgScore = newValue / 2

                        this.mathScore = avgScore

                        this.englishScore = avgScore

                    }

                }

            },

            //监听器绑定方式1，局部绑定(只在当前vue实例中生效),通过watch选项

            watch:{

                mathScore(newValue,oldValue){

                    this.sumScore3 = (newValue-0) + (this.englishScore-0)

                    //只有数学发生变化时，此监听器调用，属于局部监听

                }

            }

        })

        //监听器绑定方式2，通过vm对象调用

        vm.$watch("englishScore",function(newValue,oldValue){//第一个为监听的属性名，第二个回调函数

            this.sumScore3 = (newValue-0) + (this.mathScore-0)

        })

    </script>

</body>

(3) 总结：1.函数没有缓存，每一次都会被调用； 2.计算属性有缓存，只有当计算属性内的属性值发生变化的时候才会被调用； 3.函数只支持单向绑定； 4.计算属性默认只有get函数，没有set函数，需要手动添加，只支持单向绑定，如果要进行双向，需要手动设置set 属性

6. class和style的v-bind元素绑定

class和style都是元素的属性，都用v-bind处理，其中表达式的结果类型可以是字符串，对象和数组。

(1) class的表达式:字符串:class='activeClass'

对象:class='{active:isActive,error:hasError}'

数组:class='["active","error"]'注意要加上双引号，不然是获取data中的值

(2) style的表达式一般为对象：

：style="{color:activeColor,fontSize:fontSize+'px'}"注意要加上单引号,不然是获取data中的值

body>

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

    <style>

        .active {

            color: blue;

        }



        .delete {

            background-color: yellow;

        }



        .error {

            font-size: 40px;

        }

    </style>

    <!-- 动态变化的,只要在data中改变其中相对应的值即可 -->

    <div id="app">

        <h3>class属性绑定 v-bind:class 或者 :class</h3>

        <p v-bind:class="activeClass">字符串表达式</p>

        <!-- 对象表达式 true显示 false隐藏 -->

        <p :class="{delete:true,error:false}">对象表达式</p><!-- 写死状态-->

        <p :class="{delete:isDelete,error:hasError}">对象表达式</p>

        <!-- 类名动态的处理,取反之后赋值,使其被点击时发生相反状态的改变 -->

        <button @click="hasError=!hasError">对象表达式更改按钮</button>

        <p :class="['active','error']">数组表达式</p>

        <h3>style绑定:v-bind:style 或者 :style</h3>

        <p :style="{color:activeColor,fontSize:fontSize + 'px'}">style样式</p>

    </div>

    <script>

        new Vue({

            el: "#app",

            data: {

                activeClass: "active",

                isDelete: true,

                hasError: true, //可更改

                activeColor: "orange",

                fontSize: 60,

            }

        })

    </script>

</body>

运行效果：

7. v-if和v-show条件渲染

v-if和v-show的比较：

什么时候元素被渲染：(1)v-if：如果初始条件为false则什么也不做，每当条件为真时，都会重新渲染条件元素；(2)v-show不管初始条件为什么，元素总是会被渲染，只是简单的基于CSS进行切换

场景选择：(1)v-if有更高的切换开销(2)v-show有更高的初始渲染开销

因此，需频繁切换时，使用v-show更好，如运行后条件很少改变，使用v-if更好

<body>

    <style>

        .box{

            width: 200px;

            height: 200px;

            background-color: yellow;

        }

    </style>

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

    <div id="app">

        <!-- v-if操作当前盒子是否显示 -->

        <h3>v-if条件渲染</h3>

        <!-- checkbox复选框 v-model双向绑定-->

        <input type="checkbox" v-model="seen">勾选以后显示颜色方框

        <div class="box"v-if="seen"></div>

        <p v-else="seen">颜色方框隐藏</p>

        <h3>v-show 条件渲染</h3>

        <!-- v-show操作当前标签的display属性 -->

        <div class="box" v-show="seen"></div>

    </div>

    <script>

        new Vue({

            el:"#app",

            data:{

            // true初始条件显示,即第一次渲染显示,相反,false不显示

                seen:true

            }

        })

    </script>

</body>

运行显示：

分别为seen:false 及 seen:true

8. v-for列表渲染

(可以用of代替in 作为分隔符)

v-for迭代数组语法：v-for=”(alias,index) in array” alias:数组元素迭代的别名 index：数组索引值从0开始；

v-for迭代对象语法：v-for=”(value,key,index) in Object” value:每个对象的属性值 key:属性名(可选),index:索引值(可选)

注：在遍历对象时，是按Object.keys()的结果遍历，但是不能保证它的结果在不同的JS引擎下是顺序一致的

<body>

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

    <div id="app">

        <h3>1.迭代数组/遍历数组</h3>

        <ul>

            <li v-for="(item,index) in emps" :key="index ">

                编号:{{index}},姓名:{{item.name}},工资:{{item.salary}}

            </li>

        </ul>

        <h3>2.迭代对象/遍历对象</h3>

        <ul>

            <li v-for="(value,key,index) in person">

                第{{index}}个属性:{{key}}---{{value}}

            </li>

        </ul>

    </div>

    <script>

        new Vue({

            el:"#app",

            data:{

                emps:[

                    {name:"小红",salary:100},

                    {name:"小蓝",salary:1000},

                    {name:"小黄",salary:10000},

                    {name:"小绿",salary:100000},

                ],

                person:{

                    name :"小明",

                    age:10,

                    gender:"男"

                }

            }

        })

    </script>

</body>

运行结果：

9.事件处理，事件修饰符及按键修饰符

(1) 事件处理方法：v-on：事件名=”函数名” 或 v-on:事件名=”函数名(参数...)”

缩写为：@事件名=”函数名” 或 @事件名=”函数名(参数...)”

(2) 事件修饰符

.stop阻止单击事件继续传播；.prevent阻止事件默认行为；.once点击事件将只会触发一次

(3) 按键修饰符

v-on:keyup.按键名或者 @keyup.按键名

<body>

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

    <div id="app">

        <h3>1.事件处理 v-on 或 @事件名称</h3>

        <button v-on:click="say">say{{msg}}</button>

        <!-- 简写方式 -->

        <button @click="warn('hello',$event)">warn</button>

        <h3>2.事件修饰符</h3>

        <h5>阻止冒泡</h5>

        <!-- 绑定点击事件 -->

        <div @click="todo">

            <button @click="doThis">单击事件冒泡</button>

        </div>

        <div @click="todo">

            <button @click.stop="doThis">阻止冒泡</button>

        </div>

        <h5>阻止事件的默认行为</h5>

        <!-- 不再跳转 -->

        <a href="https://www.baid.com" @click.prevent="doStop">跳转</a>

        <h5>点击事件只会触发一次</h5>

        <button @click="doOnly">点击事件只会触发一次{{num}}</button>

        <button @click.once="doOnly">点击事件只会触发一次{{num}}</button>

        <h3>按键修饰符</h3>

        <!-- 常见的按键修饰符有：

        .enter  .tab  .delete  .esc

        .space  .up  .down  .left  .right

        -->

        <input type="text" @keyup.esc="keyEsc">

        <input type="text" @keyup.enter="keyEnter">

    </div>

    <script>

        new Vue({

            el:"#app",

            data:{

                num:1,

                msg:"hello test",

            },

            methods:{

                say(event){

                    console.log(this.msg);

                    console.log(event);//可以输出event

                    // console.log(event.target.innerHTML);

                },

                // 函数有多个参数又需要用到原生参数的时候,需要通过$event作为实参传递进来

                warn(txt,event){

                    console.log(txt);

                    console.log(event);//没有再传入$event时输出underfind 传入参数event不能输出 需要传入再输出

                    console.log(event.target.tagName);

                },

                todo(){

                    alert("todo");

                },

                doThis(){

                    alert("doThis");

                },

                doStop(){

                    alert("doStop");

                },

                doOnly(){

                    // alert("doOnly");

                    this.num ++;

                },

                keyEnter(){

                    alert("按键回车")

                },

                keyEsc(){

                    alert("按键Esc")

                },

            },

        })

    </script>

</body>

10. 表单元素双向数据绑定

主要针对类型：text文本 textarea多行文本 radio单选按钮 checkbox复选框 select下拉列表

单像绑定：数据变，视图变；视图变，数据不变

双向绑定：数据变，视图变；视图变，数据不变

body>

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

    <div id="app">

         <!-- @submit.preven阻止提交事件的默认行为，自己定义方法进行提交-->

        <form action="#" @sumbit.prevent="submitform">

            姓名(文本):

            <input type="text" v-model="name">

            <br><br>

            性别(单选按钮):

            <input type="radio" name="sax" value="1" v-model="sex">男

            <input type="radio" name="sax" value="0" v-model="sex">女

            <br><br>

            技能(多选框):

            <input type="checkbox" name="skills" value="java" v-model="skills">JAVA

            <input type="checkbox" name="skills" value="vue" v-model="skills">VUE

            <input type="checkbox" name="skills" value="html" v-model="skills">HTML

            <br><br>

            城市(下拉列表):

            <select name="citys" v-model="city">

                <option v-for="c in citys" :value="c.code">{{c.name}}</option>

            </select>

            <br><br>

            说明(多行文本输入框):

            <textarea v-model="desc" cols="30" rows="10"></textarea>

            <br><br>

            <button type="submit">提交</button>

        </form>

    </div>

    <script>

        new Vue({

            el:"#app",  

            data:{

                name:'',

                sex:1,//1代表男 0代表女

                skills:['vue','html'],//多选属于数组

                citys:[//citys为了遍历option而存在

                    {code:'001',name:"城市1"},

                    {code:'002',name:"城市2"},

                    {code:'003',name:"城市3"},

                ],

                city:'001',//可以默认为空

                desc:'0000000000000',

            },

            methods:{

                submitform(){

                    //处理表单数据

                    // 发送ajax请求

                    console.log(`${this.name}--${this.sex}--${this.skills}--${this.city}--${this.desc}`);

                }

            }

        })

    </script>

</body>

运行效果: 控制台页面双向数据绑定