2.2 Java全栈开发前端+后端（全栈工程师进阶之路）-前端框架VUE3-基础-Vue基本语法

文本渲染指令

文本渲染指令-v-html与v-text

Vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是

合法的HTML，所以能被遵循规范的浏览器和HTML解析器解析。

在前面，我们一直使用的是字符串插值的形式渲染文本，但是除此方法之外，vue还提供了其他几种常见的文本渲

染方式：

v-text：更新元素的innerText
v-html：更新元素的innerHTML

    <div id="app">
        <p v-html="msg"></p>
        <p v-text="msg"></p>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data(){
                return {
                    msg: '<h1>hello</h1>'
                }
            },
        }).mount('#app');
    </script>

在Vue中，我们可以使用{{}}将数据插入到相应的模板中，这种方法是一种文本插值。

使用这种方法，如果网络慢或者JavaScript出错的话，会将{{}}直接渲染到页面中。值得庆幸的是，Vue还提供了v-text和v-html来渲染文本或元素。这样就避免了将{{}}直接渲染到页面中。

属性绑定指令

如果想让html标签中的属性，也能应用Vue中的数据，那么就可以使用vue中常用的属性绑定指令：v-bind

v-bind 指令可以简写为：:

    <div id="app">
        <p v-bind:title="msg">hello</p>
        <!-- v-bind的简写形式 --> 
        <p :title="msg">hello</p>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data(){
                return {
                    msg: 'hello world!'
                }
            },
        }).mount('#app');
    </script>

上面展示的是v-bind的最基本的使用，第一种是完整语法，第二种是缩写方式。

除了将元素的title属性和vue实例的相关字段进行绑定外，还能将其他的属性字段进行绑定，最常见的是对于样式

的绑定，即class和style属性。

绑定样式

使用v-bind指令绑定class属性，就可以动态绑定元素样式了。

    <div id="app">
        <p :class="className">DOM元素的样式绑定</p>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data(){
                return {
                    className: 'one' 
                }
            },
        }).mount('#app');
    </script>
    <style>
        .one{
            color: red;
        }
        .two{
            font-size: 48px;
        }
    </style>

使用对象语法绑定样式

我们可以给v-bind:class 一个对象，也可以直接绑定数据里的一个对象，以动态地切换class。

    <div id="app">
        <p :class="{one:isOne,two:isTwo}">DOM元素的样式绑定</p>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
        el:'#app',
            data(){
                return {
                    isOne: true,
                    isTwo: true
                }
            },
        }).mount('#app');
    </script>
    <style>
        .one{
            color: red;
        }
        .two{
            font-size: 48px;
        }
    </style>

使用三目运算绑定样式

    <div id="app">
        <p :class="userId==1?classNameone:classNametwo">hello world!</p>
    </div>
 
    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data(){
                return {
                    userId:1,
                    classNameone: 'one',
                    classNametwo: 'two',
                }
            },
        }).mount('#app');
    </script>
    <style>
        .one{
            color: red;
        }
        .two{
            font-size: 48px;
        }
    </style>

直接绑定内联样式

    <div id="app">
        <p :style="{color:colorValue,fontSize:fontSizeValue}">hello world!</p>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data(){
                return {
                    colorValue: 'orange',
                    fontSizeValue: '50px'
                }
            },
        }).mount('#app');
    </script>

注意：绑定style属性后，样式的书写要遵循javaScript规范。

同时要使用对象的形式加上{}

也就是将 xxx-xxx 改写成驼峰命名方式 xxxXxxx

事件处理指令

事件绑定

我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法。

v-on指令可以简写为：@

 <div id="app">
         <!-- pointme就是点击事件的处理函数 --> 
        <button v-on:click="pointme">点击</button>
        <!-- v-on指令的简写 -->
        <button @click="pointme">点击</button>
        <!-- 焦点失去事件 -->
        <input type="text" @blur="blurEvent">
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data(){
                return {
                    
                }
            },
            //methods:此处声明Vue方法 
            methods:{
                pointme(){
                //在控制台输出hello 
                    console.log('hello');
                },
                blurEvent(){
                    console.log('焦点失去了');
                }
            }
        }).mount('#app');
    </script>

事件处理指令-事件处理的参数

