JavaScript
<div id="app">
    
    <h2>{{message}}</h2>
    <h2>当前计数:{{counter}}</h2>

    
    <h2>计数双倍:{{ counter * 2 }}</h2>
    <h2>展示信息:{{ infos.split(" ") }}</h2>

    
    <h2>{{ age>=18? "成年人":"未成年人" }}</h2>

    
    <h2>{{ formateDate(time) }}</h2>

    
</div>
<script src="../lib/vue.js"></script>
<script>
    // 创建app
    const app = Vue.createApp({
        data: function () {
            return {
                message: "Hello Vue!",
                counter: 100,
                infos: "my name is xiong",
                age: 22,
                time: 123
            }
        },
        methods: {
            formateDate(data) {
                return "2020-10-10 " + data
            }
        }
    })
    // 挂载app
    app.mount('#app')

三、常见的基本指令

v-once指令(了解)

v-once用于指定元素或组件只能渲染一次

当数据发生变化时元素或组件以及其所有子元素将视为静态内容并且跳过

该指令可以用于性能优化

HTML
<div id="app">
        
        <h2 v-once>{{ message }}
            <span>数字:{{counter}}</span>
        </h2>
        <h1>{{ message }}</h1>
        <button @click="changeMessage">改变message</button>
    </div>

JavaScript
<script src="../lib/vue.js"></script>
    <script>
        // 创建app
        const app = Vue.createApp({
            data: function () {
                return {
                    message: "Hello Vue!",
                    counter: 100
                }
            },
            methods: {
                changeMessage() {
                    this.message = "你好,Vue!"
                    this.counter += 100
                    console.log(this.message, this.counter)
                }
            }
        })
        // 挂载app
        app.mount('#app')

v-text指令

用于更新元素textContent:

JavaScript
<h2 v-text="message">aaaa</h2> //此时拿到message 会把'aaaa'覆盖掉

V-html指令

默认情况下,展示的内容本身是html的,那么vue不会对他进行特殊的解析

如果我们希望这个内容被Vue解析出来,可以使用v-html来展示

HTML
<div id="app">
        <h2>{{content}}</h2>
        <h2 v-html="content"></h2>

    </div>

JavaScript
<script src="../lib/vue.js"></script>
    <script>
        // 创建app
        const app = Vue.createApp({
            data: function () {
                return {
                    content: '<span style="color:red;font-size:30px;">哈哈哈哈</span>'
                }
            },
        })
        // 挂载app
        app.mount('#app')
    </script>

V-pre指令

v-pre用于跳过元素和它的子元素的编译过程,显示原始的Mustache标签:

跳过不需要编译的节点,加快编译的速度

HTML
<div id="app">
        <h2>{{message}}</h2>
        <p>当前计数{{counter}}</p>
        
        <p v-pre>{{}}</p>
    </div>

JavaScript
<script>
        // 创建app
        const app = Vue.createApp({
            data: function () {
                return {
                    message: "Hello Vue!",
                    counter: 0
                }
            },
        })
        // 挂载app
        app.mount('#app')

    </script>

v-cloak cloak=>斗篷的意思

这个指令保持在元素上直到关联组件实例结束编译

它必须和css一起使用,这个指令可以隐藏未编译的Mustache标签直到组件实例准备完毕

CSS
<style>
        [v-cloak] {
            display: none;
        }
    </style>

HTML
<div id="app">
<h2 v-cloak>{{message}}</h2>
</div>

JavaScript
<script src="../lib/vue.js"></script>
<script>
    setTimeout(() => {
        // 创建app
        const app = Vue.createApp({
            data: function () {
                return {
                    message: "Hello Vue!"
                }
            },
        })
        // 挂载app
        app.mount('#app')
    }, 3000);
</script>

v-memo(新)

指定数据发生改变,才改变其他数据,其他数据发生改变,不会改变

HTML
<div id="app">
        <div v-memo="[name]">
            <h2>姓名:{{name}}</h2>
            <h2>年龄:{{age}}</h2>
            <h2>身高:{{height}}</h2>
            
        </div>
        <button @click="updataInfo">改变信息</button>
    </div>

JavaScript
<script src="../lib/vue.js"></script>
    <script>
        // 创建app
        const app = Vue.createApp({
            data: function () {
                return {
                    name: "xiong",
                    age: 18,
                    height: 1.88
                }
            },
            methods: {
                updataInfo() {
                    this.name = "kobe"
                    // this.age = 20
                }
            }
        })
        // 挂载app
        app.mount('#app')

