vue學習之二常用指令
一、main.js檔案的基本內容
1. 引入vue
import Vue from 'vue';
2. 引入app.vue , 用他的內容替換index.html中的div id='app'的div
import App from '../app.vue';
3. 構建vue例項
new Vue({
el: '#app',// 渲染內容的目的地
render(creater){ //creater 是一個形參，可以是任何值
return creater(App);
}
});
//一般key值是固定的，引數是可變的
二、app.vue對應的內容
<template> <div> <pre> * v-text * v-html * v-if * v-show * v-model </pre> <span v-text="text"></span> <hr> <div> </template> <script> export default { return { data: { text : "我是一個v-text" } } } </script> <style></style>
v-text: 是innerText ，只能在雙標籤中使用
v-html：是innerHtml， 只能在雙標籤中使用，不能包含表示式
v-if: 元素是否移除或者是插入
v-show: 元素是否隱藏
v-model: 雙向賦值， v-bind 是單向賦值 使用方法： v-bind: value = 'text'
v-bind: 單向賦值，支援引數表示式， 簡寫: 如： v-bind: value = 'text' 的簡寫就是 :value = 'text'
v-on: 給事件繫結對應的方法，或者直接寫表示式。 簡寫@ , 如： v-on:click='change()' 的簡寫就是： @click="change()"
v-for: 可以是陣列(entity, index) ，也可以是物件(value, key, index)
其中script程式碼為：
export default { data() { return { name : '小王', status: [{name: 'jack', age: 26},{name: 'rose', age: 30}] } }, methods:{ change(){ }, add: function(){ } } }
三、 當引數只有一個的時候，可以省略小括號， 當代碼只有一行，並且只有返回值的時候，可以省略大括號如：
render: function(c){ return c(App);} 等價於： render: c => c(App)
四、 在<template></template>中使用變數或者函式不用加this， 在<script></script>中使用變數或者函式，必須加上this
五、 父子元件的使用, 父元件先通過import head from './components/head.vue' 引入子元件, 再在components中新增這些物件，就可以在<template>中使用了，直接寫上<head></head> 就可以了,
如果想向子元件傳值，則只需要父元件引用子元件的時候，在子元件上加上屬性（屬性的名稱可以是任意值，這裡以name為例），如：<head name='jack'></head>, 在只元件中，只需要在export default 中加上屬性：props就可以了，props的值是陣列，可以接受多個父元件的傳值。 如： props: ['name'], 現在name這個變數就可以在子元件中進行使用了
六、全域性元件的使用，首先需要在main.js中進行引入，再進行註冊，程式碼如下： headVue就可以在所有的元件中進行使用了
import headVue from './headVue.vue';//引入元件
Vue.component("headVue", headVue); //註冊元件
六、 元件中<style></style>中的樣式，如果希望只在當前元件中有效，則需要加上scoped。 如： <style scoped></style>
七、 $emit和$on的使用，其中$on是監聽和接收訊息， $emit是傳送訊息。 下面是一個例子：
1. 新建一個聯結器 connector.js。程式碼如下：
import Vue from 'vue'; //引入vue ，下面才能new Vue。 不然要報錯
var connector = new Vue();
export default connector;
2. 父頁面進行監聽操作：使用$on, 程式碼如下：
<template>
<div>
<button @cilck="listener">監聽接收訊息</button>
</div>
</template>
<script>
import connetor from './connetor.js';
export default {
methods:{
listener(){
connetor.$on('phone', function(msg){
console.info(msg);
});
}
}
}
</script>
<style>
</style>3. 子頁面進行傳送訊息。使用：$emit, 程式碼如下：
<template>
<div>
<button @cilck="sendMsg">傳送訊息</button>
</div>
</template>
<script>
import connetor from './connetor.js';
export default {
methods:{
sendMsg(){
connetor.$emit('phone', '我給你發訊息了，父頁面。');
}
}
}
</script>
<style>
</style>檢視API文件的方式：
