一、vue基本语法
1.if
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" >
<div v-if="type==='a' ">我是a的</div>
<div v-if="type==='b' ">我是b的</div>
<div v-if="type==='c' ">我是c的</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
type: 'a'
}
})
</script>
</html>
|
2.if else
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" >
<div v-if="type==='a' ">我是a的</div>
<div v-else>我是b的</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
type: 'a'
}
})
</script>
</html>
|
3.if else if else
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" >
<div v-if="true" >我是真的</div>
<div v-else-if="false" >我是假的</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
type: true
}
})
</script>
</html>
|
4.foreach
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
</script>
</html>
|
二、vue绑定事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="app" v-on:click="sayHi">点击
</button>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
type: true
},
methods:
{
sayHi: function () {
alert(this.type)
}
}
})
</script>
</html>
|
双向绑定
1.input=text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="type"/>{{type}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
type:""
}
})
</script>
</html>
|
v-model ：视图绑定对象
:获得值；
这个type的名字可以是任意的，也可以是节点名字attr();例如select多选框的check属性等；
2.select-option
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
I am<select v-model="type">
<option value="man">man</option>
<option value="woman">woman</option>
</select>
{{type}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
type:"man"
}
})
</script>
</html>
|
3.input=radio
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app" >
<input name="sex" v-model="checked" type="radio" value="man">man
<input name="sex" v-model="checked" type="radio" value="woman">woman
{{checked}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
checked: ""
}
})
</script>
</html>
|
三、vue组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<saxon v-for="item in texts" v-bind:sa="item"></saxon>
</div>
<script>
Vue.component('saxon',{
props:['sa'],
template:'<li>{{sa}}</li>',
});
new Vue({
el: '#app',
data:{texts:["java","saxon"]}
})
</script>
</body>
</html>
|
注意点：
1.vue对象里面要有一个data来传入值；
2.组件的格式是Vue.component(name,{propertirs}),没有=号
3.通过props传入值，使用参数的名字和props的名字一样
四、axios
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">{{info.name}}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el:"#vue",
data(){
return{
info:{
name:null
}
}
},
mounted(){
axios.get('date.json').then(Response=>this.info=Response.data);
}
});
</script>
</body>
</html>
|
需要导入包：
1
| <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
通过一个函数data(),返回数据，注意的是，接收数据的名字和json里面的名字一样，不然接收不到；
一般格式：
1
| axios.get('date.json').then(Response=>this.info=Response.data);
|
类似于Ajax，他的结果响应的也是一个xhr请求；
五、计算属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="vue">
<div>{{saxon2()}}</div>
<div>{{saxon1}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#vue",
methods: {
saxon2: function time() {
return Date.now();
},
},
computed: {
saxon1: function time() {
this.message;
return Date.now();
}
}
});
</script>
</body>
</html>
|
这个里面看起来结果是一样的，但是实际上methods是一个方法，就像是student.study()，而我们的computed是一个属性，就像是student.name一样,计算属性就像是一个缓存，只要外界不变，他就会一直存在，不需要频繁的刷新,就像上面的message一样，只要它的值不变，那么计算属性的值就不会变，从而减少浏览器的开销；
函数的写法：
1
2
3
4
| saxon1: function time() {
this.message;
return Date.now();
}
|
使用的话直接使用函数名就可以了；
