vue：标签属性绑定Vue实例【ref，reactive，内置指令v-bind，v-on】,预定义变量、方法【$methods，$computed】

07-19 1105阅读

Vue2、3组件通信、双向绑定、插槽slot、内置指令_组件双向绑定-CSDN博客
Vue2，3响应式原理，ref和reactive，toRef和toRefs，shallowRef和shallowRefs_vue2 shallowref-CSDN博客

vue2【Options 选项API、mixin混入】，vue3【Composition 合成API、hooks】_vue3 hooks 转 vue2 mixin-CSDN博客
Vue2、3【响应式原理、API类型、生命周期、fragment】-CSDN博客

vue2.3对比版官方文档

常数：""

变量绑定

文本内容：插值{{}}

属性值：内置指令v-bind简写:，绑定属性到 Vue 实例中的数据

vue实例数据->标签

vue2：data(){return {属性：初始值}}

vue3：ref(基本类型)，reactive(引用类型)

computed计算值：监听多值，有缓存，依赖值发生变化触发重算，用于计算

vue2 函数

vue3对象字面量

vue实例数据标签

v-model:modelValue简写为v-model

v-model=v-bind(:)+v-on(@)

vue2：一个元素一个v-model，可自定义prop+event名

vue3：一个元素可多个v-model，修饰符，可用在自定义组件

vue实例方法{}、return

vue2.3对比版官方文档

常数：""

Hello

变量绑定

文本内容：插值{{}}

{{ message }}
{{ calculateBooksMessage() }}

属性值：内置指令v-bind简写:，绑定属性到 Vue 实例中的数据

内置指令:数据/事件关联DOM

将数据和事件处理程序与 DOM 元素关联，以实现动态数据渲染、事件处理、条件渲染、循环渲染等功能。

vue实例数据->标签

vue2：data(){return {属性：初始值}}

export default {
  data() {
    return {
      url: 'https://vuejs.org/'
    };
  }
}

vue3：ref(基本类型)，reactive(引用类型)

  import { ref, reactive, toRefs } from "vue"
  const name = ref('参宿')
  const state = reactive({
    name: 'Jerry',
    sex: '男'
  })

computed计算值：监听多值，有缓存，依赖值发生变化触发重算，用于计算

计算属性本质上是 computed watcher
缓存通过dirty控制
初始化时，计算属性并不会立即计算（vue的优化）
都支持函数（仅可读）、对象字面量（可写）写法
对象字面量：{键值对}，不使用类或者构造函数构建对象

Vue 会将数据变化缓冲在一个队列中，然后在一个事件循环中的下一个 tick（微任务队列）中才会执行更新 DOM 和触发相应的 Watcher 回调函数。

宏任务，微任务，事件循环event loop、setTimeout,setInterva、nextTick与process.nextTickl区别【示例讲解】_process.nexttick和vue的nexttick的区别-CSDN博客

vue2 函数

运行 this.fullName = 'John Doe' 时，收到警告
```
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed:{
 //  fullName计算属性的 getter
     fullName(){
        return this.firstName + ' ' + this.lastName
      }
    }
  }
}
```
vue3对象字面量

运行 this.fullName = 'John Doe' 时，setter 会被调用， this.firstName 和 this.lastName更新
```
  
    Full Name: {{ fullName }}
  


import { ref, computed } from 'vue'
const firstName = ref('John')
const lastName = ref('Doe')
//显式指定类型
const double = computed(() => count.value * 2);
const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // Note: we are using destructuring assignment syntax here.
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
```
vue实例数据标签

v-model:modelValue简写为v-model
```
// 可绑定多个v-model
```
除了传递基本的值之外，还可以传递其他类型，比如对象或数组。

主要用于表单元素（如输入框、复选框、单选框等input, textarea,select,radio,checkbox等用户输互动入事件）

v-model=v-bind(:)+v-on(@)
```
语法糖 等价于：
```
语法糖，简单来说就是『便捷写法』。

『双向绑定』当用户在输入框中输入文本时，userMessage 的值会实时更新，并且当 userMessage 的值改变时，输入框中的值也会自动更新。

『单向数据流』总结起来其实也就8个字：『数据向下，事件向上』。

vue2：一个元素一个v-model，可自定义prop+event名

*model 选项自定义 prop 和 event 的名称

