vue基础

引入vue文件

<div id="app"><!--{{}}插值表达式，绑定vue中的data数据-->{{message}}
</div><script src="vue.min.js"></script>
<script>new Vue({el:'#app',data:{message:'Hello Vue'}})
</script>

单项和双向绑定指令

<div id="app"><div v-bind:style="msg">单向绑定</div><!--简写--><div :style="msg">单向绑定</div>
</div>
<script src="vue.min.js"></script>
<script>new Vue({el:'#app',data:{msg:'color:red;'}})
</script>

<div id="app">{{keyword}}<input type="text" :value="keyword"/><!--双向绑定--><input type="text" v-model="keyword"/> 
</div>
<script src="vue.min.js"></script>
<script>new Vue({el:'#app',data:{keyword:'jordan'}})
</script>

绑定事件

v-on:事件名称=“调用方法” 简写 @事件名称

<div id="app"><button v-on:click="show()">事件绑定</button><button @click="show()">事件绑定2</button>
</div>
<script src="vue.min.js"></script>
<script>new Vue({el:'#app',data:{msg:'color:red;'},methods:{show(){console.log("show……")}}})
</script>

条件指令

v-if:条件判断
v-else

<div id="app"><input type="checkbox" v-model="ok"/><div v-if="ok">选中了</div><div v-else>没有选中</div>
</div>
<script src="vue.min.js"></script>
<script>new Vue({el:'#app',data:{ok:false}})
</script>

循环指令

v-for

<div id="app"><div v-for="user in userList">{{user.name}}---{{user.age}}</div><!--带上索引遍历--><div v-for="(user,index) in userList">{{index}}--{{user.name}}---{{user.age}}</div>
</div>
<script src="vue.min.js"></script>
<script>new Vue({el:'#app',data:{userList:[{"name":"jordan","age":23},{"name":"james","age":30}]}})
</script>

vue的页面渲染之前执行的created方法和页面渲染之后执行的mounted方法

<div id="app">{{msg}}
</div>
<script src="vue.min.js"></script>
<script>new Vue({el:'#app',data:{msg:'hello'},created(){debuggerconsole.log('created.....')},mounted(){debuggerconsole.log('mounted')}})
</script>

axios使用

独立于vue的一个项目，可以用于浏览器和node.js中发送ajax请求

准备一个模拟后端返回的json数据

{"code":200,"message":"成功","data":{"items":[{"name":"jordan","age":20},{"name":"kobe","age":19},{"name":"james","age":18}]}
}

<div id="app"><!--页面显示数据--><table><tr v-for="user in userList"><td>{{user.name}}</td><td>{{user.age}}</td></tr></table>
</div><script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>new Vue({el:"#app",data:{userList:[]},created(){//页面渲染之前执行，调用方法，返回json数据this.getList()},methods:{getList(){//使用axios方式ajax请求路径axios.get("user.json").then(response =>{console.log(response)this.userList = response.data.data.itemsconsole.log(this.userList)}) //请求成功.catch(error =>{console.log(error)}) //请求失败}}})
</script>