机遇屋-VUE基础

VUE基础

[官网教程](https://cn.vuejs.org/v2/guide/ "官网教程")
[官网api调用学习](https://cn.vuejs.org/v2/api/#v-on "官网api调用学习")
我们准备起飞了

####基础用法

#####1 el和data的使用方法

})
</script>
</html>
```

#####2 methods方法

})
</script>
</html>
```

#####3 v-bind属性绑定
```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue cdn</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="vue-app">
	    {{sayHello()}}
		<p>{{learnVue('小明')}}</p>
		<p><a v-bind:href="baidu" target="black">百度</a></p>
		<p v-html="taobaoTag"></p>
		<p><input type="text" v-bind:value="name"/></p>
    </div>
</body>
<script type="text/javascript">
new Vue({//实例化vue对象
el:'#vue-app',//element
data(){
	return{
	name:"ych",
	baidu:"https://www.baidu.com",
	taobaoTag:'<a href="https://www.taobao.com" target="black">淘宝</a>'
	}
},
methods:{
	sayHello:function(){
		return "你好啊"+name+",今天适合吃炸鸡喝可乐";
	},
	learnVue(user){
		return '偶，你也在学VUE？'+user
	}
	
}

})
</script>
</html>
```

#####4 v-on事件绑定

```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue cdn</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="vue-app">
	    <h1>事件</h1>
		<p><input type="button" v-on:click="age++" value="年龄增加" /><input type="button" v-on:click="age--" value="年龄减少"/></p>
		<p><input type="button" @dblclick="addAge(10)" value="双击增加十年" /><input type="button" @dblclick="subtractAge(10)" value="双击减少十年"/></p>
		<p>当前年龄：{{age}}</p>
		<div id="canvas" v-on:mousemove="chageXY" style="width:600px;padding:200px 20px;text-align:center;border:1px solid #333;">{{x}},{{y}}</div>
    </div>
</body>
<script type="text/javascript">
new Vue({//实例化vue对象
el:'#vue-app',//element
data(){
	return{
	age:18,
	x:0,
	y:0
	}
},
methods:{
	addAge(inc){
		this.age+=inc;
	},
	subtractAge(dec){
		this.age-=dec;
	},
	chageXY(event){
		console.log(event);
		this.x=event.offsetX;
		this.y=event.offsetY;
	}
}

})
</script>
</html>
```

#####5 时间修饰符

})
</script>
</html>

```

#####6 键盘事件

})
</script>
</html>
```

#####7 v-model双向数据绑定

})
</script>
</html>
```

#####8 ref的使用

})
</script>
</html>
```

#####9 watch监听变化

})
</script>
</html>
```

#####10 computed计算属性优化性能

```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue cdn</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="vue-app">
	    <h1>computed计算属性</h1>
		<p><button @click="a++">Add to A</button><button @click="b++">Add to B</button></p>
		<p>A:{{a}},B:{{b}}</p>
		
		<h1>方法(我们发现加A或加B时A和B都会执行)</h1>
		<p>Age+A={{addToA()}}</p>
		<p>Age+B={{addToB()}}</p>
		<h1>计算属性(必须有返回值)</h1>
		<p>Age+A={{addToA1}}</p>
		<p>Age+B={{addToB1}}</p>
    </div>
</body>
<script type="text/javascript">
new Vue({//实例化vue对象
el:'#vue-app',//element
data(){
	return{
	age:18,
	a:0,
	b:0
	}
},
methods:{
	addToA(){
		console.log("A");
		return this.a+this.age;
	},
	addToB(){
		console.log("B");
		return this.b+this.age;
	}
},
computed:{
	addToA1(){
		console.log("A");
		return this.a+this.age;
	},
	addToB1(){
		console.log("B");
		return this.b+this.age;
	}
}

})
</script>
</html>
```

#####11 动态绑定css样式

})
</script>
</html>
```

#####12 if和show指令

