vue+jquery实现select动态赋值（后台接口获取）

最近项目并不是全前后端分离，使用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 //实例销毁之后调用

如此就能展现：