[Vue3]vue3从CDN导入编程模式--基础指令

在之前的文章当中我们已经说到了如何从CDN导入Vue3以及其基本结构，今天，我们来学习Vue3当中的基础指令！希望学完这篇文章能够对大家有所帮助！

我们接下来的所有操作，都是从CDN中导入Vue3，在html文件中编写vue。

目录

1. v-text === 文本插值
2. v-html
3. v-once
4. v-pre
5. v-bind
6. v-on

接下来，话不多，直接开始!

一、v-text === 文本插值

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>

但是，我们今天主要介绍{{}}方式~

注意一点！ 挖标签只在开标签和闭标签中用，当我们遇到单标签的时候就要使用v-text

在Vue中，我们使用{{}}对html进行插值！

<div id="app"></div>
<template id="my-app">
    <h1>{{message}} -- {{message}}</h1>
    <h2>{{count * 2}}</h2>  
    <h2>{{message.split(' ').reverse().join('')}}</h2>
    <h1>{{getReverse()}}</h1>
    <h2>{{emo ? '难过':'开心'}}</h2>
    <button @click = 'change'>切换心情</button>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const App = {
        template:'#my-app',
        data(){
            return {
                message:'hello 艾伦',
                count:100,
                emo:false,
            }
        },
        methods:{
            getReverse(){
                return this.message.split(' ').reverse().join('')
            },
            change(){
                this.emo = !this.emo
            }
        }
    }
    Vue.createApp(App).mount('#app')
</script>

大家可以看到，我们在template挖的坑位中是可以写很多东西，多个“坑位”也是允许的，

相关的js代码也是可以的，例如：方法的调用，运算，能写js语言,他都会被读成字符串经过vue处理后再装载到页面上！

二、v-html

v-html：允许我们将内容直接作为普通 HTML 插入--Vue 模板语法是不会被解析的。

具体什么意思呢，我们可以这样简单地理解：v-html会将我们输入的数据不经过Vue模板的语法解析，直接装载到页面上，我们来看一个案例：

<div id="app"></div>
<template id="tel">
    <div>{{htmlcode}}</div>
    <div v-html="htmlcode"></div>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        template:'#tel',
        data:function(){
            return {
                htmlcode:'<h2>我是谁?</h2>',
            }
        }
    }).mount('#app')
</script>

我们来看看效果：

可以看到，我们直接挖坑的话{{htmlcode}}，vue会将数据源的数据经过处理和渲染放在页面上！也就是说你写的是html代码的话，它不会被识别，而是以字符串的形式放在页面上。

而使用v-html，会将你的数据直接当成普通的html插入到页面当中，这样页面能够将它识别出来！

三、v-once

v-once：这个指令，它只会渲染元素和组件一次，并跳过之后的更新。

也就是说：经过v-once渲染的元素和组件，渲染一次之后就再也不会动它了，哪怕数据源中的数据发生改变，它都不会有任何反应！我们来看看一个案例：

//数据源中 count = 100 add方法能够让count数字+1
<div id="app"></div>
<template id="my-app">
    <h2>{{count}}</h2>
    <h1 v-once>{{count}}</h1>
    <button @click = 'add'>+1</button>
</template>

在这个案例当中，我们放了两个相同的数字，一个是直接通过{{}}放置，一个是通过v-once放置，我们来看看效果：

可以看到，我们修改count的值，是无法修改v-once修饰的count。

也就是说，当我们在项目开发的过程中，有一些结构是固定了的，我们可以使用v-once，这样我们就不用再每次刷新页面都会大量渲染无关的结构，可以提高效率，节省资源。

四、v-pre

v-pre：跳过该元素及其所有子元素的编译。也就是说，告诉我们的vue这一部分的内容是不需要你去渲染的，直接跳过。

首先，我们先知道vue把你的代码当成字符串读走之后,又把字符串重新生成成html再挂载在页面上,这个过程叫编译，然后挂载在html上进行渲染。

而v-pre则是跳过这一个过程。我们来看看实际案例:

<template id="my-app">
    <h2 v-pre>{{message}}</h2>
    <h2>{{message}}</h2>
</template>

看看效果：

可以看到，加了v-pre的标签中{{message}}并没有被vue进行编译和渲染，而是直接当作字符串放在了页面上！这个就是v-pre的功能。

五、v-bind

我们就介绍一下v-bind的两种用法:绑定class和绑定style。

v-bind 可以直接写成 :

v-bind:src="imgUrl" == :src="imgUrl"

1、v-bind基础用法

