vue
快速构建vue-cli脚手架传送门:
http://blog.csdn.net/nideshijian/article/details/62227890
https://www.cnblogs.com/ganmy/p/6029774.html
基础教程
<p v-if="seen">现在你看到我了</p> //添加else块 <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1>
<li v-for="todo in todos"> {{ todo.text }} </li>
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop",类似于一个自定义属性
// 这个属性名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
<div id="app-7">
<ol>
<!-- 现在我们为每个todo-item提供待办项对象 -->
<!-- 待办项对象是变量,即其内容可以是动态的 -->
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: '蔬菜' },
{ text: '奶酪' },
{ text: '随便其他什么人吃的东西' }
]
}
})
7. 纯HTML <div v-html="rawHtml"></div> 双大括号会将数据解释为纯文本,而非 HTML 。为了输出真正的 HTML ,需要使用 v-html
指令
8. 使用js表达式:每个绑定都只能包含单个表达式
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
9.过滤器用于文本格式化
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
{{ message | capitalize }}
{{ message | filterA | filterB }}//过滤器可以串联
{{ message | filterA('arg1', arg2) }}//过滤器是 JavaScript 函数,因//此可以接受参数:
//这里,字符串 'arg1' 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数
10. 修饰符:用于指出一个指定应该以特殊方式绑定
<form v-on:submit.prevent="onSubmit"></form>//.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
11. 缩写
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
12. 计算属性:
计算属性可以通过函数调用达到同样的效果;
不过计算属性是基于它的依赖缓存,只有在它的相关依赖发生改变是才会更新重新取值;
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div>
var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } } })
默认只提供getter,需要时也可以提供一个setter
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
13. Watched Property
方法 $watch
,用于观察 并响应Vue 实例上的数据变动。
当你想要在数据变化响应时,执行异步操作或昂贵操作时,这是很有用的。
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
14. 样式绑定
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> data: { isActive: true, hasError: false }
数组语法:
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
当有多个条件 class 时这样写有些繁琐。可以在数组语法中使用对象语法:
<div v-bind:class="[{ active: isActive }, errorClass]">
绑定内联样式:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
直接绑定到一个样式对象通常更好,让模板更清晰:同样的,对象语法常常结合返回对象的计算属性使用。
<div v-bind:style="styleObject"></div> data: { styleObject: { color: 'red', fontSize: '13px' } }
v-bind:style
的数组语法可以将多个样式对象应用到一个元素上:
<div v-bind:style="[baseStyles, overridingStyles]">
v-if
是一个指令,需要将它添加到一个元素上。但是如果我们想切换多个元素呢?此时我们可以把一个 <template>
元素当做包装元素,并在上面使用 v-if
,最终的渲染结果不会包含它。<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
v-show 始终渲染,只是控制了display属性;另外v-show不支持<template>语法;适合频繁切换
v-for
块中,我们拥有对父作用域属性的完全访问权限。 v-for
还支持一个可选的第二个参数为当前项的索引。<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul> var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
如同 v-if
模板,也可以用带有 v-for
的 <template>
标签来渲染多个元素块。
key://todo
变异数组:
Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新。这些方法如下:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
重塑数组:
变异方法(mutation method),顾名思义,会改变被这些方法调用的原始数组。相比之下,也有非变异(non-mutating method)方法,例如: filter()
, concat()
, slice()
。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组,Vue 实现了一些智能启发式方法来最大化 DOM 元素重用,这并不会导致 Vue 丢弃现有 DOM 并重新渲染整个列表,效率高效;
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
数据更新不能检测跟新dom的解决方法:
由于 JavaScript 的限制, Vue 不能检测以下变动的数组:
- 当你直接设置一个项的索引时,例如:
vm.items[indexOfItem] = newValue ====》Vue.set(example1.items, indexOfItem, newValue)
或者 example1.items.splice(indexOfItem, 1, newValue)
- 当你修改数组的长度时,例如:
vm.items.length = newLength ======》example1.items.splice(newLength)
显示数组处理后的副本而不实际改变原始数据的解决方法:计算属性或者方法
计算属性:
<li v-for="n in evenNumbers">{{ n }}</li> data: { numbers: [ 1, 2, 3, 4, 5 ] }, computed: { evenNumbers: function () { return this.numbers.filter(function (number) { return number % 2 === 0 }) } }
调用方法:
<li v-for="n in even(numbers)">{{ n }}</li> data: { numbers: [ 1, 2, 3, 4, 5 ] }, methods: { even: function (numbers) { return numbers.filter(function (number) { return number % 2 === 0 }) } }
17:事件处理
HTML中监听事件:1.看html轻松定位对应方法2无需js手动绑定代码,和dom完全解耦3档viewmodel销毁,所有的事件处理器都会被自动销毁,无须担心如何自己清楚他们。
js代码与定义方法:
var example2 = new Vue({
el: '#example-2',
data: {
counter:0,
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
},
} }) //写js代码执行 <div id="example-1"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div>
//定义方法调用 <div id="example-2"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div>
//内联处理器方法
$event
把它传入方法:
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题, Vue.js 为 v-on
提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
<!-- 阻止单击事件冒泡 --> <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>
按键修饰符
<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit"> <!-- 同上记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名: --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit">
Vue.config.keyCodes.f1 = 112 //可以通过全局config.keyCodes
对象自定义按键修饰符别名:
按键别名
- enter
- tab
- delete (捕获 “删除” 和 “退格” 键)
- esc
- space
- up
- down
- left
- right
18. 表单控件绑定
v-model
本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。
v-model
并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。
checkbox 单选绑定到属性为true或者false;绑定到数组为选中的数组集合;
单选时想绑定 value 到 Vue 实例的一个动态属性上,这时可以用 v-bind
实现,并且这个属性的值可以不是字符串。
<input type="checkbox" v-model="toggle" v-bind:true-value="a v-bind:false-value="b"> // 当选中时 vm.toggle === vm.a // 当没有选中时 vm.toggle === vm.b
修饰符:
在默认情况下, v-model
在 input
事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy
,从而转变为在 change
事件中同步:
<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" >
<input v-model.number="age" type="number">//如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值: <input v-model.trim="msg">//如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:
19 组件
扩展html元素,封装可充用的代码
局部注册:不必在全局注册每个组件。通过使用组件实例选项注册,可以使组件仅在另一个实例/组件的作用域中可用;
var Child = { template: '<div>A custom component!</div>' } new Vue({ // ... components: { // <my-component> 将只在父模板可用 'my-component': Child } })