vue基础

引入vue文件

<div id="app">
	
	{{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()">事件绑定2button>
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(){
			debugger
			console.log('created.....')
		},
		mounted(){
			debugger
			console.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.items
						console.log(this.userList)
					}) //请求成功
					.catch(error =>{
						console.log(error)
					}) //请求失败
			}
		}
	})
script>