四、v-bind绑定属性

前面的这些指令,主要是将值插入到模版内容中

但是除了内容需要动态来决定外,某些属性我们也希望动态来绑定

如动态绑定a元素的href属性动态绑定img元素的src属性

绑定属性我们使用v-bind:

缩写: :

预期:any|Object

参数:attrOrProp

修饰符: .camel - 将kebab-case attribute 名转换为 camelCase

用法:动态地绑定一个或多个attribute或一个组件prop到表达式

绑定基本属性

v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值

HTML
<div id="app">
    
    <img v-bind:src="imgUrl" alt="">
    

    
    <a v-bind:href="href">百度一下</a>
    
</div>

JavaScript
<script src="../lib/vue.js"></script>
<script>
    // 创建app
    const app = Vue.createApp({
        data: function () {
            return {
                message: "Hello Vue!",
                imgUrl: "http://p1.music.126.net/SZx_bVkBZ20dKE1YZrH_wQ==/109951167861631226.jpg",
                href: "http://www.baidu.com"
            }
        },
    })
    // 挂载app
    app.mount('#app')
</script>

五、绑定class 和style

绑定class介绍

在开发中,我们的元素class也是动态的,如:

当数据为某个状态时字体为红色

当数据为另一个状态时,字体为黑色

绑定class有两种方式:

对象语法

数组语法

绑定class-对象语法

对象语法: 我们可以传给 :class一个对象,动态切换class

JavaScript
<div id="app">
    
    <h2 class="classes">Hello World</h2>

    
    <button :class=" isActive ? 'active':'' " @click="btnC">我是按钮</button>

    
    <button :class="{ active:isActive }" @click="btnC">我是按钮</button>

    
    <button :class="{ active:isActive , xiong:true , kobe:false }" @click="btnC">我是按钮</button>

    
    <button class="abc cba" :class="{ active:isActive , xiong:true , kobe:false }" @click="btnC">我是按钮</button>

    
    <button class="abc cba" :class="getClasses()" @click="btnC">我是按钮</button>
</div>
<script src="../lib/vue.js"></script>
<script>
    // 创建app
    const app = Vue.createApp({
        data: function () {
            return {
                classes: "abc cba nba",
                isActive: false
            }
        },
        methods: {
            btnC() {
                this.isActive = !this.isActive
            },
            getClasses() {
                return { active: this.isActive, xiong: true, kobe: false }
            }
        }
    })
    // 挂载app
    app.mount('#app')

</script>

绑定class-数组语法

数组语法:可以把数组传给:class 以应用一个class列表

JavaScript
<tempale id="app">
    
    <h2 :class="['abc','cba','nba']">Hello Array</h2>
    
    <h2 :class="['abc',cba,isnba?'nba':'']">Hello Array</h2>
    
    <h2 :class="['abc',cba,{'nba':isnba}]">Hello Array</h2>
</template>

绑定style属性介绍

我们可以利用v-bind:style来绑定一些CSS内联样式:

因为某些样式我们需要根据数据动态来决定

如某字段的颜色大小等等

Css property名可以用 驼峰式或短横线分割(短横线分割要用引号括起来)来命名

绑定class有两种方式:

对象语法

数组语法

对象语法:

JavaScript
<h2 :style="{color:fontColor,'font-size':fontSize+'px'}">Hello World</h2>

数组语法:

style的数组语法可以将多个样式对象应用到同一个元素上

JavaScript
<h2 :style="[styleObj1,styleObj2]">Hello World</h2>

动态绑定属性

在某些情况下,我们 属性的名称 可能也不是固定的

前面我们无论绑定src href class style 属性名称都是固定的

如果属性名称不是固定的我们可以使用 :[属性名]="值"的格式来定义

这种绑定的方式我们称之为动态绑定属性

绑定一个对象

如果我们希望将一个 对象的所有属性 绑定到元素上的所有属性 应该怎么做?

我们可以直接使用v-bind绑定一个对象;

HTML


<h2 :="props">Hello Bind</h2>
<h2 v-bind="props">Hello Bind</h2>

v-on绑定事件

在前端开发,我们需要经常和用户进行各种各样的交互

这个时候我们就必须监听用户发生的事件如点击拖拽键盘事件等等

在Vue中如何监听时间呢? 使用v-on指令

v-on的用法

v-on的使用:

缩写:@

预期:Function|InIne Statement|Object

参数:event

修饰符:

.stop - 调用event-stopPropagation()

.prevent - 调用event-preventDefault()

.capture - 添加事件侦听器时使用capture模式

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调

