2、使用 CDN 方法

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

• Staticfile CDN（国内）  : cdn.staticfile.org/vue/2.2.2/v…
• unpkg：unpkg.com/vue@2.6.14/…。
• cdnjs : cdnjs.cloudflare.com/ajax/libs/v…

Vue实例化

1.模板

<div id="app"></div>

2.创建app

const app= Vue.createApp({
    data() {return {}}
})

3.挂载

app.mount("#app")

内置指令

内置指令v-开头的特殊属性 联系html模板与JavaScript数据类型

文本渲染

v-text指令

• ​ 1.作用：向其所在的节点中渲染文本内容。
• ​ 2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

v-html指令

• ​ 1.作用：向指定节点中渲染包含html结构的内容。
• ​ 2.与插值语法的区别：
• ​ (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
• ​ (2).v-html可以识别html结构。

属性渲染

v-bind指令

• HTML 属性中的值应使用 v-bind 指令。

  <div id="app">
        <p v-bind:title="msg">我是一个</p>
        <p :title="msg">我是一个</p>
        <button :disabled="!canUse">按钮</button>
    </div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                msg: "Vue3 棒棒",
                canUse: false,
            }
        }
    }).mount("#app")

条件渲染

v-if-else指令

• ​ v-if : 条件渲染（动态控制节点是否存存在）
• ​ v-else : 条件渲染（动态控制节点是否存存在）

<div id="app">
    <p v-if="isLog">欢迎回来，我的主人</p>
    <p v-else>请登录后操作!</p>
</div>
<script>
    Vue.createApp({
        data() {
            return { isLog: false }
        }
    }).mount("#app")
</script>

v-show指令

•  v-show : 条件渲染 (动态控制节点是否展示)

v-show与v-if指令

<div id="app">
    <p v-if="can">我会显示的</p>
    <p v-show="can">我也会显示show</p>
</div>
<script>
    Vue.createApp({
        data() {
            return { can: false }
        }
    }).mount("#app")
// v-show是通过css方法隐藏节点
// v-if直接移除节点方式隐藏
// 如果频繁切换显示与隐藏 v-show
// 偶尔切换显示隐藏用 v-if

列表指令渲染

v-for指令

• ​ v-for : 遍历数组/对象/字符串

<div id="app">
    <ul>
        <li v-for="(item,index) in list" :key="item">{{item}}-{{index+1}}</li>
    </ul>
    <!-- key属性为了让Vue内部给遍历的节点给一个唯一的标识，以便更好的去（排序过滤等操作）为了性能优化；key的要唯一 -->
</div>
<script>
    Vue.createApp({
        data() {
            return { list: ["Vue", "react", "angular"] }
        }
    }).mount("#app")

</script>

1. item 变量的当前数据
2. index 当前的下标

v-for遍历对象

<div id="app">
    <div v-for="(value,key) in obj" :key="key">{{key}}:{{value}}</div>
</div>
<script>
    Vue.createApp({
        data() {
            return { obj: { title: "Vue3入门", author: "木木", pdate: "2022-2-24" } }
        }
    }).mount("#app")

</script>

v-for范围

<div id="app">
    <p v-for="item in 5">{{item}}</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {}
        }
    }).mount("#app")

</script>

v-for与v-if同时使用时用template

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

</div>
<script>
    Vue.createApp({
        data() {
            return {}
        }
    }).mount("#app")

</script>

Vue事件

v-on指令

• ​ v-on : 绑定事件监听, 可简写为@

<div id="app">
    <p>
        <button @click="say">你好</button>
    </p>
</div>
<script>
    Vue.createApp({
        data() {
            return { num: 1 }
        },
        methods: {
            say(e) {
                console.log(e, e.target);
                alert("别点我" + this.num);
                this.num++;
            }
        }
    }).mount("#app")
</script>

备注：

​ 1.指令定义时不加v-，但使用时要加v-；

​ 2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。