VUE
v-bind绑定
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!--view层 模板-->
<div id="app">
<span v-bind:title="message">
鼠标停悬几秒查看此处动态绑定的提示信息~
</span>
</div>
<script>
var vm = new Vue({
el:"#app",
// Model层
data:{
message:"hello,vue!"
}
});
</script>
</body>
</html>
v-if/v-else-if/v-else
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--view层 模板-->
<div id="app">
<h1 v-if = "type===‘A‘">AAA</h1>
<h1 v-else-if = "type===‘B‘">BBB</h1>
<h1 v-else-if = "type===‘C‘">CCC</h1>
<h1 v-else>dddd</h1>
</div>
<script>
var vm = new Vue({
el:"#app",
// Model层
data:{
type: "A"
}
});
</script>
</body>
</html>
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--view层 模板-->
<div id="app">
<li v-for="(item,index) in items">
{{item.message}}---{{index}}
</li>
</div>
<script>
var vm = new Vue({
el:"#app",
// Model层
data:{
items: [
{message: "123"},
{message: "345"}
]
}
});
</script>
</body>
</html>
v-on/Vue.methods
- 方法必须定义在vue的Method对象中 v-on:事件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--view层 模板-->
<div id="app">
<button v-on:click="sayHi">sayHi</button>
<br>
<button v-on:click="smile">smile</button>
</div>
<script>
var vm = new Vue({
el:"#app",
// Model层
data:{
message: "Summer"
},
methods: {//方法必须定义在vue的Method对象中 v-on:事件
sayHi: function(a){
alert(this.message)
},
smile: function(a){
alert(this.message)
}
}
});
</script>
</body>
</html>
v-model
- 表单双向绑定：v-model指令在表单input tesxarea select 元素上双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<div id="app">
<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
{{message}}
<br>
性别：
<input type="radio" name="sex" value="男" v-model="check">男
<input type="radio" name="sex" value="女" v-model="check">女
<p>
选中了:{{check}}
</p>
<br>
下拉框：
<select v-model="select">
<option value="" disabled>--请选择--</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
value：{{select}}
</div>
<script>
var vm = new Vue({
el:"#app",
// Model层
data:{
message: "Summer",
check:"",
select:""
},
methods: {//方法必须定义在vue的Method对象中 v-on:事件
sayHi: function(a){
alert(this.message)
},
smile: function(a){
alert(this.message)
}
}
});
</script>
</body>
</html>
定义VUE组件
- 定义标签
- 用Vue.component 一个组件名一个对象
- 定义组件名
- 对象中用props绑定参数 template定义模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--view层 模板-->
<div id="app">
<!-- 组件：传递给组件中的值：props-->
<summer v-for="item in items" v-bind:bang="item"></summer>
</div>
<script>
//定义一个vue组件
Vue.component("summer",{
props:[‘bang‘],
template: ‘<li>{{bang}}</li>‘
});
var vm = new Vue({
el:"#app",
// Model层
data:{
items: ["Summer","Spring"]
}
});
</script>
</body>
</html>
Axios异步通信
通信一般想到JQuery，但是JQuery操作DOM太频繁，不推荐用
分类：鼠标事件 | jQuery API中文文档(适用jQuery 1.0 - jQuery 3.3.1) (html.cn)
- 钩子函数 链式函数 ES6新特性
data.json
{
"message": "hello,vue!",
"links": [
"a",
"b"
],
"url": "https://www.baidu.com"
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--v-clock解决闪烁问题 display: none; 没加载前白屏-->
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--view层 模板-->
<div id="app" v-clock>
<div>{{info.message}}</div>
<div>{{info.links}}</div>
<a v-bind:href="info.url">点我</a>
</div>
<script>
var vm = new Vue({
el: "#app",
//data:{}, vue的data属性
data(){
return{//return的是一个格式
//请求的返回参数合适，必须和json字符串一样
info:{
message:null,
url:null,
links:[]
}
}
},
mounted() { //钩子函数 链式函数 ES6新特性
//jQuery和Ajax都可以在这里处理 但是要处理dom
//axios 用到 data(){return{}}格式即可绑定
axios.get(‘../data.json‘).then(response => (this.info=response.data));
}
});
</script>
</body>
</html>