Vue3快速入门 - 码力全开

在这里,我们介绍如何快速入门Vue3,通过一些例子介绍其基本功能。要使用vue,主要有如下两种方法:

使用包安装器,如npm
使用CDN直接进行加载

这里我们使用第2种方法,下面是一个简单的计数应用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>计数器</title>
</head>
<script src="https://unpkg.com/vue@3.5.18"></script>
<body>
    <div id="app">
        <h1>{{ count }}</h1>
        <button v-on:click="countNum">点击</button>
    </div>
</body>
<script>
    const app = {
        data(){
            return {
                count:0
            }
        },
        methods:{
            countNum(){
                this.count = this.count + 1;
            }
        }
    }
    Vue.createApp(app).mount("#app");
</script>
</html>

在上述代码中,我们加载vue的版本为3.5.18。之后是对应页面元素,在vue中变量的值使用花括号进行包裹,而通过v-on:click进行点击事件的绑定。

之后我们创建一个应用变量app,其有1个data函数用于表示初始化的数据,而methods是其相关的方法。在countNum函数中我们每次将其count属性的值加1。最后通过Vue.createApp创建应用,并挂载在ID为app的元素上。

可以说这个例子非常简单,当点击按钮其计数就加1。但是上述代码有一个问题就是元素在左侧显示,如果想将其居中显示,此时只能通过CSS进行设置。

<style>
    #app {
        text-align: center;
        border: 1px solid red;
        color: blue;
    }
</style>

此时页面是1个红色边框将计数器和按钮包围了起来。此时如果想动态修改计数器字体的颜色,此时可以这样来操作,为其绑定属性:

<style>
#h1 {
    color: red;
}
</style>

<h1 v-bind:id="id1">{{ count }}</h1>

<script>
const app = {
    data(){
        return {
            count:0,
            id1:"h1"
        }
    },
    ...
}
</script>

在vue中,对于事件的绑定,实际上提供了另外一种简化方式,即是使用@符号代替v-on:,此时可以将上述代码进行如下的修改:

<button @click="countNum">点击</button>

而对于属性的绑定可以去掉v-bind,此时的代码如下:

<h1 :id="id1">{{ count }}</h1>

接下来我们来看下vue中条件渲染,对于之前的计数器,我们想让其值大于5之后换成蓝色及字体为48像素,此时进行如下的修改:

<style>
#h1-big {
    font-size: 48px;
    color: blue;
}
</style>

<h1 :id="id1" v-if="count < 5">{{ count }}</h1>
<h1 :id="id2" v-else-if="count >= 5">{{ count }}</h1>

<script>
const app = {
    data(){
        return {
            count:0,
            id1:"h1",
            id2:"h1-big"
        }
    },
    ...
}
</script>

通过使用v-if与v-else-if进行条件渲染。接着我们还可以修改点击时每步的步数,让其随机添加1个1-10之间的值:

<button @click="countNum(Math.floor(Math.random()*10+1))">点击</button>

...
    methods:{
        countNum(num){
            this.count = this.count + num;
        }
    }

下一步我们将每次点击的数值进行显示,此时添加1个textarea及列表项:

<ul>
    <li v-for="item in num_arr">{{ item }}</li>
</ul>
<textarea v-model="num_arr"></textarea>

<script>
const app = {
    data(){
        return {
            count:0,
            id1:"h1",
            id2:"h1-big",
            num_arr:[]
        }
    },
    methods:{
        countNum(num){
            this.num_arr.push(num);
            this.count = this.count + num;
        }
    }
}
</script>

这样每次点击时就会添加列表项,而文本框中出现相应的数值。

当然我们也可以使用element-plus对之前的按钮进行美化,此时需要对代码进行如下的修改:

<script src="https://unpkg.com/element-plus@2.10.4"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/element-plus@2.10.4/dist/index.css">

<el-button @click="countNum(Math.floor(Math.random()*10+1))">点击</el-button>

<script>
Vue.createApp(app).use(ElementPlus).mount("#app");
</script>

我们引入CSS及js脚本文件,将button修改为el-button元素,之后创建应用后使用ElementPlus。

参考文章:

https://cn.vuejs.org/guide/quick-start.html#using-vue-from-cdn

如果喜欢这篇文章或对您有帮助，可以：[☕] 请我喝杯咖啡 | [💓] 小额赞助

码力全开 / Vue3快速入门