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',
});