Vue.js的基本使用 学习笔记
生活随笔
收集整理的這篇文章主要介紹了
Vue.js的基本使用 学习笔记
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
VUE的基本使用 學(xué)習(xí)筆記
一、 簡(jiǎn)介
二、 安裝
三 、 創(chuàng)建項(xiàng)目
創(chuàng)建一個(gè)基于webpack模板的項(xiàng)目
vue init webpack myVue 之后需要進(jìn)行一些配置 ， 默認(rèn)情況下直接回車即可測(cè)試運(yùn)行
npm run dev 在瀏覽器中訪問(wèn) localhost:8080| build | 項(xiàng)目構(gòu)建(webpack)相關(guān)代碼 |
| config | 配置目錄，包括端口號(hào)等。我們初學(xué)可以使用默認(rèn)的。 |
| node_modules | npm加載的項(xiàng)目依賴模塊 |
| src | 這是我們要開(kāi)發(fā)的目錄 ，基本上要做的事情都在這個(gè)目錄里面 ， 里面包含了幾個(gè)目錄及文件 ： 1. assets ： 放置一些圖片 如logo等 2. components : 里面放了一些組件文件 ， 可以不用 3. App.vue : 項(xiàng)目的入口文件 ， 我們可以將組件直接寫(xiě)在這里 。 4. main.js : 項(xiàng)目的核心文件 |
| static | 靜態(tài)資源文件 ， 如圖片 、 字體等 |
| test | 初始測(cè)試目錄 ， 可以刪除 |
| .xxx 文件 | 這是一些配置文件 |
| index.html | 首頁(yè)入口文件 ， 你可以添加一些mate信息或統(tǒng)計(jì)代碼啥的 |
| package.json | 項(xiàng)目配置文件 |
| README.md | 項(xiàng)目的說(shuō)明文檔 markdown 格式 |
4. vue文件結(jié)構(gòu) （以App.vue為例）
<!-- 展示模板 --><template><div id="app"><img src="./assets/logo.png"><hello></hello></div></template><!--js代碼--><script>// 導(dǎo)入組件import Hello from './components/Hello'export default {name: 'app',components: {Hello}}</script><!-- 樣式代碼 --><style>#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}</style> 1. 嘗試修改vue文件中的內(nèi)容 ， 發(fā)現(xiàn)一般情況下 ， 修改vue文件之后 ， 瀏覽器中的界面會(huì)自動(dòng)刷新四 、 安裝vue 調(diào)試神器
安裝 ：
從git 上獲取資源后安裝：
從git上獲取資源
git地址： https://github.com/vuejs/vue-devtools解壓后 cmd進(jìn)入到解壓目錄 安裝所需的依賴模塊
npm install // 如果覺(jué)得速度太慢 可以將npm 升級(jí)成為 cnpm 執(zhí)行cnpm install編譯項(xiàng)目文件
npm run build五、 模板語(yǔ)法
數(shù)據(jù)綁定：
文本：
數(shù)據(jù)綁定最常見(jiàn)的形式就是使用 {{…}}（雙大括號(hào)）的文本插值：
<div id="app"><p>{{ message }}</p> </div> <script> new Vue({el: '#app',data: {message: 'hello world'} }) </script>html :
使用 v-html 指令用于輸出 html 代碼：
<div id="app"><div v-html="message"></div> </div><script> new Vue({el: '#app',data: {message: '<h1> hello world</h1>'} }) </script>屬性：
以下實(shí)例判斷 class1 的值，如果為 true 使用 class1 類的樣式，否則不使用該類：
<div id="app"><label for="r1">修改顏色</label><input type="checkbox" v-model="class1" id="r1"><br><br><div v-bind:class="{'class1': class1}">directiva v-bind:class</div> </div><script> new Vue({el: '#app',data:{class1: false} }); </script>表達(dá)式：
Vue.js 都提供了完全的 JavaScript 表達(dá)式支持。
{{5+5}}{{ ok ? ‘YES’ : ‘NO’ }}
{{ message.split(”).reverse().join(”) }} hello world new Vue({ el: '#app', data: { ok: true, message: 'RUNOOB', id : 1 } })
指令 ：
指令用于在表達(dá)式值改變時(shí) ， 將某些行為應(yīng)用到DOM上 。
<div id="app"><p v-if="seen">現(xiàn)在你看到我了</p> </div><script> new Vue({el: '#app',data: {seen: true} }) </script>參數(shù) ：
參數(shù)在指令后以冒號(hào)指明。例如， v-bind 指令被用來(lái)響應(yīng)地更新 HTML 屬性：
<div id="app"><pre><a v-bind:href="url">hello world</a></pre> </div><script> new Vue({el: '#app',data: {url: 'http://www.runoob.com'} }) </script> 在這里 href 是參數(shù)，告知 v-bind 指令將該元素的 href 屬性與表達(dá)式 url 的值綁定。另一個(gè)例子是 v-on 指令，它用于監(jiān)聽(tīng) DOM 事件：
<a v-on:click="doSomething">修飾符 ：
修飾符是以半角句號(hào) . 指明的特殊后綴，用于指出一個(gè)指定應(yīng)該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對(duì)于觸發(fā)的事件調(diào)用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>用戶輸入：
在 input 輸入框中我們可以使用 v-model 指令來(lái)實(shí)現(xiàn)雙向數(shù)據(jù)綁定:
<div id="app"><p>{{ message }}</p><input v-model="message"> </div><script> new Vue({el: '#app',data: {message: 'Runoob!'} }) </script>按鈕的事件我們可以使用v-on 監(jiān)聽(tīng)事件 ， 并對(duì)用戶的輸入做出響應(yīng)
以下實(shí)例在用戶點(diǎn)擊按鈕后對(duì)字符串進(jìn)行翻轉(zhuǎn)操作：
{{ message }}
反轉(zhuǎn)字符串 new Vue({ el: '#app', data: { message: 'Runoob!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })過(guò)濾器 ：
vue.js 允許你定義自己的過(guò)濾器 ， 被用作一些不常用的文格式化操作 。 由”管道符”指示 ， 格式如下：
<div id="app">{{ message | capitalize }} </div><script> new Vue({el: '#app',data: {message: 'runoob'},filters: {capitalize: function (value) {if (!value) return ''value = value.toString()return value.charAt(0).toUpperCase() + value.slice(1)}} }) </script>過(guò)濾器可以串聯(lián) ：
{{ message | filterA | filterB }}過(guò)濾器也是javaScript函數(shù) ， 因此可以接收參數(shù)：
{{ message | filterA('arg1', arg2) }} 這里message 作為過(guò)濾器的第一個(gè)參數(shù) ， 字符串‘a(chǎn)rg1’將傳給過(guò)濾器作為第二個(gè)參數(shù) ， arg2 表達(dá)式的值將被求值然后傳給過(guò)濾器作為第三個(gè)參數(shù) 。縮寫(xiě) ：
v-bind縮寫(xiě)：
<!-- 完整語(yǔ)法 --> <a v-bind:href="url"></a> <!-- 縮寫(xiě) --> <a :href="url"></a>v-on 縮寫(xiě) ：
<!-- 完整語(yǔ)法 --> <a v-on:click="doSomething"></a> <!-- 縮寫(xiě) --> <a @click="doSomething"></a>六 、 vue.js 條件與循環(huán)
條件判斷 ：
v-if : 用于條件判斷
<div id="app"><p v-if="seen">現(xiàn)在你看到我了</p><template v-if="ok"><h1>hello world</h1><p>學(xué)的不僅是技術(shù)，更是夢(mèng)想！</p><p>哈哈哈，打字辛苦啊！！！</p></template> </div><script> new Vue({el: '#app',data: {seen: true,ok: true} }) </script>v-else : 可以用 v-else 指令給 v-if 添加一個(gè) “else” 塊：
<div id="app"><div v-if="Math.random() > 0.5">Sorry</div><div v-else>Not sorry</div> </div><script> new Vue({el: '#app' }) </script>v-else-if : v-else-if 在 2.1.0 新增，顧名思義，用作 v-if 的 else-if 塊。可以鏈?zhǔn)降亩啻问褂?#xff1a;
<div id="app"><div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else-if="type === 'C'">C</div><div v-else>Not A/B/C</div> </div><script> new Vue({el: '#app',data: {type: 'C'} }) </script>v-show ： 我們也可以使用 v-show 指令來(lái)根據(jù)條件展示元素：
<h1 v-show="ok">Hello!</h1>循環(huán)語(yǔ)句：
v-for 可以綁定數(shù)據(jù)到數(shù)組來(lái)渲染一個(gè)列表：
<div id="app"><ol><li v-for="site in sites">{{ site.name }}</li></ol> </div><script> new Vue({el: '#app',data: {sites: [{ name: 'Runoob' },{ name: 'Google' },{ name: 'Taobao' }]} }) </script>v-for 迭代對(duì)象 ：
<div id="app"><ul><li v-for="value in object">{{ value }}</li></ul> </div><script> new Vue({el: '#app',data: {object: {name: '菜鳥(niǎo)教程',url: 'http://www.runoob.com',slogan: '學(xué)的不僅是技術(shù)，更是夢(mèng)想！'}} }) </script>迭代對(duì)象時(shí)默認(rèn)迭代的是對(duì)象數(shù)據(jù)中的value ， 想使用key的話 ， 可以指定第二個(gè)參數(shù) ： <div id="app"><ul><li v-for="(value, key) in object">{{ key }} : {{ value }}</li></ul> </div>如果想要使用索引 ， 可以指定第三個(gè)參數(shù) ： <div id="app"><ul><li v-for="(value, key, index) in object">{{ index }}. {{ key }} : {{ value }}</li></ul> </div>v-for 迭代整數(shù)
<div id="app"><ul><li v-for="n in 10">{{ n }}</li></ul> </div>七、 vue計(jì)算屬性
計(jì)算屬性在處理一些復(fù)雜邏輯時(shí)是很有用的。
<div id="app"><p>原始字符串: {{ message }}</p><p>計(jì)算后反轉(zhuǎn)字符串: {{ reversedMessage }}</p> </div><script> var vm = new Vue({el: '#app',data: {message: 'Runoob!'},computed: {// 計(jì)算屬性的 getterreversedMessage: function () {// `this` 指向 vm 實(shí)例return this.message.split('').reverse().join('')}} }) </script> 提供的函數(shù)將用作屬性 vm.reversedMessage 的 getter 。computed setter
computed屬性在默認(rèn)只有g(shù)ettter ， 不過(guò)在需要時(shí)你也可以提供一個(gè)setter ：
var vm = new Vue({el: '#app',data: {name: 'Google',url: 'http://www.google.com'},computed: {site: {// getterget: function () {return this.name + ' ' + this.url},// setterset: function (newValue) {var names = newValue.split(' ')this.name = names[0]this.url = names[names.length - 1]}}} }) // 調(diào)用 setter， vm.name 和 vm.url 也會(huì)被對(duì)應(yīng)更新 vm.site = '菜鳥(niǎo)教程 http://www.runoob.com'; document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url);從實(shí)例運(yùn)行結(jié)果看在運(yùn)行 vm.site = '菜鳥(niǎo)教程 http://www.runoob.com'; 時(shí)，setter 會(huì)被調(diào)用， vm.name 和 vm.url 也會(huì)被對(duì)應(yīng)更新。八、 監(jiān)聽(tīng)屬性
我們可以通過(guò)watch來(lái)響應(yīng)數(shù)據(jù)的變化 。
<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},methods: {},computed :{},watch : {kilometers:function(val) {this.kilometers = val;this.meters = val * 1000;},meters : function (val) {this.kilometers = val/ 1000;this.meters = val;}}}); </script>九、 樣式綁定
class 屬性綁定
我們可以為v-bind：class 設(shè)置一個(gè)對(duì)象 ， 從而動(dòng)態(tài)的切換class ：
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .active {width: 100px;height: 100px;background: green; } </style> </head> <body> <div id="app"><div v-bind:class="{ active: isActive }"></div> </div><script> new Vue({el: '#app',data: {isActive: true} }) </script>我們也可以直接綁定數(shù)據(jù)里的一個(gè)對(duì)象：
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .active {width: 100px;height: 100px;background: green; } .text-danger {background: red; } </style> </head> <body> <div id="app"><div v-bind:class="classObject"></div> </div><script> new Vue({el: '#app',data: {classObject: {active: true,'text-danger': true}} }) </script> </body>數(shù)組語(yǔ)法：
我們可以把一個(gè)數(shù)組傳給 v-bind:class ，實(shí)例如下：
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .active {width: 100px;height: 100px;background: green; } .text-danger {background: red; } </style> </head> <body> <div id="app"><div v-bind:class="[activeClass, errorClass]"></div> </div><script> new Vue({el: '#app',data: {activeClass: 'active',errorClass: 'text-danger'} }) </script>十、 vue.js style (內(nèi)聯(lián)樣式)
我們可以在 v-bind:style 直接設(shè)置樣式：
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"><div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鳥(niǎo)教程</div> </div><script> new Vue({el: '#app',data: {activeColor: 'green',fontSize: 30} }) </script>綁定一個(gè)樣式對(duì)象
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"><div v-bind:style="styleObject">菜鳥(niǎo)教程</div> </div><script> new Vue({el: '#app',data: {styleObject: {color: 'green',fontSize: '30px'}} }) </script>十一 、 事件處理器
v-on 事件監(jiān)聽(tīng) ：
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"><button v-on:click="counter += 1">增加 1</button><p>這個(gè)按鈕被點(diǎn)擊了 {{ counter }} 次。</p> </div><script> new Vue({el: '#app',data: {counter: 0} }) </script> </body>可以接收一個(gè)定義的方法來(lái)調(diào)用
<div id="app"><!-- `greet` 是在下面定義的方法名 --><button v-on:click="greet">Greet</button> </div><script> var app = new Vue({el: '#app',data: {name: 'Vue.js'},// 在 `methods` 對(duì)象中定義方法methods: {greet: function (event) {// `this` 在方法里指當(dāng)前 Vue 實(shí)例alert('Hello ' + this.name + '!')// `event` 是原生 DOM 事件if (event) {alert(event.target.tagName)}}} }) // 也可以用 JavaScript 直接調(diào)用方法 app.greet() // -> 'Hello Vue.js!' </script>事件修飾符 ：
Vue.js 為 v-on 提供了事件修飾符來(lái)處理 DOM 事件細(xì)節(jié)
<!-- 阻止單擊事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁(yè)面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯(lián) --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件偵聽(tīng)器時(shí)使用事件捕獲模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) --> <div v-on:click.self="doThat">...</div><!-- click 事件只能點(diǎn)擊一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a>按鍵修飾符 ：
Vue 允許為 v-on 在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)添加按鍵修飾符：
<!-- 只有在 keyCode 是 13 時(shí)調(diào)用 vm.submit() --> <input v-on:keyup.13="submit">記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：
<!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 縮寫(xiě)語(yǔ)法 --> <input @keyup.enter="submit">全部的按鍵別名：
.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>十二、 表單
輸入框：
實(shí)例中演示了 input 和 textarea 元素中使用 v-model 實(shí)現(xiàn)雙向數(shù)據(jù)綁定：
<div id="app"><p>input 元素：</p><input v-model="message" placeholder="編輯我……"><p>消息是: {{ message }}</p><p>textarea 元素：</p><p style="white-space: pre">{{ message2 }}</p><textarea v-model="message2" placeholder="多行文本輸入……"></textarea> </div><script> new Vue({el: '#app',data: {message: 'Runoob',message2: '菜鳥(niǎo)教程\r\nhttp://www.runoob.com'} }) </script>復(fù)選框：
復(fù)選框如果是一個(gè)為邏輯值，如果是多個(gè)則綁定到同一個(gè)數(shù)組：
<div id="app"><p>單個(gè)復(fù)選框：</p><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label><p>多個(gè)復(fù)選框：</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>select 列表：
以下實(shí)例中演示了下拉列表的雙向數(shù)據(jù)綁定：
<div id="app"><select v-model="selected" name="fruit"><option value="">選擇一個(gè)網(wǎng)站</option><option value="www.runoob.com">Runoob</option><option value="www.google.com">Google</option></select><div id="output">選擇的網(wǎng)站是: {{selected}}</div> </div><script> new Vue({el: '#app',data: {selected: '' } }) </script>修飾符：
.lazy
在默認(rèn)情況下， v-model 在 input 事件中同步輸入框的值與數(shù)據(jù)，但你可以添加一個(gè)修飾符 lazy ，從而轉(zhuǎn)變?yōu)樵?change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" >.number
如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為 Number 類型（如果原值的轉(zhuǎn)換結(jié)果為 NaN 則返回原值），可以添加一個(gè)修飾符 number 給 v-model 來(lái)處理輸入值：
<input v-model.number="age" type="number">.trim
如果要自動(dòng)過(guò)濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過(guò)濾輸入：
<input v-model.trim="msg">十二、 組件
注冊(cè)一個(gè)全局組件的語(yǔ)法格式如下 ：
Vue.component(tagName, options) tagName 為組件名 ， options為配置選項(xiàng) ， 我們可以用一下方式來(lái)調(diào)用組件 ： <tagName></tagName>全局組件：
注冊(cè)一個(gè)全局組件并使用
<div id="app"><runoob></runoob> </div><script> // 注冊(cè) Vue.component('runoob', {template: '<h1>自定義組件!</h1>' }) // 創(chuàng)建根實(shí)例 new Vue({el: '#app' }) </script>局部組件 :
我們也可以在實(shí)例選項(xiàng)中注冊(cè)局部組件，這樣組件只能在這個(gè)實(shí)例中使用：
<div id="app"><runoob></runoob> </div><script> var Child = {template: '<h1>自定義組件!</h1>' }// 創(chuàng)建根實(shí)例 new Vue({el: '#app',components: {// <runoob> 將只在父模板可用'runoob': Child} }) </script>Prop
父組件的數(shù)據(jù)需要通過(guò)props把數(shù)據(jù)傳給子組件 ， 子組件需要顯示的用props選項(xiàng)聲明“prop”
<div id="app"><child message="hello!"></child> </div><script> // 注冊(cè) Vue.component('child', {// 聲明 propsprops: ['message'],// 同樣也可以在 vm 實(shí)例中像 "this.message" 這樣使用template: '<span>{{ message }}</span>' }) // 創(chuàng)建根實(shí)例 new Vue({el: '#app' }) </script>動(dòng)態(tài)Prop
類似于用v-bind綁定HTML特性到一個(gè)表達(dá)式 ， 可以使用v-bind動(dòng)態(tài)綁定props的值到父組件的數(shù)據(jù)中 ， 每當(dāng)父組件的數(shù)據(jù)變化時(shí) ， 改變化也會(huì)傳到給子組件 。
<div id="app"><div><input v-model="parentMsg"><br><child v-bind:message="parentMsg"></child></div> </div><script> // 注冊(cè) Vue.component('child', {// 聲明 propsprops: ['message'],// 同樣也可以在 vm 實(shí)例中像 "this.message" 這樣使用template: '<span>{{ message }}</span>' }) // 創(chuàng)建根實(shí)例 new Vue({el: '#app',data: {parentMsg: '父組件內(nèi)容'} }) </script>以下實(shí)例中將 v-bind 指令將 todo 傳到每一個(gè)重復(fù)的組件中：
<div id="app"><ol><todo-item v-for="item in sites" v-bind:todo="item"></todo-item></ol> </div><script> Vue.component('todo-item', {props: ['todo'],template: '<li>{{ todo.text }}</li>' }) new Vue({el: '#app',data: {sites: [{ text: 'Runoob' },{ text: 'Google' },{ text: 'Taobao' }]} }) </script>prop驗(yàn)證
prop是一個(gè)對(duì)象而不是一個(gè)字符串?dāng)?shù)組時(shí) ， 它包含驗(yàn)證要求：
Vue.component('example', {props: {// 基礎(chǔ)類型檢測(cè) （`null` 意思是任何類型都可以）propA: Number,// 多種類型propB: [String, Number],// 必傳且是字符串propC: {type: String,required: true},// 數(shù)字，有默認(rèn)值propD: {type: Number,default: 100},// 數(shù)組／對(duì)象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回propE: {type: Object,default: function () {return { message: 'hello' }}},// 自定義驗(yàn)證函數(shù)propF: {validator: function (value) {return value > 10}}} })自定義事件
我們可以使用v-on 綁定自定義事件 ， 每個(gè)vue實(shí)例都實(shí)現(xiàn)了事件接口（Events interface）， 即：
使用$emit（eventName）觸發(fā)事件
<div id="app"><div id="counter-event-example"><p>{{ total }}</p><button-counter v-on:increment="incrementTotal"></button-counter><button-counter v-on:increment="incrementTotal"></button-counter></div> </div><script> Vue.component('button-counter', {template: '<button v-on:click="incrementHandler">{{ counter }}</button>',data: function () {return {counter: 0}},methods: {incrementHandler: function () {this.counter += 1this.$emit('increment')}}, }) new Vue({el: '#counter-event-example',data: {total: 0},methods: {incrementTotal: function () {this.total += 1}} }) </script>如果你想在某個(gè)組件的根元素上監(jiān)聽(tīng)一個(gè)原生事件。可以使用 .native 修飾 v-on 。例如：
<my-component v-on:click.native="doTheThing"></my-component>父組件給子組件傳值的時(shí)候，如果想傳入一個(gè)變量，寫(xiě)法如下：
// 注冊(cè) Vue.component('child', {// 聲明 propsprops: ['message'],// 同樣也可以在 vm 實(shí)例中像 "this.message" 這樣使用template: '<span>{{ message }}</span>' }) // 創(chuàng)建根實(shí)例 new Vue({el: '#app',data:{message:"hello",} })十三 、 自定義指令
下面我們注冊(cè)一個(gè)全局指令v-focus , 該指令的功能是在頁(yè)面加載時(shí) ， 元素獲得焦點(diǎn)：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"><p>頁(yè)面載入時(shí)，input 元素自動(dòng)獲取焦點(diǎn)：</p><input v-focus> </div><script> // 注冊(cè)一個(gè)全局自定義指令 v-focus Vue.directive('focus', {// 當(dāng)綁定元素插入到 DOM 中。inserted: function (el) {// 聚焦元素el.focus()} }) // 創(chuàng)建根實(shí)例 new Vue({el: '#app' }) </script> </body> </html>我們也可以在實(shí)例使用 directives 選項(xiàng)來(lái)注冊(cè)局部指令，這樣指令只能在這個(gè)實(shí)例中使用：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"><p>頁(yè)面載入時(shí)，input 元素自動(dòng)獲取焦點(diǎn)：</p><input v-focus> </div><script> // 創(chuàng)建根實(shí)例 new Vue({el: '#app',directives: {// 注冊(cè)一個(gè)局部的自定義指令 v-focusfocus: {// 指令的定義inserted: function (el) {// 聚焦元素el.focus()}}} }) </script> </body> </html>鉤子
鉤子函數(shù)參數(shù)
鉤子函數(shù)參數(shù)有 ：
有時(shí)候我們不需要其他鉤子函數(shù)，我們可以簡(jiǎn)寫(xiě)函數(shù)，如下格式：
Vue.directive('runoob', function (el, binding) {// 設(shè)置指令的背景顏色el.style.backgroundColor = binding.value.color })指令函數(shù)可接受所有合法的 JavaScript 表達(dá)式，以下實(shí)例傳入了 JavaScript 對(duì)象：
<div id="app"><div v-runoob="{ color: 'green', text: '菜鳥(niǎo)教程!' }"></div> </div><script> Vue.directive('runoob', function (el, binding) {// 簡(jiǎn)寫(xiě)方式設(shè)置文本及背景顏色el.innerHTML = binding.value.textel.style.backgroundColor = binding.value.color }) new Vue({el: '#app' }) </script>十四 、 路由
安裝路由依賴：
npm 安裝 npm install vue-router 也可以使用CDN 的模式 引入 vue-router 依賴 <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>簡(jiǎn)單實(shí)例：
一下實(shí)例中 我們將vue-router 加進(jìn)來(lái) ， 然后配置組件和路由映射 ， 再告訴vuo-router 在哪里渲染他們 ， 代碼如下所示
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script><script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script></head><body><div id="app"><h1>Hello App!</h1><p><!-- 使用 router-link 組件來(lái)導(dǎo)航. --><!-- 通過(guò)傳入 `to` 屬性指定鏈接. --><!-- <router-link> 默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 --><router-link to="/foo">Go to Foo</router-link><router-link to="/bar">Go to Bar</router-link></p><!-- 路由出口 --><!-- 路由匹配到的組件將渲染在這里 --><router-view></router-view></div><script>// 0. 如果使用模塊化機(jī)制編程，導(dǎo)入Vue和VueRouter，要調(diào)用 Vue.use(VueRouter)// 1. 定義（路由）組件。// 可以從其他文件 import 進(jìn)來(lái)const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }// 2. 定義路由// 每個(gè)路由應(yīng)該映射一個(gè)組件。 其中"component" 可以是// 通過(guò) Vue.extend() 創(chuàng)建的組件構(gòu)造器，// 或者，只是一個(gè)組件配置對(duì)象。// 我們晚點(diǎn)再討論嵌套路由。const routes = [{ path: '/foo', component: Foo },{ path: '/bar', component: Bar }]// 3. 創(chuàng)建 router 實(shí)例，然后傳 `routes` 配置// 你還可以傳別的配置參數(shù), 不過(guò)先這么簡(jiǎn)單著吧。const router = new VueRouter({routes // （縮寫(xiě)）相當(dāng)于 routes: routes})// 4. 創(chuàng)建和掛載根實(shí)例。// 記得要通過(guò) router 配置參數(shù)注入路由，// 從而讓整個(gè)應(yīng)用都有路由功能const app = new Vue({router}).$mount('#app')// 現(xiàn)在，應(yīng)用已經(jīng)啟動(dòng)了！</script></body></html>總結(jié)
以上是生活随笔為你收集整理的Vue.js的基本使用 学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Python （五） 高级特性
- 下一篇： oracel 中序列