vue的基本语法

vue的基本语法

  new Vue({
  	 el:"css选择器",//表示vue对象接管的区域，只有在这一块区域内才可以使用vue的方法显示数据。
     data:{
     	// 定义各种变量，将来变量的值在页面html标签中使用。
     	name:"snake",
     	age:20,
     	user:{
     		username:"jack",
     		password:"123456"
     	},
     	address:["湖北武汉黄陂","湖北武汉武昌"],
     	url:"http://www.itcast.cn",
     	flag:true,
     	users:[{name:"aaa",age:12},{name:"bbb",age:12},{name:"ccc",age:12}]
     },
     methods:{
     	//定义各种方法，加来使用vue绑定事件的时候会使用到
     	fun(){},
     	show(){},
     	sendData(){
     		//发送异步请求，将user信息提交给服务器
     	}
     }
  });

vue中的常用指令：
v-html:将vue中的变量值展示到标签的内容体中，如果值有html代码，浏览器会解析html代码
v-text:将vue中的变量值展示到标签的内容体中，如果值有html代码，浏览器不会解析html代码
v-bind::将vue中的变量值赋值给标签的属性

<a v-bind:href="url">传智播客</a>-->简写成--><a :href="url">
 	v-if/v-else-if/v-else:通过判断是否加载该html标签,如果结果是false，那么该标签就不会被加载，页面上也就看不到这个标签了。
 		<li v-if="flag">红茶</li>
 		<li v-else-if="flag">绿茶</li>
 		<li v-els>茉莉花茶</li>
 	v-show:通过操作标签的display样式让标签显示和隐藏
 		<li v-show="flag">红茶</li>  

 	v-for:遍历展示数据
 		<tr v-for="u in users">
 			<td>{{u.name}}</td>
 			<td>{{u.age}}</td>
 		</tr>
 		
 	v-on:绑定事件
 		<input type="button" v-on:click="fun()" value="按钮"/>
 		简写：
 		<input type="button" @click="fun()" value="按钮"/>
 		
 	v-model:对表单中的数据进行双向数据绑定。
 		<form>
 			<input type="text" name="username" v-model="user.username"/>
 			<input type="password" name="password" v-model="user.password"/>
 			<input type="button" @click="sendData()" value="按钮"/>
 		</form>

elementUI：

引入对应的资源：css+2个js(vue.js+elementUI对应的js)