vue3(一)-基础入门之指令以及动态设置 class、style属性
一、导入vue.js
1.可以借助 script 标签直接通过 CDN 来使用 Vue
2.也可以下载vue.global.js文件并在本地导入
<script src="./lib/vue.global.js">script>
二、创建Vue对象
<script>
const { createApp, ref } = Vue
createApp({
data() {
return { message: 1 }
}
}).mount('#app')
script>
三、如何插入值
在双大括号中输入变量、表达式后，界面会随着变量、表达式的结果而发生变化（注意message作为变量不带引号，而a、b作为常量需要带引号）
<div id="app">
<P>{{ message }}P>
<p>{{ 10 + 20 }}p>
<p>{{ 10 > 20 ? 'a' : 'b' }}p>
div>
以上结果为：
四、指令
1、v-show
控制元素的显示隐藏，隐藏时的属性为：display:none
html代码:
<div v-show="isShow">v-show测试div>
<button @click="changeShow()">v-show测试button>
javascript:
<script>
const { createApp, ref } = Vue
const vm = createApp({
data() {
return {
message: 1,
isShow: true
}
},
methods: {
changeShow() {
return (this.isShow = !this.isShow)
}
}
}).mount('#app')
script>
2、v-if 、v-else-if、v-else
控制元素的创建和删除
html代码：
isCreate =1时创建 v-if测试，删除其他两项
isCreate =2时创建 v-else-if测试，删除其他两项
isCreate =3时创建 v-else测试，删除其他两项
<div v-if="isCreate===1">v-if测试div>
<div v-else-if="isCreate===2">v-else-if测试div>
<div v-else>v-else测试div>
<button @click="changeCreate()">if条件测试button>
javascript:
<script>
const { createApp, ref } = Vue
const vm = createApp({
data() {
return {
message: 1,
isCreate: false
}
},
methods: {
changeCreate() {
if (this.isCreate >= 3) {
this.isCreate = 0
}
return this.isCreate++
}
}
}).mount('#app')
script>
3、v-html
通过该指令插入html元素
html代码：
<div v-html="myhtml">div>
javascript:
<script>
const { createApp, ref } = Vue
const vm = createApp({
data() {
return {
myhtml: '插入html
'
}
}
}).mount('#app')
script>
4、v-for
遍历数组并赋值、根据数组长度创建元素
html代码：
<ul>
<li v-for="item in datalist">{{ item }}li>
ul>
javascript:
<script>
const { createApp, ref } = Vue
const vm = createApp({
data() {
return {
datalist: ['111', '222', '333']
}
}
}).mount('#app')
script>
五、动态设置class属性
注意 class属性前缀需要加冒号
方式一：
html代码：
<div :class="isChage?'redClor':'yellowClor'">动态设置class属性1div>
<button @click="isChageFn()">动态设置class属性1button>
<style>
.redClor{
background-color: red;
}
.yellowClor{
background-color: yellow;
}
style>
javascript:
<script>
const { createApp, ref } = Vue
const vm = createApp({
data() {
return {
isChage: true
}
},
methods: {
isChageFn() {
return (this.isChage = !this.isChage)
}
}
}).mount('#app')
script>
结果展示：
初始： class =“red”
点击按钮后：class=“yellow”
方式二、
html代码：
<div :class="isChangeClass">动态设置class属性2div>
javascript:
<script>
const { createApp, ref } = Vue
const vm = createApp({
data() {
return {
isChangeClass: {
a: true,
b: true
}
}
}
}).mount('#app')
script>
初始：class=“a b”
----------------------------------------------------------------------------------------------------
1.在浏览器控制台修改 vm.isChangeClass.a=false 后 : class=“b”
----------------------------------------------------------------------------------------------------
2.在浏览器控制台修改 vm.isChangeClass.b=false 后 : class=“a”
----------------------------------------------------------------------------------------------------
3.在浏览器控制台修改 vm.isChangeClass.c=true 后 : class=“c”
----------------------------------------------------------------------------------------------------
方式三、
html代码：
<div :class="isChangeArr">动态设置class属性3div>
javascript:
<script>
const { createApp, ref } = Vue
const vm = createApp({
data() {
return {
isChangeArr: ['a', 'b']
}
}
}
}).mount('#app')
script>
初始：class=“a b”
----------------------------------------------------------------------------------------------------
1. 在浏览器控制台修改 vm.isChangeArr.pop() 后 : class=“a”
----------------------------------------------------------------------------------------------------
2. 再次在浏览器控制台修改 vm.isChangeArr.pop() 后 : class
----------------------------------------------------------------------------------------------------
3. 再次在浏览器控制台修改 vm.isChangeArr.push(‘c’) 后 : class=“c”
----------------------------------------------------------------------------------------------------
六、动态设置style属性
html代码：
<div :style="isStyleChange">动态设置style属性1div>
<div :style="isStyleChangeObj">动态设置style属性2div>
<div :style="isStyleChangeArr">动态设置style属性3div>
javascript:
<script>
const { createApp, ref } = Vue
const vm = createApp({
data() {
return {
isStyleChange: 'background-color:red',
isStyleChangeObj: {
backgroundColor: 'red',
fontSize: '30px'
},
isStyleChangeArr: ['background-color:yellow']
}
}
}
}).mount('#app')
script>