vue入门教程（二）

8. 事件处理

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

  <button @click="test1">test1</button><button @click="test2('abc')">test2</button>

<script>new Vue({el: '#example',methods: {//  默认事件形参: event test1(event) {alert(event.target.innerHTML)},test2 (msg) {alert(msg)}}})
</script>

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

  <button @click="test3('abcd', $event)">test3</button>

<script>// ...methods:{  test3 (msg, event) {alert(msg+'---'+event.target.textContent)},}
</script>

事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js 通过由点 . 表示的指令后缀来调用修饰符。

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

下面演示一下stop和prevent和once

  <a href="http://www.baidu.com" @click.prevent="test4">百度一下</a><div style="width: 200px;height: 200px;background: red" @click="test5"><div style="width: 100px;height: 100px;background: blue" @click.stop="test6"></div></div>


<script>// ...methods:{  test4 () {alert('点击了链接')},test5 () {alert('out')},test6 () {alert('inner')},test7 () {alert('once')}}
</script>

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名： -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

9. 表单输入绑定

9.1 基础用法

你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

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

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

<div id="demo"><!-- 使用ajax提交表单，用prevent阻止默认事件 --><form action="/xxx" @submit.prevent="handleSubmit"><span>用户名: </span><input type="text" v-model="username"><br>
<span>密码: </span><input type="password" v-model="pwd"><br>
<span>性别: </span><input type="radio" id="female" value="女" v-model="sex"><label for="female">女</label><input type="radio" id="male" value="男" v-model="sex"><label for="male">男</label><br>
<span>爱好: </span><input type="checkbox" id="basket" value="basket" v-model="likes"><label for="basket">篮球</label><input type="checkbox" id="foot" value="foot" v-model="likes"><label for="foot">足球</label><input type="checkbox" id="pingpang" value="pingpang" v-model="likes"><label for="pingpang">乒乓</label><br>
<span>城市: </span><select v-model="cityId"><option value="">未选择</option><option :value="city.id" v-for="city in allCitys" :key="city.id">{{city.name}}</option></select><br><span>介绍: </span><textarea rows="10" v-model="info"></textarea><br><br>
<input type="submit" value="注册"></form>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({el: '#demo',data: {username: '',pwd: '',sex: '男',likes: ['foot'],allCitys: [{id: 1, name: '北京'}, {id: 2, name: '上海'}, {id: 3, name: '深圳'}],cityId: '2',info: ''},methods: {handleSubmit () {console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)alert('提交注册的ajax请求')}}})
</script>

页面效果如下：

9.2 修饰符

.lazy

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

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
{{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">

10. 生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({data: {a: 1},created: function () {// `this` 指向 vm 实例console.log('a is: ' + this.a)}
})
// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

下图展示了实例的生命周期：

11. 过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。

语法：

<transition name = "nameoftransition"><div></div>
</transition>

过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的，则 `v-` 是这些类名的默认前缀。如果你使用了，那么 v-enter 会替换为 my-transition-enter。

我们用一个实例演示一下：

  <style>/*指定过渡样式*/.xxx-enter-active, .xxx-leave-active {transition: opacity 1s}/*指定隐藏时的样式*/.xxx-enter, .xxx-leave-to {opacity: 0;}

.move-enter-active {transition: all 1s}
.move-leave-active {transition: all 3s}
.move-enter, .move-leave-to {opacity: 0;transform: translateX(20px)}</style>
</head>
<body>
<div id="demo"><button @click="show = !show">Toggle</button><transition name="xxx"><p v-show="show">hello</p></transition>
</div>

<hr>
<div id="demo2"><button @click="show = !show">Toggle2</button><transition name="move"><p v-show="show">hello</p></transition>
</div>


<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({el: '#demo',data: {show: true}})
new Vue({el: '#demo2',data: {show: true}})

</script>

效果如下：

12. 过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

你可以在一个组件的选项中定义本地的过滤器：

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

或者在创建 Vue 实例之前全局定义过滤器：

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

new Vue({// ...
})

下面我们做一个时间格式化的过滤器：

<!--功能: 对要显示的数据进行特定格式化后再显示注意: 并没有改变原本的数据, 可是产生新的对应的数据
-->
<!--需求: 对当前时间进行指定格式显示-->
<div id="test"><h2>显示格式化的日期时间</h2><p>{{time}}</p><p>最完整的: {{time | dateString}}</p><p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script>// 定义过滤器Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {// moment.js库可以看文档： https://momentjs.bootcss.com/return moment(value).format(format);})

new Vue({el: '#test',data: {time: new Date()},mounted () {setInterval(() => {this.time = new Date()}, 1000)}})
</script>

13. 指令

13.1 内置指令

常用的内置指令：

指令	功能
v:text	更新元素的 textContent
v-html	更新元素的 innerHTML
v-if	如果为 true, 当前标签才会输出到页面
v-else	如果为 false, 当前标签才会输出到页面
v-show	通过控制 display 样式来控制显示/隐藏
v-for	遍历数组/对象
v-on	绑定事件监听, 一般简写为@
v-bind	强制绑定解析表达式, 可以省略 v-bind
v-model	双向数据绑定
ref	指定唯一标识, vue 对象通过$refs 属性访问这个元素对象
v-cloak	防止闪现, 与 css 配合: [v-cloak] { display: none }

大部分指令之前的案例中已经使用过了，下面写一下刚才没有用到的指令。

  <style>[v-cloak] { display: none }</style>

<div id="example"><p v-cloak>{{msg}}</p><p v-text="content"></p>   <!--p.textContent = content--><p v-html="content"></p>  <!--p.innerHTML = content--><p ref="msg">vue可以通过$refs.msg访问我</p><button @click="hint">提示</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">new Vue({el: '#example',data: {msg: "hello vue",content: '<a href="http://www.baidu.com">百度一下</a>'},methods: {hint () {alert(this.$refs.msg.innerHTML)}}})
</script>

13.2 自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

注册全局指令：

Vue.directive('self_defined_name',{bind:function(el,binding){//do someting},inserted: function(el,binding){//do something},
}

注册局部指令：

new Vue({el:'#app',directives:{self_defined_name1:{bind:function(el,binding){//do something}inserted:function(el,binding){//do something},}
self_defined_name2:{bind:function(el,binding){//do something}inserted:function(el,binding){//do something},}}

})

下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

<div id="app"><p>页面载入时，input 元素自动获取焦点：</p><input v-focus>
</div><script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {// 当绑定元素插入到 DOM 中。inserted: function (el) {// 聚焦元素el.focus()}
})
// 创建根实例
new Vue({el: '#app'
})
</script>

钩子函数

指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次，指令与元素解绑时调用。

钩子函数的参数有：

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding

: 一个对象，包含以下属性：
- name: 指令名，不包括 v- 前缀。
- value: 指令的绑定值，例如： v-my-directive="1 + 1", value 的值是 2。
- oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression: 绑定值的表达式或变量名。例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
- arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
- modifiers: 一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

有时候我们不需要其他钩子函数，我们可以简写函数，如下格式：

Vue.directive('runoob', function (el, binding) {// 设置指令的背景颜色el.style.backgroundColor = binding.value.color
})

14. 插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

添加全局方法或者 property。如：vue-custom-element
添加全局资源：指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

14.1 开发插件

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

(function (window) {const MyPlugin = {}//插件对象必须有一个install方法MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = function () {console.log('Vue函数对象的myGlobalMethod()')}
// 2. 添加全局资源Vue.directive('my-directive',function (el, binding) {el.textContent = 'my-directive----'+binding.value})
// 4. 添加实例方法Vue.prototype.$myMethod = function () {console.log('vm $myMethod()')}}//向外暴露window.MyPlugin = MyPlugin
})(window)

14.2 使用插件

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({// ...组件选项
})

也可以传入一个可选的选项对象：

Vue.use(MyPlugin, { someOption: true })

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

我们把刚才自己写的插件引入进来：

<div id="test"><p v-my-directive="msg"></p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="vue-myPlugin.js"></script>
<script type="text/javascript">// 声明使用插件(安装插件: 调用插件的install())Vue.use(MyPlugin)
const vm = new Vue({el: '#test',data: {msg: 'HaHa'}})Vue.myGlobalMethod()vm.$myMethod()
new Object()
</script>