事件处理时还可以传递参数。比如下面的案例：对一个数进行加减运算

    <div id="app">
        {{num}}
        <!-- 第一种写法 -->
        <button v-on:click="add">加</button>
        <button @click="subtract">减</button>
        <!-- 第二种优化写法 ()中的参数代表每次+2或-2-->
        <button v-on:click="change(2)">加</button>
        <button @click="change(-2)">减</button>
        <!-- 第三种写法 ()中传多个参数使用,分开-->
        <button v-on:click="change1(2, 10)">加</button>
        <button @click="change1(-2, 10)">减</button>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data(){
                return {
                    num: 0
                }
            },
            methods:{
            //第一种写法的事件处理逻辑 
                add(){
                    this.num++;
                },
                subtract(){
                    this.num--;
                },
            //第二种优化写法的事件处理逻辑 
                change(value){
                    this.num += value;
                },
            //第三种写法的事件处理逻辑 
                change1(value, param){
                    this.num += value;
                }
            }
        }).mount('#app');
    </script>

样式切换实例

<div id="app">
    <p :class="className" @click="change">hello world!</p>
</div>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {
                className: 'one'
            }
        },
        methods:{
            change(){
                this.className = this.className=='one'?'two':'one';
            }
        }
    }).mount('#app');
</script>
<style>
    .one{
        color: red;
    }
    .two{
        color: blue;
    }
</style>

事件对象

我们在学习JavaScript时知道，事件处理时会有一个事件对象。事件对象代表事件的状态，比如事件在其中发生的

元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

在Vue的事件处理中，也可以使用 $event 的形式给事件处理函数传递事件对象。

 <div id="app">
        {{num}}
        <button v-on:click="change(3,$event)">加</button>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data(){
                return {
                    num: 0
                }
            },
            methods:{
                change(value,event){
                    this.num += value;
                    console.log(event);
                    console.log(event.target);
                }
            }
        }).mount('#app');
    </script>

注意：如果只传递事件对象这一个参数时，也可以这样简写 v-on:click="add" ，也就是不加小括号时，默认传递一个事件对象参数。

事件修饰符

我们还知道，在JavaScript中可以使用 event.preventDefault() 或 event.stopPropagation() 等来阻止事件冒泡，或

者阻止浏览器默认行为。那么Vue也提供了这样的功能，叫做事件修饰符。

<div id="app">
    <div class="div1" @click="div1Event" @contextmenu.prevent>
        <div class="div2" @click.stop="div2Event"></div>
    </div>
</div>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {
                num: 0
            }
        },
        methods:{
            div1Event(){
                console.log('div1点击事件');
            },
            div2Event(){
                console.log('div2点击事件');
            }
        }
    }).mount('#app');
</script>
<style>
    .div1{
        width: 200px;
        height: 200px;
        background-color: red;
    }
    .div2{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>

条件渲染指令

条件渲染指令，可以根据条件判断，来设置元素的显示与隐藏。

v-if指令与v-show指令

当v-if的值为false时，网页中将不会对此元素进行渲染

<div id="app">
    <div v-if="isShow">这里使用v-if</div>
    <div v-show="num==1">这里使用v-show</div>
</div>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {
                isShow:true,
                num: 2
            }
        },
    }).mount('#app');
</script>

v-else指令和v-else-if指令

我们可以使用 v-else 指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它

将不会被识别。而v-else-if则是充当 v-if 的“else-if 块”，可以链式地使用多次。

    <div id="app">
        <p v-for="(value,key,index) in user">{{index}}：{{key}}：{{value}}</p>
    </div>

    <script src="../js/vue3.js"></script>
    <script>
        Vue.createApp({
            data(){
                return {
                    user: {
                        userId:1,
                        userName: '张三',
                        userSex: '男'
                    }
                }
            },
        }).mount('#app');
    </script>

v-if指令和v-show指令

<div id="app">
    <div v-if="isShow">这里使用v-if</div>
    <div v-show="num==1">这里使用v-show</div>
</div>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {
                isShow:true,
                num: 2
            }
        },
    }).mount('#app');
</script>

通过上面的例子，我们不难发现两者的不同：

