VUE2.0學(xué)習(xí)
核心庫只關(guān)注視圖層,但是vue并不只關(guān)注視圖，和angular一樣也有指令，過濾器這些東西# 全局安裝 vue-cli$ npm install --global vue-cli# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目$ vue init webpack my-project# 安裝依賴，走你$ cd my-project$ npm install$ npm run devnpm install vue-loader -save-dev { test: /\.js$/, // 用正則來匹配文件路徑，這段意思是匹配 js 或者 jsx loader: 'babel'// 加載模塊 "babel" 是 "babel-loader" 的縮寫}, { test: /\.vue$/, loader: 'vue'}vue: { loaders: { js: 'babel' } }{ "presets": ["es2015","stage-0","stage-1","stage-2","stage-3"]// "plugins": ["transform-runtime"]} resolve: { extensions: ['', '.js', '.json', '.scss', '.vue'] }npm install vue -savenpm install vue-template-compiler -saveimport Vue from 'vue'import AppContainer from '../containers/AppContainer'const app = new Vue({ render: h => h(AppContainer),}).$mount('#app')// new Vue({// el:'#app',// render: h => h(App)// })<template> <div> {{msg}} </div></template><style> body{ background-color:#ff0000; }</style><script> export default{ data(){ return{ msg:'hello vue' } } }</script>實(shí)例.動(dòng)態(tài)屬性名實(shí)例.$實(shí)例屬性名獲取this.a去獲取動(dòng)態(tài)屬性this.$data去獲取實(shí)例屬性var data = {a: 1} const app = new Vue({ // 和數(shù)據(jù)相關(guān)的都掛載到data上 data: data, // 和方法相關(guān)的都掛載到methods上 methods: { // this和$的使用 func1: function () { console.log(this.a); console.log(this.$data.a); }, changeData:function () { this.a=2 } } }) // 先監(jiān)聽再改變 app.$watch('a', function (newVal, oldVal) { console.log(newVal) console.log(oldVal) }) // 值改變之后會(huì)自動(dòng)執(zhí)行監(jiān)聽方法 // data的值是可以直接改變的，和react的setState方法不一樣，因?yàn)関ue里面用了ES6的set和get方法，可以起到自動(dòng)監(jiān)聽的作用 app.a=3 // 動(dòng)態(tài)屬性和實(shí)例屬性// console.log(app)// console.log(app.a)// console.log(app.$data.a)
// 錯(cuò)誤的寫法<div id="{{id}}"></div>// 正確的寫法<div v-bind:id="id"></div>{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>{{ message | capitalize }}{{ message | filterA | filterB }}new Vue({ // ... filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } }})<a v-on:click="doSomething"><form v-on:submit.prevent="onSubmit"></form><!-- 完整語法 --><a v-bind:href="url"></a><!-- 縮寫 --><a :href="url"></a><!-- 完整語法 --><a v-on:click="doSomething"></a><!-- 縮寫 --><a @click="doSomething"></a>計(jì)算屬性 vs methods
<template> <div> <p>Original message: "{{ message }}{{name}}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> <p>Computed reversed message: "{{ reverseMessage() }}"</p> </div></template><style> body{ background-color:#ff0000; }</style><script> export default{ data(){ return{ message: 'Hello', name:'a' } }, mounted(){ this.name="b" }, computed: { reversedMessage: function () { console.log('計(jì)算屬性被調(diào)用了') return this.message.split('').reverse().join('') } }, methods: { reverseMessage: function () { console.log('方法被執(zhí)行了') return this.message.split('').reverse().join('') } } }</script>計(jì)算屬性 vs watch
<!--頁面--><div id="demo">{{ fullName }}</div> //watch寫法 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 } } }) //計(jì)算屬性的寫法 //本質(zhì)是你要獲取全名 var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } })計(jì)算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] } }}<template>標(biāo)簽包裹，v-if作用在template標(biāo)簽上<template> 語法 <my-components is="todo-item" v-for="(item, index) in todos" v-bind:title="item" v-on:remove="item.splice(index, 1)" > </my-components>// <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 }) }}<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>methods: { warn: function (message, event) { // 現(xiàn)在我們可以訪問原生事件對象 if (event) event.preventDefault() alert(message) }}<!-- 阻止單擊事件冒泡 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重載頁面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修飾符可以串聯(lián) --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修飾符 --><form v-on:submit.prevent></form><!-- 添加事件偵聽器時(shí)使用時(shí)間捕獲模式 --><div v-on:click.capture="doThis">...</div><!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) --><div v-on:click.self="doThat">...</div><!-- the click event will be triggered at most once --><a v-on:click.once="doThis"></a><!-- 只有在 keyCode 是 13 時(shí)調(diào)用 vm.submit() --><input v-on:keyup.13="submit"><!-- 同上 --><input v-on:keyup.enter="submit"><!-- 縮寫語法 --><input @keyup.enter="submit"><!--全部的按鍵別名：--> enter tab delete (捕獲 “刪除” 和 “退格” 鍵) esc space up down left right ctrl alt shift meta// 可以使用 v-on:keyup.f1Vue.config.keyCodes.f1 = 112<textarea></textarea>并不會(huì)生效，應(yīng)用v-model來代替<input type="radio" v-model="pick" v-bind:value="a"><!-- 在 "change" 而不是 "input" 事件中更新 --><input v-model.lazy="msg" >Vue.component('soupfree', { template: '<div>湯免費(fèi)</div>' }) const app = new Vue({ el:'#example' })<template> <div> 姓名：湯免費(fèi)，年齡：{{age}},性別：{{genderSex}} </div></template><style scope> div{ background-color:orange; }</style><script> export default{ data(){ return{ } }, props:['age','genderSex'] }</script><template> <div> <soup-free></soup-free> {{msg}} </div></template><style> body{ background-color:#ff0000; }</style><script> import soupfree from '../components/soupfree.vue' export default{ data(){ return{ msg:'hello vue' } }, components:{ 'soup-free':soupfree } }</script>當(dāng)你在一些特殊標(biāo)簽如table，ul，ol，select中使用自定義組件的時(shí)候會(huì)有一些限制
<table> <my-row>...</my-row></table> <table> <tr is="my-row"></tr> </table>應(yīng)當(dāng)注意，如果您使用來自以下來源之一的字符串模板，這些限制將不適用：
<script type="text/x-template">☆在自定義組件中data屬性必須是函數(shù)形式☆
<!-- 傳遞實(shí)際的數(shù)字 --><comp v-bind:some-prop="1"></comp>Vue.component('currency-input', { template: ' <span> $ <input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)" > </span> ', props: ['value'], methods: { // 不是直接更新值，而是使用此方法來對輸入值進(jìn)行格式化和位數(shù)限制 updateValue: function (value) { var formattedValue = value // 刪除兩側(cè)的空格符 .trim() // 保留 2 小數(shù)位 .slice(0, value.indexOf('.') + 3) // 如果值不統(tǒng)一，手動(dòng)覆蓋以保持一致 if (formattedValue !== value) { this.$refs.input.value = formattedValue } // 通過 input 事件發(fā)出數(shù)值 this.$emit('input', Number(formattedValue)) } }})// 在根組件中注冊bus屬性const app = new Vue({ data:{ bus:new Vue() }, render: h => h(AppContainer),}).$mount('#app')// 在子組件中使用this.$root.bus.$emit('eventName',2323)組件的異步加載
組件命名規(guī)范
組件的遞歸調(diào)用
<unique-name-of-my-component name="unique-name-of-my-component"></unique-name-of-my-component>組件的循環(huán)引用
內(nèi)聯(lián)模板
x-Templates
友情鏈接：龍馬行空博客
聯(lián)系客服
