vue开发体验
记录下vue开发过程中的一些理解,如有不足,希望大家多多提意见。
v-bind属性绑定
vue里面的数据绑定,是一种常见的元素操作,如v-bind:src,v-bind:class,v-bind:style等等。
//html代码
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
//js代码
data: {
isA: true,
isB: false
}
渲染为
<div class="static class-a"></div>
这是个官网的例子,再举一个常见的。我们一般对网页图片优化,需要考虑对图片懒加载(延迟加载)会写如下代码:
<img data-original="images/1.jpg" src="/js/grey.gif" />
1.jpg为需要加载的图片,grey.gif为加载前等待图片(图片高度只有1px),再引入js代码,进行控制修改,繁琐又不够灵活。而vue解决了这个问题。
<img v-bind:src="imgUrl">
ajax请求数据图片链接地址,写入data,监测到imgUrl变化,自动更新视图。后期可以根据具体的需求,做出相应的扩展。
组件开发
Vue是专门view数据渲染的MVVM框架,其中最核心的是组件开发。组件注册后便可以用在父实例的模块中,以自定义元素的形式使用要确保在初始化根实例之前注册了组件。这是官网的描述,重点是先注册组件,再初始化根实例Vue,否则组件注册失败。
全局组件注册
//html代码
<my-component></my-component>
//js代码
Vue.component('my-component', {
template: '<div>A custom component! <my-c1></my-c1></div>'
})
局部组件注册
局部注册组件,只能使用在父组件模板内
//html代码
<div id="Parent"></div>
//js代码
var Parent = Vue.extend({
template: '<div>I\'m Parent, My children: <my-c1></my-c1></div>',
components: {
//只能用在父组件模板
'my-c1':{
template: '<div>A custom component!</div>'
}
}
})
//组件实例化
new Parent({
el: '#Parent'
})
在组件命名上出现大写,如<my-c1Name></my-c1Name>,组件是注册失败。
组件通讯
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。
props
“prop”是组件数据的一个字段,期望从父组件传下来
//html代码
<child msg="hello!"></child>
//js代码
Vue.component('child', {
// 声明 props
props: ['msg'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
template: '<span>{{ msg }}</span>'
})
//渲染为
<span>hello!</span>
动态 Props
与v-bind属性绑定结合使用
//html代码
<child :msg="hello!"></child>
//js代码
Vue.component('child', {
// 声明 props
props: ['msg'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
template: '<span>{{ msg.a }}</span>'
})
new Vue({
el: '#app',
data:{
msgs: {
a: 1
}
}
})
与v-mode结合v-bind结合一起使用
//html代码
<input v-model="parentMsg">
<br>
<child :message="parentMsg"></child>
//js代码
Vue.component('child', {
// 声明 props
props: ['message'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
template: '<span>{{ message }}</span>'
})
new Vue({
el: '#app',
data:{
parentMsg: 'Message from parent'
}
})
参考文档
- vue.js官网http://cn.vuejs.org/guide/