vue基础（二）表单输入绑定v-model指令在表单<input>、<textarea>及<select>元素上创建双

表单输入绑定

v-model 指令在表单、及 <select> 元素上创建双向数据绑定</div> v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将

Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

模式：都是表单绑定写，段落标签显示

在文本区域插值 ({{text}}) 并不会生效，应用 v-model 来代替。

v-model 会自动与表单元素“相应的值value绑定”

ABC 这时候以value为准

v-model的修饰符

.lazy 添加 lazy 修饰符，从而转变为使用 change 事件进行同步

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

.number 将用户输入类型转为数字类型

.trim 自动过滤用户输入的空白符。

混入

var mixin = {}
var app = new Vue({
    mixins: [mixin],}

这样app就有mixin的方法和属性相同冲突时以自己为主，我觉得像继承

同名钩子函数会混合成一个数组。

自定义指令

全局

Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部

var vm = new Vue({
  el: '#app',
  directives:{
    focus:{
      inserted: function (el) {
        el.focus()
      }      
    }
  }
})

使用

<div id="app">
  <input v-focus>
</div>

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

渲染函数 render

new Vue({ 
  //render: h => h(App)  //App作为根组件在这里渲染
  render: h => {
    return h('div', { // 第一个参数div标签，第二个参数传入对象，
第三个参数可以传入字符串或者数组
      attrs: {
        id: 'box' // html自带的原生属性
      },
      style: {
        color: 'blue'
      }
    }, 'abc')    
  }
}).$mount('#app')

render：h=>{标签名，传入属性和事件，字符串或数组}

可以多重render渲染嵌套，还可以组件渲染

插件和组件

通过全局方法 Vue.use() 使用插件。

Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件

var Vue = require('vue')

var VueRouter = require('vue-router')

Vue.use(VueRouter)

局部组件导入 ‘import 组件名 from 'url'

components:{
	组件名
}

过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。

过滤器的使用：双花括号插值和 v-bind 表达式

<!-- 在双花括号中 -->
{{ message | capitalize }}
{{ message | filterA | filterB }} 要通过多个过滤器 意思是交
{{ message | filterA('arg1', arg2) }} 过滤器可以接受参数
message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，
表达式 arg2 的值作为第三个参数。

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
formatId就是过滤器

全局过滤器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

在一个组件中

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

vue基础（二）

表单输入绑定

混入

自定义指令

渲染函数 render

插件和组件

**过滤器 **

过滤器