```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue cdn</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="vue-app">
	    <h1>v-if</h1>
		<p><button @click="btn1=!btn1">按钮1为{{btn1}}</button><button @click="btn2=!btn2">按钮2为{{btn2}}</button></p>
		<span v-if="btn1">如果按钮1为true，我就出现了！</span>
		<span v-else-if="btn2">如果按钮1为false，如果按钮2为true，我就出现了！</span>
		<span v-else>如果都为false，我就出现了！</span>
		<h1>v-show(display操控)</h1>
		<span v-show="btn1">如果按钮1为true，我就出现了！</span>
		<span v-show="btn2">如果按钮2为true,我就出现了！</span>
    </div>
</body>
<script type="text/javascript">
new Vue({//实例化vue对象
el:'#vue-app',//element
data(){
	return{
	btn1:false,
	btn2:true
	}
},
methods:{
},
computed:{
	
}

})
</script>
</html>
```

#####13 v-for循环

})
</script>
</html>
```

#####14 外部修改容器内部数据:王无敌->朱无敌

});
vue.name="朱无敌";
</script>
</html>
```

#####15 注册全局组件

```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue cdn</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="vue-app-one">
	    <h1>vue实例1</h1>
		<counter />
    </div>
	    <div id="vue-app-two">
	    <h1>vue实例2</h1>
		<counter />
    </div>
</body>
<script type="text/javascript">
//创建全局组件
Vue.component('counter',{    //1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件）
	data:function(){
			return {count:0}
			},
 
//template 是模板的意思，在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容
	template:'<button v-on:click="count++">点击计算点击次数：{{count}}次</button>'
})
const vue=new Vue({//实例化vue对象
el:'#vue-app-one'//element
});
const vue2=new Vue({//实例化vue对象
el:'#vue-app-two'//element
});
</script>
</html>
```

#####16 FETCH请求

```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue cdn</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="vue-app">
	    <h1>vue实例1</h1>
		<form @submit.prevent="onSubmit">
			<input type="text" v-model="todo.title" />
			<input type="text" v-model="todo.userid" />
			<input type="submit" value="提交"/> 
		</form>
		<div>
		<ul>
		<li v-for="todo in todos">{{todo.title}}</li>
		</ul>
		</div>
    </div>
</body>
<script type="text/javascript">
const vue=new Vue({//实例化vue对象
el:'#vue-app',//element
data(){
	return{
		todos:[],
		todo:{title:"",userid:123}
	}
},
mounted(){
	fetch('http://jsonplaceholder.typicode.com/todos')
  .then(function(response) {
    return response.json();
  })
  .then(
  todos=>{
  this.todos=todos;
  }
  );
},
methods:{
	onSubmit(){
	fetch('http://jsonplaceholder.typicode.com/todos', {
	method: 'POST', // or 'PUT'
	body: JSON.stringify(this.todo), // data can be `string` or {object}!
	headers: new Headers({
    'Content-Type': 'application/json'
	})
	}).then(res => res.json())
	.catch(error => console.error('Error:', error))
	.then(
	response => {
	this.todos.unshift(response);
	console.log(response);
	}
	);
	}
}
});
</script>
</html>
```

#####17 Axios请求

```
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue cdn</title>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="vue-app">
	    <h1>vue实例1</h1>
		<form @submit.prevent="onSubmit">
			<input type="text" v-model="todo.title" />
			<input type="text" v-model="todo.userid" />
			<input type="submit" value="提交"/> 
		</form>
		<div>
		<ul>
		<li v-for="todo in todos">{{todo.title}}</li>
		</ul>
		</div>
    </div>
</body>
<script type="text/javascript">
const vue=new Vue({//实例化vue对象
el:'#vue-app',//element
data(){
	return{
		todos:[],
		todo:{title:"",userid:123}
	}
},
mounted(){
	axios.get('http://jsonplaceholder.typicode.com/todos')
  .then(todos=>{
  this.todos=todos.data;
  });
},
methods:{
	onSubmit(){
	axios.post('http://jsonplaceholder.typicode.com/todos',this.todo).
	then(
	todo=>{
	this.todos.unshift(todo.data);
	}
	//function(todo){
	//console.log(todo.data);
	//this.todos.unshift(todo.data);
	//}
	);
	}
}
});
</script>
</html>
```