基础

应用程序和组件实例

//创建一个应用程序实例
const app = Vue.createApp({ /* options */ })

const app = Vue.createApp({})
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)

//链式调用
Vue.createApp({})
  .component('SearchInput', SearchInputComponent)
  .directive('focus', FocusDirective)
  .use(LocalePlugin)

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})
const vm = app.mount('#app')

复制代码

生命周期

基础-LMLPHP

数据属性和方法

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

const vm = app.mount('#app')

console.log(vm.$data.count) // => 4
console.log(vm.count)       // => 4

// Assigning a value to vm.count will also update $data.count
vm.count = 5
console.log(vm.$data.count) // => 5

// ... and vice-versa
vm.$data.count = 6
console.log(vm.count) // => 6	
复制代码

Class 与 Style 绑定

//对象
<div :class="{ active: isActive }"></div>

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

data() {
  return {
    isActive: true,
    hasError: false
  }
}

//数组
<div :class="[activeClass, errorClass]"></div>
<div :class="[isActive ? activeClass : '', errorClass]"></div>
复制代码

事件处理

多事件处理器

事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：

<!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
<button @click="one($event), two($event)">
  Submit
</button>
复制代码

// ...
methods: {
  one(event) {
    // first handler logic...
  },
  two(event) {
    // second handler logic...
  }
}
复制代码

系统修饰键

`.exact` 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
复制代码

表单输入绑定

基础用法

文本 (Text)

<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>
复制代码

多行文本 (textarea)

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br />
<textarea v-model="message" placeholder="add multiple lines"></textarea>
复制代码

复选框 (Checkbox)

单个复选框，绑定到布尔值：

<input type="checkbox" id="checkbox" v-model="checked" />
<label for="checkbox">{{ checked }}</label>
复制代码

多个复选框，绑定到同一个数组：

<div id="v-model-multiple-checkboxes">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
  <label for="mike">Mike</label>
  <br />
  <span>Checked names: {{ checkedNames }}</span>
</div>
复制代码

Vue.createApp({
  data() {
    return {
      checkedNames: []
    }
  }
}).mount('#v-model-multiple-checkboxes')
复制代码

单选框 (Radio)

<div id="v-model-radiobutton">
  <input type="radio" id="one" value="One" v-model="picked" />
  <label for="one">One</label>
  <br />
  <input type="radio" id="two" value="Two" v-model="picked" />
  <label for="two">Two</label>
  <br />
  <span>Picked: {{ picked }}</span>
</div>
复制代码

Vue.createApp({
  data() {
    return {
      picked: ''
    }
  }
}).mount('#v-model-radiobutton')
复制代码

选择框 (Select)

单选时：

<div id="v-model-select" class="demo">
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
复制代码

Vue.createApp({
  data() {
    return {
      selected: ''
    }
  }
}).mount('#v-model-select')
复制代码

多选时 (绑定到一个数组)：

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br />
<span>Selected: {{ selected }}</span>
复制代码

值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle" />

<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>
复制代码

复选框 (Checkbox)

<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
复制代码

// when checked:
vm.toggle === 'yes'
// when unchecked:
vm.toggle === 'no'
复制代码

单选框 (Radio)

<input type="radio" v-model="pick" v-bind:value="a" />
复制代码

// 当选中时
vm.pick === vm.a
复制代码

Select Options

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>
复制代码

// 当被选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123
复制代码

修饰符

`.lazy`

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组织文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />
复制代码

`.number`

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number" />
复制代码

这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

`.trim`

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg" />
复制代码

组件基础

在组件上使用 v-model

自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：

<input v-model="searchText" />
复制代码

等价于：

<input :value="searchText" @input="searchText = $event.target.value" />
复制代码

当用在组件上时，v-model 则会这样：

<custom-input
  :model-value="searchText"
  @update:model-value="searchText = $event"
></custom-input>
复制代码

为了让它正常工作，这个组件内的 <input> 必须：

将其 value attribute 绑定到一个名叫 modelValue 的 prop 上
在其 input 事件被触发时，将新的值通过自定义的 update:modelValue 事件抛出

写成代码之后是这样的：

app.component('custom-input', {
  props: ['modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
})
复制代码

现在 v-model 就应该可以在这个组件上完美地工作起来了：

<custom-input v-model="searchText"></custom-input>
复制代码

在自定义组件中创建 v-model 功能的另一种方法是使用 computed property 的功能来定义 getter 和 setter。

在下面的示例中，我们使用计算属性重构 <custom-input> 组件。

请记住，get 方法应返回 modelValue property，或用于绑定的任何 property，set 方法应为该 property 触发相应的 $emit。

app.component('custom-input', {
  props: ['modelValue'],
  template: `
    <input v-model="value">
  `,
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) { this.$emit('update:modelValue', value)
      }
    }
  }
})
复制代码

PHP开发工程师

基础

基础

应用程序和组件实例

生命周期

数据属性和方法

Class 与 Style 绑定

事件处理

多事件处理器

系统修饰键

`.exact` 修饰符

表单输入绑定

基础用法

文本 (Text)

多行文本 (textarea)

复选框 (Checkbox)

单选框 (Radio)

选择框 (Select)

值绑定

复选框 (Checkbox)

单选框 (Radio)

Select Options

修饰符

`.lazy`

`.number`

`.trim`

组件基础

在组件上使用 v-model

结语

PHP开发工程师

基础

基础

应用程序和组件实例

生命周期

数据属性和方法

Class 与 Style 绑定

事件处理

多事件处理器

系统修饰键

.exact 修饰符

表单输入绑定

基础用法

文本 (Text)

多行文本 (textarea)

复选框 (Checkbox)

单选框 (Radio)

选择框 (Select)

值绑定

复选框 (Checkbox)

单选框 (Radio)

Select Options

修饰符

.lazy

.number

.trim

组件基础

在组件上使用 v-model

结语

`.exact` 修饰符

`.lazy`

`.number`

`.trim`