那些你不知道的VUE小知识

VUE是前端三大框架之一，具有简单、高效、生态丰富(插件多)的特点。VUE的使用需要下载安装后利用<script src="xxx.js"></script>引入后才能使用。

下载方法：登录VUE官网后点击列表单中的"学习"，下方出现"您在浏览的是 v2.x 及更早版本的文档。v3.x 的文档在这里"点击链接后左侧项目栏有安装，点击安装后界面下方有直接引入script，直接引入即可。

在成功引入VUE后即可进行VUE的简单使用环节了，这里会对VUE的创建应用实例、文本渲染、属性渲染进行着重描述。

首先是创建应用实例，创建实例的程序是不可更改的固定的语法，利用createApp函数来创建，以下是程序语法。

// 创建一个app

const app = Vue.createApp({
                // 定义数据data
                data() {
                    // 返回msg
                    return {
                        msg: "你好",
                        add:"真不错赛车手",
                        xxx:false
                    }
                }
            })
            // 把vm实例挂载到app节点
            var vm = app.mount("#app");

上述语法均需引入VUE后才可使用，写在script中，挂载的节点是各种带有id选择器为app的标签。

其次是文本渲染和属性渲染，文本的渲染常用的语法有{{}}、v-text、v-html等等。

{{}}语法和v-text能达到相同的作用，但是相对而言是一种更为简便的语法，为什么说它简便呢？还是举例来说明比较有力。在引入VUE文档后写入上述语法。假设return内容为{name："中华人民共和国"}；在任意标签(以下以<p></p>标签为例)中写入{{name}}如<p>{{name}}</p>；界面便会输出"中华人民共和国"；而v-text要达到这种效果需要像写属性一样，如：<p v-text="name"></p>;所以相对而言{{}}语法更为简便。

v-html的指令是为了输出真正的html，如果上述固定程序中的return中含有标签，使用v-text会使标签当作文本输出至界面，而使用v-html则会将标签的作用输出出来。

如return{<h1>name:喜羊羊</h1>}；若用<p v-text="name"></p>将输出"<h1>name:喜羊羊</h1>"文本，而用<p v-html="name"></p>则会输出加粗后的"喜羊羊"三个字。这就是两者的区别。

属性渲染中有一个属性绑定，属性绑定指令为v-bind，绑定指令可缩写为：<button :disabled="canUse">按钮</button> <div :title="title"> 学前端，薪资就是高</div>；

以下是对v-bind的具体使用案例：

<div id="app">
            <p>
                <button @click="num=1" :class="num===1?'active':''">css</button>
                <button @click="num=2" :class="num===2?'active':''">html</button>
                <button @click="num=3" :class="num===3?'active':''">js</button>
            </p>
            <div v-if="num===1">css内容</div>
            <div v-if="num===2">html内容</div>
            <div v-if="num===3">js内容</div>
        </div>

 Vue.createApp({
                data() {
                    return {
                        // list:["a","b","c","d"],
                        // obj:{"妙":"安妙依","月":"小月亮","瑶":"秦瑶"}
                        num: 1
                    }
                }
            })

.mount("#app")；

最后还有v-if、v-for、和v-on等使用方法扩展。v-if的作用和if条件语句一样，以下是v-if的使用方法。

<template v-for="item in 10">
                <div v-if="item%2===0">{{item}}</div>
</template>

v-for是循环，和for循环的作用相同，上述程序语句中包含有v-for的用法。

v-on是事件监听指令，有两种写法，以下分别举例：

 <button @click="num=1" :class="num===1?'active':''">css</button>
 <button v-on:click="num=2" :class="num===2?'active':''">html</button>；

上述两种写法中第一种是v-on的简写形式。