v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做
v-if有很高的切换开销，适用于条件不太容易改变的时候
v-show不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换
v-show有很高的初始渲染开销，适用于非常频繁地切换

循环遍历指令

vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应

的内容。它可以遍历数组类型以及对象类型的数据，js 里面的数组本身实质上也是对象，这里遍历数组和对象的时

候，方式相似但又稍有不同。

遍历对象属性

value 是遍历得到的属性值，key 是遍历得到的属性名，index 是遍历次序，这里的 key、index 都是可选参数，如

果不需要，这个指令其实可以写成 v-for="value in user"；

<div id="app">
    <p v-for="(value,key,index) in user">{{index}}：{{key}}：{{value}}</p>
        <!-- 简单写法 -->
    <p>{{user.userId}}</p>
    <p>{{user.userName}}</p>
    <p>{{user.userSex}}</p>
</div>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {
                user: {
                    userId:1,
                    userName: '张三',
                    userSex: '男'
                }
            }
        },
    }).mount('#app');
</script>

遍历数组元素

value 是遍历得到的元素，index 是数组下标，这里的index 也是可选参数，如果不需要，这个指令其实可以写成

v-for="value in userArr"；

<div id="app">
    <!-- <p v-for="user in userArr">{{user.userId}},{{user.userName}},{{user.userSex}}</p> -->
    <ul>
        <li v-for="(user,index) in userArr" :key="user.userId">
            {{index}},{{user.userId}},{{user.userName}},{{user.userSex}}
        </li>
    </ul>
</div>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                user: {
                    userId: 1,
                    userName: '张三',
                    userSex: '男'
                },
                userArr: [
                    {
                        userId: 1,
                        userName: '张三',
                        userSex: '男'
                    },{
                        userId: 2,
                        userName: '李四',
                        userSex: '男'
                    },{
                        userId: 3,
                        userName: '王五',
                        userSex: '女'
                    }
                ]
            }
        },
    }).mount('#app');
</script>

关于循环中的key

上面实例中存在一个问题：当更改数组中某一个元素时，Vue会对整个数组进行重新渲染。在实际开发中，这样的

代码是不被允许的，在数据量很多的时候，它会严重降低页面的性能。

这时，你可以加唯一性key值，增加后vue就会辨认出哪些内容被渲染后并没有变化，而只渲染新变化的内容。

<!-- 这里使用userId这样一个唯一标识来作为key值 --> 
<p v-for="(item,index) in userArr" :key="item.userId"> 
    {{item.userId}},{{item.userName}},{{item.userSex}} 
    <button @click="operate(index)">操作</button> 
</p>

综合案例

<div id="app">
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr v-for="(user,index) in userArr" :key="user.userId">
            <td>{{user.userId}}</td>
            <td>{{user.userName}}</td>
            <td>{{user.userAge}}</td>
            <td><button @click="del(index)">删除</button></td>
        </tr>
        <tr>
            <td colspan="4"><button @click="clear">清空</button></td>
        </tr>
    </table>
    <h3>添加</h3>
    姓名<input type="text" v-model="userName"><br>
    年龄<input type="text" v-model="userAge"><br>
    <button @click="add">添加</button>
</div>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data() {
            return {
                userArr: [
                    {
                        userId: 1,
                        userName: '张三',
                        userAge: 22
                    }, {
                        userId: 2,
                        userName: '李四',
                        userAge: 23
                    }, {
                        userId: 3,
                        userName: '王五',
                        userAge: 24
                    }
                ],
                userName: '',
                userAge: 0
            }
        },
        methods:{
            add(){
                let userId = 0;
                if(this.userArr.length == 0){
                    userId = 1;
                }else{
                    userId = this.userArr[this.userArr.length-1].userId+1;
                }
                let user = {
                    userId: userId,
                    userName: this.userName,
                    userAge: this.userAge
                }
                this.userArr.push(user);
            },
            del(index){
                this.userArr.splice(index,1);
            },
            clear(){
                this.userArr.splice(0,this.userArr.length);
            }
        }
    }).mount('#app');
</script>
<style>
    #app {
        width: 500px;.
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    table tr th,
    table tr td {
        height: 35px;
        border-bottom: solid 1px #999;
        text-align: center;
    }
</style>