:data="" table中
v-bind:model="" :model="" form中
v-model指令的本质是：form-item中
1.它负责监听用户的输入事件，从而更新数据，并对一些极端场景进行一些特殊处理。
2.同时，v-model会忽略所有表单元素的value、checked、selected特性的初始值，它总是将vue实例中的数据作为数据来源。
3.然后当输入事件发生时，实时更新vue实例中的数据。
用v-bind和v-on指令实现v-model
<input type="text" @input="handleInput($event)" placeholder="请输入" v-bind:value="message">
==========================================
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
var array1 = [1,4,9,16];
const map1 = array1.map(x => x *2);
console.log(map1);
Array [2,8,18,32]
=========================================
el-table的数据源:data=， 单向绑定
vue + element UI <table>表格的常见的案例
https://www.jianshu.com/p/f1dd60cacfb5
==========================================
由于JavaScript的限制，Vue 无法检测到对数组的以下更改：
1. 当你用索引直接设置一个项目，例如 vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如 vm.items.length = newLength
为了克服注意事项1
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
为了克服注意事项2
vm.items.splice(newLength)
==========================================
Vue不允许向已创建的实例动态添加新的根级别反应属性。但是，可以使用该Vue.set(object, key, value)方法为嵌套对象添加反应性属性。例如，给出：
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
您可以使用以下方法将新age属性添加到嵌套userProfile对象：
Vue.set(vm.userProfile, 'age', 27)
您也可以使用vm.$set实例方法，它是全局Vue.set的别名：
this.$set(this.userProfile, 'age', 27)
==========================================
带有v-if的v-for
当它们存在于同一个节点上时，v-for其优先级高于v-if。这意味着v-if将分别在循环的每次迭代中运行。当您想要渲染仅用于某些项目的节点时，这非常有用，如下所示：
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
以上只会呈现不完整的待办事项。
==========================================
需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。
如果 Select 的绑定值为对象类型，请务必指定 value-key 作为它的唯一性标识。value / v-model 绑定值
==========================================
mounted() {
this.list = this.states.map(item => {
return { value: `value:${item}`, label: `label:${item}` };
});
},
==========================================
//------------------------公用方法定义-------------------//
Vue.prototype.showMessage = function (name, type, msg) {
var len = arguments.length;
if (len == 3) {
switch (arguments[0]) {
case 'add':
this.addAlertShow = true;
this.addAlertMsg = arguments[2];
this.addAlertType = arguments[1];
break;
case 'edit':
this.editAlertShow = true;
this.editAlertMsg = arguments[2];
this.editAlertType = arguments[1];
break;
case 'maintain':
this.maintainAlertShow = true;
this.maintainAlertMsg = arguments[2];
this.maintainAlertType = arguments[1];
break;
}
}
else if (len == 2) {
if (arguments[0] == 'error') {
this.$message.error(arguments[1]);
}
else if (arguments[0] == 'success') {
this.$message({
showClose: true,
message: arguments[1],
type: 'success'
});
}
}
}
==============================================
html: v-loading="loading
function getLBInfo() {
this.loading = true;
this.$http.post('/ToolingModelInfo/GetLBInfo',{ }, { emulateJSON: true }
).then(function (res) {
if (res.data.ReturnResult == '0') {
this.loading = false;
this.showMessage('success', res.data.ReturnMessage);
} else {
this.loading = false;
this.showMessage('error', res.data.ReturnMessage);
}
}, function () {
this.loading = false;
this.$message.error('查询数据失败!');
});
}
vue: loadding : false
===============================================
this.$nextTick()可以等待dom生成以后再来获取dom对象
this.$nextTick()在页面交互，尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势，
this.$nextTick(() => {
console.log(this.$refs['hello'].innerText);
});
================================================
el-form-item的嵌套
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
prop 两个作用
================================================
都不选用change
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
region: '',
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
==================================================
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
<el-button @click="resetForm('ruleForm')">重置</el-button>
==================================================
自定义验证
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
data() {
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
====================================================
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
==================================================
含有子表的添加删除
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
<el-form-item
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="dynamicValidateForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain, index) in dynamicValidateForm.domains"
:label="'域名' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="{
required: true, message: '域名不能为空', trigger: 'blur'
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
<el-button @click="addDomain">新增域名</el-button>
<el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
dynamicValidateForm: {
domains: [{
value: ''
}],
email: ''
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeDomain(item) {
var index = this.dynamicValidateForm.domains.indexOf(item)
if (index !== -1) {
this.dynamicValidateForm.domains.splice(index, 1)
}
},
addDomain() {
this.dynamicValidateForm.domains.push({
value: '',
key: Date.now()
});
}
}
}
</script>
=======================================================
async type_change(type){
const d = await this.$http.post('/goods/api/get_goods',{type_id:type})
=======================================================
在vue里，当你对一个不存在的属性或对象直接“.”进行赋值，或者对数组不存在的索引项直接用索引赋值，
从控制台打印可以看到数据变更，但无法使视图更新
=======================================================
forEach、for in 和for of的区别
forEach 不能使用break return 结束并退出循环
for in 和 for of 可以使用break return；
for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。
for of遍历的只是数组内的元素，而不包括数组的原型属性method和索引name
所以 for in 更适合遍历对象，for of 适合遍历数组或者类数组
浙公网安备 33010602011771号