.{keyAlias} - 仅当事件从特定键触发时才触发回调

.once - 只触发一次回调

.left - 只当点击鼠标左键时触发

.right - 只当点击鼠标右键时触发

.middle - 只当点击鼠标中间时触发

.passive - {passive:true}模式添加侦听器

v-on的基本使用

我们可以使用v-on来监听一下点击事件:

JavaScript

<div class="box" v-on:click="divClick"></div>

v-on:click可以写成@click 是它的语法糖写法:

JavaScript

<div class="box" @click="divClick"></div>

当然我们也可以绑定其他事件:

JavaScript

<div class="box" @mousemove="divMouseMove"></div>

如果我们希望一个元素绑定多个事件这个时候可以传入一个对象:

JavaScript

<div class="box" @mousemove="divMouseMove" @click="divClick"></div>

<div class="box" @="{click:divClick,mousemove:divMouseMove}"></div>

v-on参数传递

当通过methods中定义方法,以供@click调用时需要注意参数问题:

一:如果该方法不需要额外参数,那么方法后的()可以不添加

但是:如果方法本身没有一个参数那么会默认将原生事件event参数传递进去

二:如果需要同时传入某个参数同时需要event时可以通过$event传入事件

JavaScript
<div id="app">
        
        <button @click="btnClick">按钮1</button>

        
        <button @click="btn2Click('xiong',age)">按钮2</button>

        
        
        <button @click="btn3Click('xiong',age,$event)">按钮3</button>

        <h2>{{message}}</h2>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
        // 创建app
        const app = Vue.createApp({
            data: function () {
                return {
                    message: "Hello Vue!",
                    age: 18 // 如果没写这个不会报错会直接undefined
                }
            },
            methods: {
                // 1 默认参数:event对象
                // 总结如果在绑定事件的时候没有传递任何参数,
                // 那么evnet对象会被默认传递进来
                btnClick(event) {
                    console.log('btnClick', event);
                },
                btn2Click(name, age) {
                    console.log('btn2Click', name, age);
                },
                btn3Click(name, age, event) {
                    console.log('btn3Click', name, age, event);
                }
            }
        })
        // 挂载app
        app.mount('#app')
    </script>

v-on的修饰符

v-on支持修饰符,修饰符相当于对事件进行了一些特殊的处理:

.stop - 调用event-stopPropagation()

.prevent - 调用event-preventDefault()

.capture - 添加事件侦听器时使用capture模式

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调

.{keyAlias} - 仅当事件从特定键触发时才触发回调

.once - 只触发一次回调

.left - 只当点击鼠标左键时触发

.right - 只当点击鼠标右键时触发

.middle - 只当点击鼠标中间时触发

.passive - {passive:true}模式添加侦听器

HTML
<div id="app">
    <div class="box" @click="divClick">
        <button @click.stop="btnClick">按钮</button>
        
    </div>
</div>

六、Vue的条件渲染

条件渲染

在某些情况下,我们需要根据当前的条件决定某些元素或组件是否需要渲染,这个时候我们就需要进行条件判断了

Vue提供了下面的指令来进行条件判断:

V-if

V-else

V-else-if

V-show

V-if v-else v-else-if

它们用于根据条件来渲染某一块内容

这些内容只有再条件为true时才会被渲染出来这三个指令与Js的条件语句if else else if类似

JavaScript
<div id="app">
    <h1 v-if="score > 90">优秀</h1>
    <h2 v-else-if="score > 80">良好</h2>
    <h3 v-else-if="score >= 60 ">及格</h3>
    <h4 v-else>不及格</h4>
</div>

v-if的渲染原理:

v-if是惰性的

条件为false时判断的内容完全不会被渲染或者会被销毁掉

条件为true时才会真正渲染条件块中的内容

template元素

因为v-if是一个指令所以必须将其添加到一个元素上

如果我们希望切换的是多个元素呢?

此时我们渲染div但是我们并不希望 div这种元素被渲染

这个时候我们可以选择使用template

template元素可以当做不可见的包裹元素,且在v-if上使用,但最终template不会被渲染出来

有点类似于小程序中的block

JavaScript
<div id="app">
    
    <template v-if="Object.keys(info).length">
        <h2>个人信息</h2>
        <ul>
            <li>姓名{{info.name}}</li>
            <li>年龄{{info.age}}</li>
        </ul>
    </template>
    
    <template v-else>
        <h2>没有输入个人信息</h2>
        <p>请输入个人信息后再进行展示</p>
    </template>
</div>