記錄下vue開發過程中的一些理解，如有不足，希望大家多多提意見。 vue裡面的數據綁定，是一種常見的元素操作，如v-bind:src,v-bind:class,v-bind:style等等。 這是個官網的例子，再舉一個常見的。我們一般對網頁圖片優化，需要考慮對圖片懶載入（延遲載入）會寫如下代碼： 1
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/
