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)