vue3(一)-基础入门

一、导入vue.js

1.可以借助 script 标签直接通过 CDN 来使用 Vue

<!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->

2.也可以下载vue.global.js文件并在本地导入

    <script src="./lib/vue.global.js"></script>

二、创建Vue对象

<script>const { createApp, ref } = VuecreateApp({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 } = Vueconst 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 } = Vueconst 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 } = Vueconst vm = createApp({data() {return {myhtml: '<p>插入html</p>'}}}).mount('#app')
</script>

4、v-for

遍历数组并赋值、根据数组长度创建元素

html代码：

<ul><li v-for="item in datalist">{{ item }}</li>
</ul>

javascript:

<script>const { createApp, ref } = Vueconst vm = createApp({data() {return {datalist: ['111', '222', '333']}}}).mount('#app')
</script>

五、动态设置class属性

注意 class属性前缀需要加冒号

方式一：

html代码：

<div :class="isChage?'redClor':'yellowClor'">动态设置class属性1</div>
<button @click="isChageFn()">动态设置class属性1</button><style>.redClor{background-color: red;}.yellowClor{background-color: yellow;}
</style>

javascript:

<script>const { createApp, ref } = Vueconst 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属性2</div>

javascript:

<script>const { createApp, ref } = Vueconst 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属性3</div>

javascript:

<script>const { createApp, ref } = Vueconst 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属性1</div>
<div :style="isStyleChangeObj">动态设置style属性2</div>
<div :style="isStyleChangeArr">动态设置style属性3</div>

javascript:

<script>const { createApp, ref } = Vueconst vm = createApp({data() {return {isStyleChange: 'background-color:red',isStyleChangeObj: {backgroundColor: 'red',fontSize: '30px'},isStyleChangeArr: ['background-color:yellow']}}}}).mount('#app')
</script>