1.控制流指令

v-if、v-else-if、v-else的用法

Index.html檔案中的寫法：

<div id=”app”>
    <div v-if=”role == ‘admin’|| role= ‘super-admin’”>//在此處要注意這個or判斷兩邊，都需要role='變數'
    你好管理員
    </div>
    <div v-if=”role == ‘admin’”>
    HR你好
    </div>
    <div v-if=”role == ‘admin’”>
    對不起你無法訪問
    </div>
</div>
 

在mian.js中

var app = new Vue({
 el: ‘#app’,
data:{
role: ‘adim’,
}
});

2、計算屬性

<div id="app">
	<table>
		<tr>
			<td>數學<td>
			<td><input v-model~~.number~~  = "math" /><td> //這裡的v-model的number方法是為了將input中輸入的數字字串轉換為數值型別，否則總分的計算會變成字串的疊加
		</tr>
		<tr>
			<td>語文<td>
			<td><input v-model~~.number~~  = "cn" /><td>
		</tr>
		<tr>
			<td>英語<td>
			<td><input v-model~~.number~~  = "eg" /><td>
		</tr>
		<tr>
			<td>總分<td>
			<td><input v-model = "sum" /><td>
		</tr>
		<tr>
			<td>平均分<td>
			<td><input v-model = "avg" /><td>
		</tr>
	</table>
</div>
 

在main.js中的

var app = new Vue({
	el:'#app',
	data:{
		math:null,
		cn:null,
		eg:null,
	}
	computed:{
		sum:function(){
			return parseFloat(this.math) + parseFloat(this.cn) + parseFloat(this.eg);//這裡的parseFloat與上面的v-model的number方法一樣，但是使用number更多一些。
		}
		avg:function(){
			return Math.round(this.sum/3);
		}
	}
});
 

3、全域性及區域性元件

我對於元件的理解就是自己創造一個標籤，這個標籤裡包含的功能都在js中完成，在html中可以重複使用。
這僅僅是我的個人觀點，或許理解的不夠好，因為我也僅僅是初學者。
以下我想定義一個自己的標籤，叫做

//首先在HTML檔案中是這樣寫的：
<div id="app">
	<nqy></nqy>
</div>

這個標籤的內容我們再Vue.js中完成

Vue.component('nqy',{
	template:'<button @click="on_click">點選我</button>',  //這裡的語句結束之後我總是忘記加上“，”，還有給button加上時間的時候，我寫成過@:click="on_click”這裡我是把bind的簡寫方式與on的簡寫方式搞混了。所以要注意
	methods:{
		on_click:function(){
			alert('你好');
		}
	}
});//這裡只是配置好了這個元件，但是卻還沒有渲染到頁面上，因為我們沒有給它指定地點。

var app = new Vue({
	el:'#app';
});//指定好這個作用域之後，要回頭檢查<nqy>這個標籤有沒有放在id=app的div標籤中，否則一樣還是不會渲染出來。

還可以將我們定義好的元件直接放入作用域中。

//Vue.component('nqy',{

//});

var app = new Vue({
	el:'#app'，
	components:{
		nqy:{
					template:'<button @click="on_click">點選我</button>',
					methods:{
					on_click:function(){
						alert('你好');
					}
				}
			}
		}
});

另外我們還可以將元件當成一個物件

var nqy_components = {
	template:'<button @click="on_click">點選我</button>',
	methods:{
		on_click:function(){
			alert(‘你好’);
		}
	}
};
var app = new Vue({
		el:'#app',
		components:{
			nqy:nqy_components,
		}
});

4、配置元件

Vue.component('like',{
    template:'<button @click="on_click">贊 {{like_count}}</button>',
    data:function () {  //這裡的data後面是個函式，不是物件。
        return {
            like_count: 10,
            liked:false,
        }
    },
    methods:{
        on_click:function () {
            if (!this.liked)
                 this.like_count ++;
            else
                 this.like_count --;
            this.liked = !this.liked;
        }
    }
});

var app = new Vue({
    el:'#app',
});