一、vue.js计算属性
计算属性关键词: computed
。
计算属性在处理一些复杂逻辑时是很有用的。
可以使用 methods
来替代 computed
,效果上两个都是一样的,但是 computed
是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods
,在重新渲染的时候,函数总会重新调用执行。
使用 computed
性能会更好,如果不希望缓存可以使用 methods
属性。
关于缓存(点击参考,感谢原作者):JS浏览器根据请求会去判断是否有缓存,内容(相关依赖)是否更新,再去下载。所以,如果computed
属性所指对象在第一次缓存,第二次调用时没有更新,将用原来的缓存,不再重复执行代码。
例如:
var cnt=1;
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
//只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。
//计算属性的 getter
reversedMessage: function () {
//`this` 指向 vm 实例
cnt+=1; //第二次因为 vm 对象没有发生改变,于是界面渲染就直接用cnt=2这个值,不再重复执行代码。
return cnt+this.message.split('').reverse().join('')
}
},
methods: {
//methods没有这个缓存,只要用一次,函数代码就执行一次,于是每次返回值都不一样。
reversedMessage2: function () {
cnt+=1;
return cnt+this.message.split('').reverse().join('')
}
}
})
computed
属性默认只有 getter
,不过在需要时可以提供一个 setter
。
setter
重新设置了data里属性值,所有有调用这个属性的,都会更新。
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: { //site里俩个函数get和set
// getter
get: function () { //return就是getter函数标志
return this.name + ' ' + this.url
},
// setter
set: function (newValue) { //改变对象值就是setter函数
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter, vm.name 和 vm.url 也会被对应更新
vm.site = '百度 http://www.baidu.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
运行结果:
百度 http://www.baidu.com
name:百度
url:http://www.baidu.com
二、vue.js监听
1.监听属性 watch
Vue.js 监听属性 watch
:响应数据的变化。
<div id = "computed_props">
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + ",修改后值为: " + newValue;
})
</script>
2.事件监听 v-on
(1)v-on指令
<div id="app">
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
(2)接受方法
<div id="app">
<button v-on:click="greet">Greet</button> // `greet` 是在下面定义的方法名
</div>
<script>
var app = new Vue({
el: '#app',
data: {
name: 'Vue.js'
},
methods: { #在 `methods` 对象中定义方法
greet: function (event) {
#`this` 在方法里指当前 Vue 实例
alert('Hello ' + this.name + '!')
#`event` 是原生 DOM 事件,event.target返回源对象
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>
(3)内联JS语句
<div id="app">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
say: function (message) {
alert(message)
}
}
})
</script>
3.修饰符
(1)事件修饰符
Vue.js通过由点(.)
表示的指令后缀来调用修饰符。
事件修饰符:
.stop:就是js中的event.stopPropagation()的缩写,它是用来阻止冒泡的
<!-- 阻止单击事件冒泡,不会一直传递,运行结束就是结束-->
<a v-on:click.stop="doThis"></a>
.prevent:就是js中event.preventDefault()的缩写,它是用来阻止默认行为的
<!-- 提交事件不再重载页面 ,submit不会提交-->
<form v-on:submit.prevent="onSubmit"></form>
.capture:捕获优先权——在传递的父子事件中,加了这个,无论先点哪个,都先执行这个。
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
.self:就是防止父元素(设置了该修饰符)的子元素的事件冒泡到父元素上,只有本身触发时才会执行事件处理程序(函数)
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
.once:每次页面重载后只会执行一次。
<!-- click 事件只能点击一次 -->
<a v-on:click.once="doThis"></a>
修饰符可以串联 :
<a v-on:click.stop.prevent="doThat"></a>
只有修饰符 :
<form v-on:submit.prevent></form>
捕获事件和冒泡事件(默认)是两种事件流,事件捕获是从document到触发事件的那个元素;冒泡事件是从下向上的触发事件
(2)按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
Vue 为最常用的按键提供了别名:
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
例子:
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
三、vue.js表单
v-model
指令在表单控件元素上创建双向数据绑定。
1.输入框input
<input v-model="message" placeholder="编辑我……">
2.文本区域框
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
3.复选框
<div id="app">
<p>单个复选框:</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多个复选框:</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
4.单选按钮
<input type="radio" id="runoob" value="Runoob" v-model="picked">
<label for="runoob">Runoob</label>
5.select列表
<div id="app">
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">
选择的网站是: {{selected}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
6.修饰符
(1).lazy
在默认情况下, v-model
在 input
事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy
,从而转变为在 change
事件中同步:
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
(2).number
如果想自动将用户的输入值转为 Number
类型(如果原值的转换结果为 NaN
则返回原值),可以添加一个修饰符 number
给 v-model
来处理输入值:
<input v-model.number="age" type="number">
这通常很有用,因为在 type="number"
时 HTML 中输入的值也总是会返回字符串类型。
(3).trim
如果要自动过滤用户输入的首尾空格,可以添加 trim
修饰符到 v-model
上过滤输入:
<input v-model.trim="msg">
四、vue.js组件
组件(Component)可以扩展 HTML 元素,封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。
注册一个全局组件语法格式如下:
Vue.component(tagName, options)
tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:
<tagName></tagName>
1.全局组件
所有实例都能用全局组件。
<div id="app">
<runoob></runoob>
</div>
<script>
// 注册
Vue.component('runoob', {
template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
2.局部组件
在实例选项中注册局部组件,这样组件只能在这个实例中使用。
<div id="app">
<runoob></runoob>
</div>
<script>
var Child = {
template: '<h1>自定义组件!</h1>'
}
// 创建根实例
new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': Child
}
})
</script>
3.Prop
prop 是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 “prop”。
<div id="app">
<child message="hello!"></child>
</div>
<script>
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
待思考!
五、vue.js自定义指令
注册一个全局指令 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>
使用 directives
选项来注册局部指令,这样指令只能在这个实例中使用:
<div id="app">
<p>页面载入时,input 元素自动获取焦点:</p>
<input v-focus>
</div>
<script>
// 创建根实例
new Vue({
el: '#app',
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
</script>
钩子
1.钩子函数
●bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
●inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
●update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
●componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
●unbind: 只调用一次, 指令与元素解绑时调用。
2.钩子函数参数
●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
})
指令函数可接受所有合法的 JavaScript 表达式,以下实例传入了 JavaScript 对象:
<div id="app">
<div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
</div>
<script>
Vue.directive('runoob', function (el, binding) {
// 简写方式设置文本及背景颜色
el.innerHTML = binding.value.text
el.style.backgroundColor = binding.value.color
})
new Vue({
el: '#app'
})
</script>