Vue 第一天

 

初始 Vue
        + 是一个渐进式框架
        + https://cn.vuejs.org/

      Vue 的版本
        + Vue@2
          => 只有一套语法
        + Vue@3
          => 有两套语法
            -> 选项式 API(等价于 Vue@2 的语法)
            -> 组合式 API

 const { createApp } = Vue

    createApp({
      data () {
        return {
          message: 'hello vue'
        }
      }
    }).mount('#app')

插值表达式 {{}} 

v- 

指令 v-text v-html

 /* 建议使用属性选择器来制作 */
    /* 页面上一个包含 v-cloak 属性的元素 */
    [v-cloak] {
      display: none;
    }
<div id="app" v-cloak>
    <p> 插值表达式渲染 : {{ message }} 111</p>
    <p> 插值表达式渲染 : {{ message }} 222</p>
    <p> 插值表达式渲染 : {{ message }} 333</p>
    <p> 插值表达式渲染 : {{ message }} 444</p>
    <p> 插值表达式渲染 : {{ message }} 555</p>
    <p> 插值表达式渲染 : {{ message }} 666</p>
    <p> 插值表达式渲染 : {{ message }} 777</p>
  </div>

boolean

 <button :disabled="isButtonDisabled">Button</button>

动态绑定       

 <p :style=[hi,s]>小案例 - 练习</p>
 createApp({
            data() {
                return {
                    users,
                    obj: {},
                    opj: {},
                    hi: {
                        'color': "red"
                    },
                    s: {
                        'fontSize': '20px'
                    }
                    // t: {
                    //     'display': 'none'
                    // }
                    // d: {
                    //     'display': 'none'
                    // },

                }
            },
            methods: {
                delHandler(id) {
                    this.users = this.users.filter(item => item.id !== id)
                },
                add() {
                    // this.t.display = 'block';
                    this.users.push(this.obj);
                    this.obj = {};
                },
                exit() {
                    this.d.display = 'block';
                    this.users[e] = this.opj
                    this.opj = {};
                },
                // qr(e) {
                //     // this.users[this.id] = {
                //     //     id: this.opj.id,
                //     //     name: this.opj.name,
                //     //     age: this.opj.age,
                //     //     gender: this.opj.gender
                //     // }
                //     this.users[e] = this.opj
                //     this.opj = {};
                // }
            }
        }).mount('#app')

多属性

  <p :="ihj"> 插值表达式渲染 : {{ message }} 111</p>

 

  ihj: {
            id: 'container',
            class: 'wrapper'
          }

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

• 在文本插值中 (双大括号)
• 在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

循环

  <tr v-for="item in users" :key="item.id">

 分支

  vue 指令 - 条件分支
        + 在 Vue 内提供了两个条件分支指令
          => v-show
          => v-if
        + 共同点: 会根据值的结果
          => 如果是 true, 有这个内容
          => 如果是 false, 没有这个内容
        + 区别1:
          => v-show 决定的显示不显示(控制 display)
          => v-if 决定渲染不渲染(控制有没有这一段结构)
        + 区别2:
          => v-show 只有自己一个人
          => v-if 有两个组合指令
            -> v-else-if
            -> v-else

 

  + 常见的事件修饰符
          => enter 修饰符, 表示按下的是 enter 键的时候触发
          => esc 修饰符, 表示按下的是 esc 键的时候触发
          => 基础按键 修饰符
          => prevent 修饰符, 自动阻止默认行为
          => stop 修饰符, 自动阻止事件传播
          => once 修饰符, 只能触发一次