vue 学习笔记（二）

时间  2019-11-24
标签 vue 学习 笔记 繁體版
原文   原文链接

最近公司赶项目，一直也没时间看 vue，以前看下的都快忘得差很少了。哈哈哈，来一块儿回顾一下vue 学习笔记（一）后，继续向下看嘛。html

#表单输入绑定

基础用法vue

  1. v-model 会忽略全部表单元素的 value、checked、selected 特性的初始值而老是将 Vue 实例的数据做为数据来源。你应该经过 JavaScript 在组件的 data 选项中声明初始值。
  2. 对于须要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程当中获得更新。若是你也想处理这个过程，请使用 input 事件。（手敲一个“中文”，在输入法中有“zhongwen”的拼音，而且有“中文”等选项能够选择，从输入拼音，到选择结束，这个过程就叫作 “输入法组合文字过程”）

譬如：webpack

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

在文本区域插值 (<textarea></textarea>) 并不会生效，应用 v-model 来代替。web

顺便了解一下 white-space 的属性值：json

  • pre 按给的文字格式显示
  • pre-line 合并多个空白符，但可正常换行
  • pre-wrap 保留多个空白符，能够正常换行
  • no-wrap 不换行
  • inherit 从符元素继承 white-space 属性值
  • normal 默认。空白会被浏览器忽略

当有多个同类型表单元素时，通常都加上 value。譬如：数组

// 单个复选框，绑定到布尔值
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

// 多个复选框，绑定到同一个数组
<div id='example-3'>
  <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>

技巧说明：浏览器

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

若是 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户没法选择第一个选项。由于这样的状况下，iOS 不会触发 change 事件。所以，更推荐像上面这样提供一个值为空的禁用选项。ide

值绑定函数

对于单选按钮，复选框及选择框的选项，v-model 绑定的值一般是静态字符串 (对于复选框也能够是布尔值)，但有时咱们可能想把值绑定到 Vue 实例的一个动态属性上，这时能够用 v-bind 实现，而且这个属性的值能够不是字符串。譬如：post

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

// 单选
<input type="radio" v-model="pick" v-bind:value="a">

// 下拉列表
<select v-model="selected">
    <!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>
// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'

// 当选中时
vm.pick === vm.a

// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123

这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性，由于浏览器在提交表单时并不会包含未被选中的复选框。若是要确保表单中这两个值中的一个可以被提交，(好比“yes”或“no”)，请换用单选按钮。

并无理解到 true-value 和 false-value 有什么用？ // todo

修饰符

  1. .lazy 在默认状况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你能够添加 lazy 修饰符，从而转变为使用 change 事件进行同步.(有丢丢没理解上 // todo)譬如：
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
  1. .number 想自动将用户的输入值转为数值类型，能够给 v-model 添加 number 修饰符;即便在 type="number" 时，HTML 输入元素的值也总会返回字符串。
  2. .trim 过滤用户输入的首尾空白字符

组件基础

#组件

由于组件是可复用的 Vue 实例，因此它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

一个组件的 data 选项必须是一个函数，所以每一个实例能够维护一份被返回对象的独立的拷贝。不然，点击某一个按钮，会影响其余实例。

data: function () {
  return {
    count: 0
  }
}

组件注册分为 全局注册 和 局部注册 两种。
定义组件名的方式有两种：kebab-case 和 PascalCase。
譬如：

Vue.component('my-component-name', { /* ... */ })
Vue.component('MyComponentName', { /* ... */ })

当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法均可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

全局注册，在注册以后能够用在任何新建立的 Vue 根实例 (new Vue) 的模板中,在子组件各自内部也均可以相互使用。

局部组件

全局注册每每是不够理想的。好比，若是你使用一个像 webpack 这样的构建系统，全局注册全部的组件意味着即使你已经再也不使用一个组件了，它仍然会被包含在你最终的构建结果中。这形成了用户下载的 JavaScript 的无谓的增长。

对于 components 对象中的每一个属性来讲，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

局部注册的组件在其子组件中不可用

// 传统声明组件方式
var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

// 经过 Babel 和 webpack 使用 ES2015 模块
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

使用 require.context 只全局注册这些很是通用的基础组件。

#prop

当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名须要使用其等价的 kebab-case (短横线分隔命名) 命名。可是，重申一次，若是你使用字符串模板，那么这个限制就不存在了。譬如：

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],  // 也能够是 json 对象格式
  template: '<h3>{{ postTitle }}</h3>'
})
<blog-post post-title="hello"></blog-post>

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- 动态赋予一个复杂表达式的值 -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>

<!-- 即使 `42` 是静态的，咱们仍然须要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>

<!-- 包含该 prop 没有值的状况在内，都意味着 `true`。-->
<blog-post is-published></blog-post>

<!-- 即使 `false` 是静态的，咱们仍然须要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>

即使 42 是静态的，咱们仍然须要 v-bind 来告诉 Vue 这是一个 JavaScript 表达式而不是一个字符串。传入数组，对象都是同样的。详情见官网

全部的 prop 都使得其父子 prop 之间造成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，这样能够防止子组件意外改变父组件的状态。不该该在一个子组件内部改变 prop。常见的两种试图改变 prop 情形：

  1. 这个 prop 用来传递一个初始值；这个子组件接下来但愿将其做为一个本地的 prop 数据来使用。这种状况下，会定义一个data 属性来存储这个 prop 值。
props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}
  1. _这个 prop 以一种原始的值传入且须要进行转换。_在这种状况下，最好使用这个 prop 的值来定义一个计算属性：
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

注意在 JavaScript 中对象和数组是经过引用传入的，因此对于一个数组或对象类型的 prop 来讲，在子组件中改变这个对象或数组自己将会影响到父组件的状态。

为了定制 prop 的验证方式，你能够为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。譬如：

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 匹配任何类型)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组且必定会从一个工厂函数返回默认值
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

注意那些 prop 会在一个组件实例建立以前进行验证，因此实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

type 能够是下列原生构造函数中的一个：

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

额外的，type 还能够是一个自定义的构造函数，而且经过 instanceof 来进行检查确认。例如，给定下列现成的构造函数：

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

Vue.component('blog-post', {
    props: {
        author: Person
    }
})

来验证 author prop 的值是不是经过 new Person 建立的。

#自定义事件

事件名不会被用做一个 JavaScript 变量名或属性名，因此就没有理由使用 camelCase 或 PascalCase 了。而且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (由于 HTML 是大小写不敏感的)，因此 v-on:myEvent 将会变成 v-on:myevent——致使 myEvent 不可能被监听到。

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，可是像单选框、复选框等类型的输入控件可能会将 value 特性用于不一样的目的。model 选项能够用来避免这样的冲突：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})
<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的属性将会被更新。

PS: 注意你仍然须要在组件的 props 选项里声明 checked 这个 prop。

羡慕和追逐强者，是男人生来融入血脉的天性。 一一 俗念亲 《每次跳楼，都看见那厮在铺救生气垫》

天气转凉，请预防感冒！这不是广告，是忠告。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程