<template id="my-app">
    <img v-bind:src="imgUrl" alt="">
    <a v-bind:href="link">百度一下</a><br>
    <a :href="link">百度两下</a>
</template>
//msg:'hello',
//imgUrl:'./ai2.png',
//link:'https://www.baidu.com',

基础用法，我们可以看到，v-bind用于绑定标签的属性！

v-bind:===:

2、v-bind绑定class

![v-bind绑定class2](C:\Users\www16\Desktop\v-bind绑定class2.png)<style>
        .active{
            color: red;
        }
    </style>    
<template id="tel">
        <div :class="classname">
            我真的红温了
        </div>
        <div :class={'active':true}>
            我红温了
        </div>
        <div :class={'active':false}>
            我没有红
        </div>
    </template>
//classname:'active',
//fontcolor:'red'

在这里我们看到我们通过v-bind绑定类名，我们可以通过变量名进行绑定！

1. 直接使用变量名通过:class="classname"这种形式绑定
2. 同时，我们也可以通过:class={'active':true}这种形式绑定，这种形式通过true 或者 false来决定这个属性是否出现！
3. 我们可以看到:class={'active':false}中，最终在页面上active这个属性并没有出现。
4. 我们也可以:class={'active':false,classname}这样来设置多个属性名。
5. 当然class = 'classname' :class='classname2'这种情况也是允许的!
6. 使用一个有返回值的方法这种也是允许的。例如::class = getclass()
7. 也可以使用数组的方式，使用数组的话，变量名就可以不用加引号了(加引号也是允许的)。例如 :class = "['classname1',classname2]"
8. 我们也可以在数组中这样操作：:class="[classname1,{classname2:ture}]"
9. 甚至我们可以在数组中放入三元表达式：:class="['classname1',istrue?classname2:'']"

3、v-bind绑定style

<template id="tel">
    <div :style="{color:fontcolor,fontSize:fontsize}">我是文字</div>
</template>
//fontcolor:'red'
//fontsize:'100px'

我们在使用v-bind绑定style的时候，通过调用对象来设置行内style（注意!行内style权重更高）

注意注意！！！在vue中，允许font-size === fontSize 允许驼峰

也可以使用数据源中的对象例如：

<template id="tel">
    <div :style="setStyle">我是文字</div>
</template>
//setStyle:{
//color:'blue',
//fontSize:'100px'
//}

也可以使用数组形式，例如：

<template id="tel">
    <div :style="[setStyle1,setStyle2]">我是文字1</div>
    <div :style="[setStyle1]">我是文字2</div>
</template>
//setStyle1:{
//	color:'blue',
//	fontSize:'100px'
//},
//setStyle2:{
//	fontWeight:'bold'
//}

六、v-on

在之前的案例当中，我们就见到过@click这种类型的事件绑定。

其实v-on===@

v-on就可以简写为@，用于绑定事件！我们再也不用设置一个事件监听来绑定各种事件了！直接一个@就可以解决，我们面临的问题！

<template id="tel">
<div>{{num}}</div>
<button v-on:click="add">+1</button>
<button @click="lower">-1</button>
</template>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        template:'#tel',
        data(){
            return {
                num:1
            }
        },

        methods:{
            add(){
                this.num++
            },
            lower(){
                this.num--
            }
        }
    }).mount('#app')
</script>

可以看到，我们仅仅是通过v-on(@)，就绑定了一个点击事件。其中add是控制数字+1，lower是控制数字-1。

有多个事件的时候，我们可以这样写

@click="handle" @mouseenter="enter"

@="{click:handle, mouseenter:enter}"

当然，如果有参数的话，我们就要这样写了“

@click="handleclick($event,'阿远',20)" 需要使用参数，把方法写成自己调用，事件参数写成event，这样我们的方法中就可以存在一个参数e，不写event，这样我们的方法中就可以存在一个参数e，不写event，这样我们的方法中就可以存在一个参数e，不写event会导致事件参数e使用不了。这个时候，我们的方法要写成这样：

handleclick(e,name,age){
	console.log(e,name,age);
}

注意了，这个$event是要加，后面才是传的参数，在方法中，会存在一个事件参数e，自己可以调用。在上述案例中，如果点击按钮的话会在控制台这样输出:

结束啦！

今天的基本指令我们就先学到这里啦！

后续，有关vue3的相关指令，路由，脚手架安装，以及如何开启一个vue3项目，我都会在后续的文章中的持续输出！

大家感兴趣的可以关注我！我还会为大家输出更多有意思的内容！

点个小小的赞鼓励支持一下吧！🌹🌹🌹

个人github:一个修远君的库 (github.com)