我滴神啊~Vue 3最全宝典在这里~

哈喽~，我是稳重聪头，一个初来乍到的小萌新，如果喜欢我的文章，多多给我点赞哟，关注聪头学习不迷糊。

Vue是个什么呢

Vue啊，是一款前端渐进式框架，可以提高前端开发效率。

前端的三大框架：Vue React Angular

Vue的导入与创建

本地导入

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

在线导入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

安装完Vue,那咱们就来创建一个Vue对象

 <div id="app">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
    </div>
<script>
    // 创建一个app
    const app = Vue.createApp({
        // 定义数据data
        data(){
            return {msg:"你好vue"}
        }
    })
    //把app实例挂载到#app节点
    var vm = app.mount("#app")

下面来介绍一下Vue中的内置指令：

内置指令就是v-开头的特殊属性，它是用来联系html模板与javascript数据模型的

v-text

<span v-text="msg"></span>
<!-- 等价于 -->
<span>{{msg}}</span>

注意：只能写一行表达式；不能写复杂js 例如if while

v-html

 <div class="app">
        <p>{{msg}}</p>
        <p v-html="msg"></p>
    </div>
<script>
    Vue.createApp({
        data(){
            return{
                msg:"hello~"
            }
        }
    }).mount(".app")
</script>

v-bind

一些指令能够接收一个“参数"，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

 <div class="app">
        <p v-bind:title="msg">这是p标签</p>
        <p :title="msg">简写:title=" "</p>
        <button :disabled="canUse">按钮</button>
    </div>
<script>
    Vue.createApp({
        data(){
            return{
                msg:"学习vue",
                canUse:false,
            }
        }
    }).mount(".app")
</script>

v-bind:属性名="值"

可以简写为：

:属性名="值"

条件渲染v-if与v-else-if

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

实例：

 <div class="app">
        <p v-if="isLog">欢迎光临~</p>
        <p v-else>请登录</p>
    </div>
<script>
    Vue.createApp({
        data() {
            return { isLog: false }
        }
    }).mount(".app")
</script>

在对比一下多重条件渲染 v-else-if

<div class="app">
        <p v-if="score>=90">优秀</p>
        <p v-else-if="score>=80">良好</p>
        <p v-else-if="score>=70">中等</p>
        <p v-else-if="score>=60">及格</p>
        <p v-else>不及格</p>
    </div>
<script>
    Vue.createApp({
        data() {
            return { score: 89 }
        }
    }).mount(".app")
</script>

运行结果：

v-show

另一个用于根据条件展示元素的选项是 v-show 指令

 <div class="app">
        <p v-show="can">v-show通过css隐藏</p>
        <p v-if="can">v-if通过移除节点隐藏</p>
    </div>
 Vue.createApp({
        data() {
            return {
                can: true
            }
        }
    }).mount(".app")

运行结果：

在这里，大家会发现，v-show和v-if他们有点雷同

v-show CSS方法隐藏

v-if 移除dom节点方式隐藏

频繁切换用v-show 反之用v-if

列表渲染 v-for

v-for指令根据一组数的选项列表来进行渲染

使用特定语法 item

 in items

，为当前遍历的元素提供别名：

<div v-for="item in items">
  {{ item.text }}
</div>

来通过下面这个实例，看一下v-for遍历对象：

 <div class="app">
        <div v-for="(value,key) in obj" :key="key">{{key}}:{{value}}</div>
    </div>
<script>
    Vue.createApp({
        data() {
            return {
                obj: { title: "你好啊", author: "hello", pdate: "2022" }
            }
        }
    }).mount(".app")
</script>

代码运行结果：

另外也可以为数组索引指定别名 (或者用于对象的键)；

 <div class="app">
        <ul>
            
            <li v-for="(item,index) in list" :key="item">{{item}}-{{index}}</li>
        </ul>
    </div>
<script>
    Vue.createApp({
        data() {
            return {
                list: ["vue", "react", "angular"]
            }
        }
    }).mount(".app")
</script>

这里的key

:key 属性为了让vue内部给遍历的节点给一个唯一的标识，以便更好的进行排序过滤等操作

为了性能优化，key的值要唯一

看一下代码运行结果：

补充一下：

v-for与v-if同时使用用template
<template v-for="item in 10">

{{item}}

</template>