默认情况下，v-model 会使用组件的 value 属性作为 prop 名，使用 input 事件来触发更新。
```
// 默认的 model 属性
export default {
  model: {
    prop: 'value',
    event: 'input'
  }
}
```
v-model="foo" 就完全等价于 :value="foo" 加上 @input="foo = $event"
1. 适应不同的数据源，与其他组件集成不会产生命名冲突。
2. 提高代码可读性：比起value更具有语义，使其他开发者更容易理解组件的预期用法和行为。
```
  


export default {
  props: {
    // 使用自定义的 prop 名 customProp
    customProp: String,
  },
  // 通过 model 选项自定义 v-model 的 prop 和事件名
  model: {
    prop: 'customProp',
    event: 'customEvent'
  }
  data() {
    return {
      internalValue: this.customProp
    };
  },
  methods: {
    // 使用自定义的事件名 customEvent
    updateParentValue(event) {
      this.internalValue = event.target.value;
      // 触发自定义事件，通知父组件更新值
      this.$emit('customEvent', this.internalValue);
    }
  },
};
```
*副作用：当绑定响应式对象上不存在的属性，会让它响应式
```
// template中：

// script中：
export default {
  data() {
    return {
      user: {
        name: '参宿7',
      }
    }
  }
}
```
vue3：一个元素可多个v-model，修饰符，可用在自定义组件

.trim：自动过滤输入的首尾空白字符。

.number：自动将用户的输入转为数值类型。

.lazy：将实时更新的input 事件改为移出输入焦点或回车的 change 事件，适用于大量输入，或者需要精确验证（邮件、号码）
```
 
 
 
```
vue实例方法 Submit function warn(message, event) { // 这里可以访问原生事件 if (event) { event.preventDefault() } alert(message) }
Vue 模板区域使用特定的语法来声明数据绑定、事件处理等。例如{{ }} 进行数据绑定，使用 @ 或 v-on 来绑定事件。

在Vue模板中要使用Vue 模板语法

Vue 的预定义变量、方法：$
- $event：原生 DOM 事件对象，传递事件对象给事件处理函数。
- $el：当前 Vue 实例所关联的根 DOM 元素
  
  $data，$props，$methods，$computed，$watch，$refs
  
  $emit：用于触发当前实例上的自定义事件，子传父/同级
  
  $on：用于在当前实例上监听事件，父监听子/同级
- Vue2、3组件通信、双向绑定、插槽slot、内置指令_组件双向绑定-CSDN博客
- $nextTick：在 DOM 更新完成之后执行回调函数，返回一个Promise
  
  事件修饰符
  
  在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的
  
  DOM事件流:捕获->冒泡（默认）
  - .stop：阻止事件向父组件传播（已经发生）
  - .prevent：防止事件向子组件传播（防止默认）
  - .self：从触发事件的元素自身发出时才触发
  - .capture：在捕获阶段触发，而不是默认的冒泡阶段
  - .once：只会触发一次
  - .passive：触摸事件的监听器，可以用来改善移动端设备的滚屏性能。
  - 按键/鼠标修饰符
    
    TIP
    
    请勿同时使用 .passive 和 .prevent，因为 .passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则 .prevent 会被忽略，并且浏览器会抛出警告。
```
...


...



...
```
    vue2：methods
```
  
    Say Hello
    Say Hello
  


export default {
  methods: {
    sayHello() {
      alert('Hello!');
    }
  }
}
```
    vue3.2之前：setup、方法名=()=>{}、return
```
  
    Say Hello
  


import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const sayHello = () => {
      alert('Hello!');
    };
    // 将 sayHello 方法返回给模板使用
    return {
      sayHello
    };
  }
});
```

VPS购买请点击我

vue：标签属性绑定Vue实例【ref，reactive，内置指令v-bind，v-on】,预定义变量、方法【$methods，$computed】

vue2.3对比版官方文档

常数：""

变量绑定

文本内容：插值{{}}

属性值：内置指令v-bind简写:，绑定属性到 Vue 实例中的数据

vue实例数据->标签

vue2：data(){return {属性：初始值}}

vue3：ref(基本类型)，reactive(引用类型)

computed计算值：监听多值，有缓存，依赖值发生变化触发重算，用于计算

vue2 函数

vue3对象字面量

vue实例数据标签

v-model:modelValue简写为v-model

v-model=v-bind(:)+v-on(@)

vue2：一个元素一个v-model，可自定义prop+event名

vue3：一个元素可多个v-model，修饰符，可用在自定义组件

vue实例方法 Submit function warn(message, event) { // 这里可以访问原生事件 if (event) { event.preventDefault() } alert(message) }

事件修饰符

vue2：methods

vue3.2之前：setup、方法名=()=>{}、return

相关阅读

aspx怎么对接支付接口?

一粒挺怎么吃?

齐博怎么样?

海哲蜇伤怎么办?

目录[+]