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>