最近项目并不是全前后端分离,使用vue+jquery实现前端页面;
记录在使用select组件时的使用:
一、不通过后台取值,在vue中定义下拉框数据:
html代码如下:
通过v-model可以获取到选中的值,如果没值就默认第一个;如果有值就显示有值的那个内容
<template>
<div class="violationsList">
<div class="type-select">
<select name="selected" id="" v-model="selected" @change="getTypeSelected">
<option :value="types.id" v-for="types in typeList" >{{types.name}}</option>
</select>
</div>
</div>
</template>
js中写如:
<script>
export default {
data(){
return{
typeList:[
{id:1,name:'违规类型'},
{id:2,name:'无人值守'},
{id:3,name:'蒙头睡觉'},
],
selected:''
}
},
created(){
//如果没有这句代码,select中初始化会是空白的,默认选中就无法实现
this.selected = this.typeList[0].id;
},
methods:{
getTypeSelected(){
//获取选中的违规类型
console.log(this.selected)
}
}
}
</script>
亲测是可以的;
二、从后台获取值实现
个人实现:
html中:
<div class="col-sm-8">
<input type="text" name="jobAccount" class="form-control"
v-model="app.version" placeholder="版本"/>
</div>
js中:
computed:{
certTypeList:function(){
var finalArr = new Array();
$.get(baseURL + "sys/dict/getDictByCode/certType", function(r){
var resultArr = r.data;
for(var i=0;i<resultArr.length;i++){
var mode = {};
mode.code = resultArr[i].code;
mode.value = resultArr[i].value;
finalArr.push(mode);
}
});
return finalArr;
},
},
这里使用了computed,需要了解到vue各个方法的执行顺序:
扩展:
在页面首次加载执行顺序有如下:
beforeCreate //在实例初始化之后、创建之前执行
created //实例创建后执行
beforeMounted //在挂载开始之前调用
filters //挂载前加载过滤器
computed //计算属性
directives-bind //只调用一次,在指令第一次绑定到元素时调用
directives-inserted //被绑定元素插入父节点时调用
activated //keek-alive组件被激活时调用,则在keep-alive包裹的嵌套的子组件中触发
mounted //挂载完成后调用
{{}} //mustache表达式渲染页面
修改页面input时,被自动调用的选项顺序如下:
watch //首先先监听到了改变事件
filters //过滤器没有添加在该input元素上,但是也被调用了
beforeUpdate //数据更新时调用,发生在虚拟dom打补丁前
directived-update //指令所在的组件的vNode更新时调用,但可能发生在其子vNode更新前
directives-componentUpdated//指令所在的组件的vNode及其子组件的vNode全部更新后调用
updated //组件dom已经更新
组件销毁时,执行顺序如下
beforeDestroy //实例销毁之前调用
directives-unbind //指令与元素解绑时调用,只调用一次
deactivated //keep-alive组件停用时调用
destroyed //实例销毁之后调用
如此就能展现: