CDN(JS File)

CDN (Content delivery network)

借助 script 标签直接通过 CDN 来使用 Vue：

1

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

安装 vue-cli (Vue脚手架)

• 绑定方式

  • 选项式

    1 2 3 4 5 6 7

    new Vue({ el: '#root', data:{}, // 做了数据代理，双向绑定用 methods:{}, // 不作数据代理，事件方法用 computed:{}, // 计算属性，计算后得到的属性 watch:{} })

  • 单文件

    1 2 3 4 5 6 7

    export default { data() { return { 属性: 值 } } }

• 模板语法

  • 文本插值 Mustache 语法 (双大括号)
    • {{ 表达式 }} 可以使用vm里的属性 直接以变量形式，不能直接用window
  • 指令（v-属性）
    • v-bind:属性="表达式" :属性="表达式" 属性绑定，单向绑定
    • v-model: 双向绑定，只能用在输入类元素上（表单）
    • v-on:属性="点击事件函数" 默认传递事件对象
  • 解析
    • 任何数据发生变化时，模板都会重新解析一遍，用到的函数也会随着运行一遍

• 事件

  • 点击事件
    • 函数调用 可以替换成语句
    • @click="f1" 默认传递一个event对象，相当于 @click="f1($event)"
    • @click="f2(123)" 传递了一个参数，此时接收不到event对象
    • @click="f3($event, 123) 传递参数，并保留event对象，占位符$event 顺序可变
    • prevent @click.prevent="f()" 阻止 默认事件
    • stop 内层，阻止事件冒泡
    • once 只触发一次
    • capture 捕获模式，有线触发外层，与冒泡模式相反
    • self 冒泡不触发，只有事件target是当前元素才触发
    • @wheel.passive="f()" 默认行为立即执行

• 计算属性

  • computed(() => {}) 引用内部值变化时 跟着变化

Vue

前端框架 免除原始JS中的DOM操作

MVVM(Model-View-ViewModel) 双向绑定

视图+脚本

视图：

生命周期图示

生命周期钩子

组合式 API：生命周期钩子

最常用的是 mounted, updated, and unmounted.

main.js

1
2
3
4
5

// main.js
import { createApp } from 'vue'

// 创建应用，传入配置对象，mount进行挂载关联页面元素
createApp(App).mount('#app')

直接导入了方法，不需要像单文件一样使用Vue调用方法

数据的双向绑定，数据对象属性改变，页面数据也会跟着改变

组件实例

注册

全局注册

局部注册

创建运行

Web开发构建工具，相对CLI创建会更快。需要安装Node

创建项目： ``

1
2
3
4
5
6

> npm init vue@latest


> cd <your-project-name>
> npm install
> npm run dev

生产环境发布版本： npm run build

script

<script setup>

setup 代表使用 组合式api

export 导出

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script>
    export default{
        data(){
            return{ // 定义 data 的 property
                username:"RC"
            }
        },
        methods:{ // 定义 function
            changeUsername: function() {
                // this 指向 vue 实例
                this.username 
            }
        }
    }
</script>