Vue.js——学习记录之一
1、下拉列表select：
资料来源：Vue.js之下拉列表及选中触发事件
2、checkbox全选与全不选：
<div id="app">
<ol>
<li>
<span><input type="checkbox" v-model="selectAll"></th></span>
<span align="left">全选</span>
</li>
<li v-for="answer in answers">
<span>
<input type="checkbox" v-model="selected" :value="answer.id" >
</span>
<span>{{ answer.name }}</span>
</li>
</ol>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
answers: [
{ "id": 1, "name": "A" },
{ "id": 2, "name": "B" },
{ "id": 3, "name": "C" },
{ "id": 4, "name": "D" }
],
selected: []
},
computed: {
selectAll: {
get: function () {
return this.answers ? this.selected.length == this.answers.length : false;
},
set: function (value) {
var selected = [];
if (value) {
this.answers.forEach(function (user) {
selected.push(user.id);
});
}
this.selected = selected;
}
}
}
});
</script>
资料来源：https://segmentfault.com/q/1010000007523319/a-1020000007524348
http://www.runoob.com/vue2/vue-forms.html
3、弹出框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ys-vue-modal-component</title>
<style>
p, h4 {
margin: 0;
}
.modal {
width: 480px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
margin: 50px;
}
.modal-header {
color: #fff;
background: cadetblue;
border-radius: 6px 6px 0 0;
padding: 15px;
border-bottom: 1px solid #5e9fa1;
}
.modal-content div {
padding: 15px 10px;
}
.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
.btn {
border: 1px solid #d1d1d1;
border-radius: 3px;
background-color: #f7f7f7;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));
/*background: -moz-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));
background: -o-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));
background: -ms-gradient(linear, 0 0, 0 100%, from(#f7f7f7), to(#f2f2f2));*/
height: 28px;
padding: 0 20px;
cursor: pointer;
line-height: 28px;
display: inline-block;
color: #666666;
margin-right: 5px;
outline: none;
}
.blue {
border: 1px solid #5e9fa1;
background-color: #5e9fa1;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#74c4c6), to(#5e9fa1));
/*background: -moz-gradient(linear, 0 0, 0 100%, from(#74c4c6), to(#5e9fa1));
background: -o-gradient(linear, 0 0, 0 100%, from(#74c4c6), to(#5e9fa1));
background: -ms-gradient(linear, 0 0, 0 100%, from(#74c4c6), to(#5e9fa1));*/
color: #FFFFFF;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" class="btn blue" value="点击我，呼唤弹窗，再来一遍" v-if="isHide" @click="isHide=!isHide">
<ys-modal-component v-if="!isHide"
modal-title="温馨提示"
ok-btn="确认购买"
cancel-btn="去意已决"
@on-ok="ok"
@on-cancel="cancel">
<div slot="modal-content">
尊敬的用户，您购买的商品将于支付成功后3-7个工作日内发货，敬请周知。祝您购物愉快！
</div>
</ys-modal-component>
</div>
<script>
/*
props：
modalTitle: 弹窗标题
okBtn: 确认按钮
cancelBtn: 取消按钮
注意事项：传参时候使用烤串的书写方式xx-xxx
slot:
modal-content: 内容区域
modal-footer： 页脚按钮区域
methods:
okHandle: 触发确认on-ok自定义事件
cancelHandle： 触发取消on-cancel自定义事件
*/
Vue.component('ys-modal-component', {
props: {
modalTitle: {
type: String,
default: '标题区域'
},
okBtn: {
type: String,
default: '确认'
},
cancelBtn: {
type: String,
default: '取消'
}
},
template: `
<div class="modal">
<div class="modal-header">
<h4>{{ modalTitle }}</h4>
</div>
<div class="modal-content">
<div>
<slot name="modal-content">内容区域</slot>
</div>
</div>
<div class="modal-footer">
<input class="btn blue" type="button" v-model="okBtn" @click="okHandle" />
<input class="btn" type="button" v-model="cancelBtn" @click="cancelHandle" />
</div>
</div>
`,
methods: {
okHandle () {
console.log("点击确定");
this.$emit("on-ok");
},
cancelHandle () {
console.log("点击取消");
this.$emit("on-cancel");
}
}
})
new Vue({
el: "#app",
data: {
isHide: false
},
methods: {
ok () {
alert("欢迎您购买本产品");
},
cancel () {
this.isHide = !this.isHide;
}
}
})
</script>
</body>
</html>
资料来源：https://www.jb51.net/article/139107.htm
4、前台取值后无法渲染控件：
解决方案：
this.$nextTick(() => {
//this.nextTick(callback)，当数据发生变化，更新后执行回调。
//this.$nextTick(callback)，当dom发生变化，更新后执行的回调。
self.classList = resp.data;//赋值
})
资料来源：https://www.cnblogs.com/junjingyi/p/9177243.html
5、调试报错“TypeError: this.$set is not a function”
错误原因：this指向问题
资料来源：https://www.cnblogs.com/agen-su/p/9772080.html
6、弹出框传值：
思路：按钮点击进入方法，传值+显示弹出框
7、能进入后台方法，却抓不住传入后台的参数值：
解决方案：使用transformRequest
axios({
method: 'post',
url: '/Back/StuMan.ashx?method=AddStuOne',
transformRequest: [
function (data) {
let params = '';
for (let index in data) {
params += index + '=' + data[index] + '&';
}
return params;
}
],
data:this.student
})
.then(function (resp) {
console.log(resp.data);
}).catch(resp => {
console.log('请求失败：' + resp.status + ',' + resp.statusText);
});
资料来源：Vue.js发送Ajax请求
8、Vue中computed、methods、watch三者的区别
浙公网安备 33010602011771号