Vue 结构

• 绑定方式

  • 选项式

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

  • 单文件

    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(() => {}) 引用内部值变化时 跟着变化