vue-devtools-dev扩展(让浏览器拥有vue调试功能)
2. 在VUE中AJAX请求的库(axios)
Axios.js
Created:function(){ //用于初始化数据的钩子
Axios.get(‘URL’).then(success=>{
成功执行
},error=>{
失败执行
})
}
https://github.com/axios/axios
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
|
V-model（如果checkboxselecet是单选为true,false；多选为[],并且提供一个value属性;）实现数据双向绑定，常用于表单;
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
32
33
34
35
36
| <form id="example">
姓名：
<input type="text" v-model="data.name" placeholder="请输入姓名"/><br>
性别：
<input type="radio" id="man" value="One" v-model="data.sex" />
<label for="man">男</label>
<input type="radio" id="male" value="Two" v-model="data.sex" />
<label for="male">女</label> //使用单选按钮时，注意value不要以为一个值
必须是唯一的，否则value相同的会被同时选中
<br>
兴趣：
<input type="checkbox" id="book" value="book" v-model="data.interest" />
<label for="book">阅读</label>
<input type="checkbox" id="swim" value="swim" v-model="data.interest" />
<label for="swim">游泳</label>
<input type="checkbox" id="game" value="game" v-model="data.interest" />
<label for="game">游戏</label>
<br>
身份：
<select v-model="data.identity">
<option value="teacher" selected>教师</option>
<option value="doctor" >医生</option>
<option value="lawyer" >律师</option>
</select><br>
</form>
new Vue({
el:'#example',
data:{
data:{
name:"",
sex:"",
interest:[],
identity:''
}
}
})
|
V-model的修饰符
(1).lazy
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <input v-model.lazy="msg">
<div id="examples">
<input v-model="msg" lazy/><br>
{{msg}}//这种方式是及时读取数据并修改值 下面是正确的方法
</div>
<div id="example">
<input v-model.lazy="msg" /><br>
{{msg}}
</div>
var exampleLazy=new Vue({
el:"#example",
data:{
msg:"内容是在change时间之后才改变的"
}
})
|
(2) .number
自动将用户的输入值转化为数值类型（如果原值的转换结果为NaN，则返回原值）
1
| <inputv-model.number="msg">
|
(3) .trim
自动过滤用户输入的首尾空格
1
| <inputv-model.trim="msg">
|
