Vue基础及基础指令

Vue概述

Vue是一款构建用户界面的渐进式javaScript框架

---

引入和实例化

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

引用与JQuery一样

    const app = Vue.createApp({
        data() {
            return {
                msg: "你好Vue"
            }
        }
    })
    var vm = app.mount("#app");

实例化一个 Vue

---

内置指令

内部指令是以 v- 开头的特殊属性

用于连接html模板与JavaScript数据模型

文本渲染

v-text  v-html  简写：{{msg}}

示例：

    <!-- html部分 -->
    <div id="app">
        <p v-text="msg"></p>
        <!-- 或者 -->
        <p>{{msg}}</p>
    </div>

    // js部分
    Vue.createApp({
        data() {
            return {
                msg: "Vue3 看不懂！"
            }
        }
    }).mount("#app");

网页显示效果：

属性渲染

v-bind:属性名="值"   简写：:属性名="值"

示例：

    <!-- html部分 -->
    <div id="app">
        <p v-bind:title="msg">{{msg}}</p>
        <p :class="'color'">{{msg}}</p>
        <button :disabled="!canUse">按钮</button>
    </div>

        /* css部分 */
        
        .color {
            color: red;
        }

    // js部分
    Vue.createApp({
        data() {
            return {
                msg: "芜湖~起飞！",
                canUse: false
            }
        }
    }).mount("#app")

网页显示效果：

 条件渲染

v-if   v-else-if   v-else

示例：

    <!-- html内容 -->
    <div id="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>

    // js部分
    Vue.createApp({
        data() {
            return {
                score: 59
            }
        }
    }).mount("#app")

网页显示结果：

 v-show

示例：

    <!-- html代码 -->
    <div id="app">
        <p v-if="can">我会显示的</p>
        <p v-show="can">也我会显示的，show</p>
    </div>

    // js代码
    Vue.createApp({
        data() {
            return {
                can: true
            }
        }
    }).mount("#app")

网页显示效果：

 列表渲染

v-for="(item,index) in list" :key="item"

item 变量的当前数据
index   当前的下标

示例：

    <!-- html部分 -->
    <div id="app">
        <ul>
            <li v-for="(item,index) in list" :key="item">{{item}}-{{index+1}}</li>
        </ul>
    </div>

    // js部分
    Vue.createApp({
        data() {
            return {
                list: ["Vue", "react", "angular"]
            }
        }
    }).mount("#app")

网页显示效果：

 如果 v-if  和  v-for  一起使用的话需要注意

v-for 与 v-if 用 template
<template v-for="item in 10">
    <p v-if="item%2===0">{{item}}</p>
<\template>

示例：

    <!-- html内容 -->
    <div id="app">
        <template v-for="item in 10">
            <p v-if="item%2===0">{{item}}</p>
        </template>
    </div>

    // js内容
    Vue.createApp({
        data() {
            return {}
        }
    }).mount("#app")

网页显示效果：

---

学会了这些，你就算入门Vue了

跟着我走，保你月入过万