VUE笔记

v-model 在 input 事件中同步输入框的值与数据

.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

<input v-model.number="age" type="number">

这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

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

<input v-model.trim="msg">

自定义组件

全局组件 注册并使用

<div id="app">
    <runoob myMsg="哈哈哈"></runoob>
</div>
 
<script>
// 注册
Vue.component('runoob', {
  //prop 是子组件用来接受父组件传递过来的数据的一个自定义属性
  props: ['myMsg '],
  template: '<h1>{{ myMsg }}</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

局部组件 在实例选项中注册局部组件，这样组件只能在这个实例中使用：

<div id="app">
    <runoob></runoob>
</div>
 
<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}
 
// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})
</script>

动态 Prop 类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：

<div id="app">
    <div>
      <input v-model="parentMsg">
      <br>
      <child v-bind:message="parentMsg"></child>
    </div>
</div>
 
<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app',
  data: {
    parentMsg: '父组件内容'
  }
})
</script>

使用 v-bind 指令将 mydata 传到每一个重复的组件中：
（这里的mydata可以是别的命名，但是不能有大写字母）

<div id="app">
    <ol>
    <todo-item v-for="item in sites" v-bind:mydata="item"></todo-item>
    </ol>
</div>

<script>
Vue.component('todo-item', {
  props: ['mydata'],
  template: '<li>{{ mydata.text }}</li>'
})
new Vue({
  el: '#app',
  data: {
    sites: [
      { text: 'Runoob' },
      { text: 'Google' },
      { text: 'Taobao' }
    ]
  }
})
</script>