vue在前端的语法应用

语法实现：

v-bind="" : 根据属性的true和false来决定显示样式

<!-- 加样式： v-bind:class="{"样式":属性}" -->

<!-- 例1 -->
<span v-bind:class="{'text-success': username_avaliable, 'text-danger':!username_avaliable}" id="username_info">{{ username_info }}</span>

<!-- 例2 -->
<button v-bind:class="{'btn btn-success': user_login}" >用户名</button>
<button v-bind:class="{'btn btn-success': !user_login}">验证码</button>

v-if="" : 判断语句，存在于template中，""可用来控制整个页面的显示状态，可以在点击事件里面的属性修改该属性状态

<p v-if="is_login">{{ username }}</p>
<p v-else id="not_login" v-on:click="go_login()">登录</p>
<div v-if="!is_login" id="regis" v-on:click="go_register()">注册</div>

ps: 
	拿is_login属性举个栗子.
	如果is_login属性为true, 则显示{{nsername}}
	如果is_login为Flase,则同时显示登陆和注册两个模块

v-model="1" : 属性绑定，全局通用

data: function(){
	// 主页面显示的所有的数据
    return{
		1:"",
		2:"",
		3:"",
		4:"",
	}
}

v-on:click ="1()": 点击事件, 1,2,3表示不同的点击事件

methods:{
	1: function(){
        // 可对应页面上的所有属性，可利用此点击事件控制整个页面的状态
		属性;
	},
	2: function(){
        // 跳转到另一个html页面
        this.$router.push({path: "/login"})
    },
	3: function(){
        // 涉及后台数据的时候，要用axjx调用后台数据
        this.axios.post("后端接口",{属性}).then(response =>{打印response，属性})
    }
	
}