🖥️ Vue.js专栏：Vue 基础 模版语法
🧑💼 个人简介：一个不甘平庸的平凡人🍬
✨ 个人主页：CoderHing的个人主页
🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️
👉 你的一键三连是我更新的最大动力❤️
目录
一、Mustache语法
模版语法
二、Mustache双大括号语法(掌握)
三、常见的基本指令
v-once指令(了解)
v-text指令
V-html指令
V-pre指令
v-cloak cloak=>斗篷的意思
v-memo(新)
四、v-bind绑定属性
绑定基本属性
五、绑定class 和style
绑定class介绍
绑定class-对象语法
绑定class-数组语法
绑定style属性介绍
动态绑定属性
绑定一个对象
v-on绑定事件
v-on的用法
v-on的基本使用
v-on参数传递
v-on的修饰符
六、Vue的条件渲染
条件渲染
template元素
v-show
v-show和v-if的区别
一、Mustache语法
模版语法
React的开发模式:
React使用jsx 所以对应的代码都是编写类似于js的一种语法;
之后通过Babel将jsx编译成React.creatElement函数调用
Vue也支持jsx的开发模式
大多情况下,使用基于HTML的模版语法;
在模版中 允许开发者以声明式的方式将DOM和底层组件实例的数据 绑定在一起
在底层的实现中,Vue将模版编译成虚拟DOM渲染函数,
二、Mustache双大括号语法(掌握)
如果我们希望把数据显示到模版中,使用最多的语法是"Mustache语法(双大括号)的文本插值"
data返回的对象 是有添加到Vue的响应式系统中
当data中的数据发生变化时 对应的内容也会发生更新
当然 Mustache中不仅仅可以是data中的属性 也可以是一个 JavaScript的表达式
| JavaScript
<div id="app">
<!-- 1 基本使用 -->
<h2>{{message}}</h2>
<h2>当前计数:{{counter}}</h2>
<!-- 2 表达式 -->
<h2>计数双倍:{{ counter * 2 }}</h2>
<h2>展示信息:{{ infos.split(" ") }}</h2>
<!-- 3 三元运算符 -->
<h2>{{ age>=18? "成年人":"未成年人" }}</h2>
<!-- 4 调用methods中的函数 -->
<h2>{{ formateDate(time) }}</h2>
<!-- 5 注意:这里不能定义语句! if语句也不支持 -->
</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">
<!-- 指令:v-once =>只渲染一次 -->
<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>
<!-- 当加了v-pre之后 将不会编译 -->
<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>
<!-- 需求 只有name发生改变 其他东西才改变 -->
</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">
<!-- 1 绑定img的src属性 -->
<img v-bind:src="imgUrl" alt="">
<!-- <img :src="imgUrl" alt=""> 语法糖写法 -->
<!-- 2 绑定a的超链接 -->
<a v-bind:href="href">百度一下</a>
<!-- <a :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">
<!-- 1 基本绑定class -->
<h2 class="classes">Hello World</h2>
<!-- 2 动态class可以写对象语法 -->
<button :class=" isActive ? 'active':'' " @click="btnC">我是按钮</button>
<!-- 2 1 对象语法的基本使用 -->
<button :class="{ active:isActive }" @click="btnC">我是按钮</button>
<!-- 2 2 对象语法的多个键值对 -->
<button :class="{ active:isActive , xiong:true , kobe:false }" @click="btnC">我是按钮</button>
<!-- 2 3 动态绑定class是可以和普通的class同时使用的 -->
<button class="abc cba" :class="{ active:isActive , xiong:true , kobe:false }" @click="btnC">我是按钮</button>
<!-- 2 4 -->
<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">
<!--1 直接传入一个数组-->
<h2 :class="['abc','cba','nba']">Hello Array</h2>
<!--2 数组中也可以使用三元运算符 或绑定变量-->
<h2 :class="['abc',cba,isnba?'nba':'']">Hello Array</h2>
<!--3 数组中也可以使用对象语法-->
<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
<!-- v-bind绑定对象: 给组件传递参数-->
<!-- 简写 -->
<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
<!-- 1 基本的写法 -->
<div class="box" v-on:click="divClick"></div> |
v-on:click可以写成@click 是它的语法糖写法:
| JavaScript
<!-- 2 语法糖写法 (重点掌握)-->
<div class="box" @click="divClick"></div> |
当然 我们也可以绑定 其他事件:
| JavaScript
<!-- 4 绑定其他事件 (掌握)-->
<div class="box" @mousemove="divMouseMove"></div> |
如果我们希望一个元素 绑定多个事件 这个时候可以传入一个对象:
| JavaScript
<!-- 5 元素绑定多个事件 (掌握)-->
<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">
<!-- 1 默认传递 event对象 -->
<button @click="btnClick">按钮1</button>
<!-- 2 只有自己的参数 明确的参数-->
<button @click="btn2Click('xiong',age)">按钮2</button>
<!-- 3 自己的参数 和 event对象 -->
<!-- 在模版中 想要明确的获取event对象 固定语法:$event -->
<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">
<!-- v-if="条件" 当条件成立执行什么-->
<template v-if="Object.keys(info).length">
<h2>个人信息</h2>
<ul>
<li>姓名{{info.name}}</li>
<li>年龄{{info.age}}</li>
</ul>
</template>
<!-- v-else -->
<template v-else>
<h2>没有输入个人信息</h2>
<p>请输入个人信息后 再进行展示</p>
</template>
</div> |
v-show
v-show和v-if的用法 看起来是一致的 也是根据一个条件决定是否显示元素或组件;
v-show和v-if的区别
用法上的区别:
| v-show是不支持template | v-show不可以和v-else一起使用 |
其次 本质的区别:
| v-show元素无论是否需要显示到浏览器上,它的DOM实际都是存在的,只是通过css的display属性来进行切换 | v-if当条件为false时 其对应的元素压根不会被渲染到DOM中 |
开发中如何选择?
| 如果我们的元素需要显示和隐藏之间频繁切换 那么使用v-show | 如果不会频繁的发生切换 那么使用v-if |
