vue进阶03-vue语法学习实战

1.vue语法

这里使用一个增删改查的案例来讲vue常用的语法罗列
常用语法:

• 条件循环 参考
• 样式绑定 参考
• 表单双向绑定 参考
• $refs定位dom 参考
• ajax请求(axios)
  参考
• 事件处理 参考

其他语法学习参考网站

• vuejs官网
• 菜鸟教程
• vuejs api

2.vue案例

实现一个简单基于内存的CUD，读取从web服务器读取。

2.1 查询数据

这里直接使用axios来操作远程接口 导出数据格式为：

curl http://192.168.1.35/xxx/tpauth/supportType
{
    "success":true,
    "code":"200",
    "message":"成功",
    "time":1572580292756,
    "data":[
        {"id":1,"name":"微信","iconUrl":"https://www.easyicon.net/download/ico/1230528/32/","loginUrl":"/tpauth/login?code=WEIXIN","authUrl":"/auth/thirdLogin","enable":1,"code":"WEIXIN"},
        {"id":2,"name":"支付宝","iconUrl":"https://www.easyicon.net/download/ico/1226611/32/","loginUrl":"/tpauth/login?code=ALIPAY","authUrl":"/auth/thirdLogin","enable":1,"code":"ALIPAY"}
        ]
}

完整代码

<template>
    <div>
        <!--时间 v-on:click 缩写为 @click -->
        名称:<input type="button" @click="query" value="查询"><input type="button" @click="isActive=false;ctype='insert';clear()" value="新增">
        <table>
            <!--
                :style={"css樣式名稱":样式值是获取vue变量}
            -->
            <tr  :style="{fontSize:fontSizeVar}">
                <td>名称</td>
                <td>图标</td>
                <td>操作</td>
            </tr>
            <!--任意元素定义了ref属性 可以在vue中使用this.$refs.ref定义名称获取 返回的是一个原始dom元素数组-->
            <!--所有v-bind:src="vue属性值" 都可以简写为：src-->
            <tr v-for="(r,index) in thirdList" :ref="'tr_'+index" :class="{o:index%2==0}" @mouseover="mouseover(index)" @mouseout="mouseout(index)">
                <td>{{r.name}}</td>
                <td><img :src="r.iconUrl"/></td>
                <td><button @click="deleteUser(r)">删除</button><button @click="isActive=false;ctype='update';insertUser.id=r.id;insertUser.name=r.name;insertUser.iconUrl=r.iconUrl">修改</button></td>
            </tr>
        </table>
        <!--
             :class="{樣式表名稱：條件}"
             就是当vue数据isActive==true是 html中生成样式表class=active，注意必须在style中定义.active
             参考:https://cn.vuejs.org/v2/guide/class-and-style.html
        -->
        <div :class="{active:isActive}" v-if="!isActive" style="border:1px solid black;width:200px;padding-left: 20px">
            用户名称：<input v-model="insertUser.name"><br/>
            用户图标：<input v-model="insertUser.iconUrl"><br/>
            <img :src="insertUser.iconUrl"/>
            <input type="button" @click="insert" value="保存">

        </div>


    </div>


</template>
<script>
    import axios from "axios"
    import UUID from "es6-uuid"
    import Vue from 'vue'
    const AxiosPlugin={
        install(Vue){
            //axios拦截器用于在所有请求或者响应时做一些特殊处理
            axios.interceptors.request.use(config=>{
                //添加请求头
                config.headers.common["SourceFront"]="Test";
                return config;
            },error=>{
                return Promise.reject(error)
            })
        }
    }
    export default {
        data() {
            return {
                thirdList: null,
                isActive: true,
                fontSizeVar:"20px",
                currentHoverIndex:0,
                ctype:"insert",
                insertUser: {
                    id:"",
                    name: "",
                    iconUrl: ""

                }
            }
        },
        mounted(){
            console.log(axios.interceptors)
            //直接调用AxiosPlugin插件install方法，该AxiosPlugin对象无论use多少次都只实例化一个对象 是单例的
            //直接使用use来用的话 决定该插件是否使用。
            //参考：https://www.jianshu.com/p/89a05706917a
            Vue.use(AxiosPlugin)
            //调用查询
            this.query()
        },
        methods: {
            mouseover(index){
                var srcElement=this.$refs["tr_"+index][0];
                srcElement.style.backgroundColor="red";
            },
            mouseout(index){
                var srcElement=this.$refs["tr_"+index][0];
                srcElement.style.backgroundColor="";
            },
            deleteUser(record){
                this.thirdList.splice(this.thirdList.findIndex(item=>{
                    return item==record;
                }),1)
            },
            clear(){
                for (var p in this.insertUser){
                    this.insertUser[p]=""
                }
            },
            insert() {
                if(this.ctype==="insert") {
                    this.insertUser.id=UUID(32)
                    this.thirdList.push(this.insertUser)
                }else{
                    var index=this.thirdList.findIndex(item=>{
                        return item.id===this.insertUser.id
                    })
                    var item=JSON.parse(JSON.stringify(this.insertUser))
                    this.thirdList.splice(index,1,item);
                }
                this.isActive = true
            },
            query(event) {
                var dthis = this;
                //链式调用承诺将来执行的then和catch是一个异步操作 叫做Promise
                //axios.get("http://192.168.1.35/ums/tpauth/supportType1")返回就是一个Promise对象
                axios.get("http://192.168.1.35/ums/tpauth/supportType").then(response => {
                    this.thirdList = response.data.data
                }).catch(error=>{
                    Promise.reject(error);
                })
            }
        }
    }
</script>
<style>
    table {
        border: 0;
        margin: 0;
        border-collapse: collapse;
        border-spacing: 0;
        width: 30%;
        margin-top: 10px
    }
    mouseHover {
        background-color: red;
    }
    td {
        border: 1px solid black;
    }

    .active {
        display: none;
    }

    .o {
        background-color: gray;
    }


</style>

2.2语法解释

2.2.1 循环

代码:

 <tr v-for="(r,index) in thirdList" :ref="'tr_'+index" :class="{o:index%2==0}" @mouseover="mouseover(index)" @mouseout="mouseout(index)">
                <td>{{r.name}}</td>
                <td><img :src="r.iconUrl"/></td>
                <td><button @click="deleteUser(r)">删除</button><button @click="isActive=false;ctype='update';insertUser.id=r.id;insertUser.name=r.name;insertUser.iconUrl=r.iconUrl">修改</button></td>
</tr>

v-for="(r,index) in thirdList"表示循环thirdList数据
r表示当前循环行数据index表示当前行索引，其他vue语法中都可以直接使用r和index这两个变量

2.2.2 if条件

<div :class="{active:isActive}" v-if="!isActive" style="border:1px solid black;width:200px;padding-left: 20px">
    用户名称：<input v-model="insertUser.name"><br/>
    用户图标：<input v-model="insertUser.iconUrl"><br/>
    <img :src="insertUser.iconUrl"/>
    <input type="button" @click="insert" value="保存">

</div>
<style>      
   .active {
        display: none;
    }
</style>

v-if="!isActive" 当数据变量isActive=false时显示这个div 否则隐藏。
其他指令请参考官方api

2.2.3 样式

2.2.3.1 样式表

<div :class="{active:isActive}" v-if="!isActive" style="border:1px solid black;width:200px;padding-left: 20px">
    用户名称：<input v-model="insertUser.name"><br/>
    用户图标：<input v-model="insertUser.iconUrl"><br/>
    <img :src="insertUser.iconUrl"/>
    <input type="button" @click="insert" value="保存">

</div>

v-bind:class可以简写为:class
:class="{樣式表名稱：條件}"
就是当vue数据isActive==true是 html中生成样式表class=active，注意必须在style中定义.active
参考:https://cn.vuejs.org/v2/guide/class-and-style.html

2.2.3.2 内嵌样式

export default {
        data() {
            return {
                fontSizeVar:"20px"
            }
        }
 }
<tr  :style="{fontSize:fontSizeVar}">
    <td>名称</td>
    <td>图标</td>
    <td>操作</td>
</tr>

:style={“css樣式名稱”:样式值是获取vue变量}

2.2.4 事件

export default {
        mounted(){
            console.log(axios.interceptors)
            //直接调用AxiosPlugin插件install方法，该AxiosPlugin对象无论use多少次都只实例化一个对象 是单例的
            //直接使用use来用的话 决定该插件是否使用。
            //参考：https://www.jianshu.com/p/89a05706917a
            Vue.use(AxiosPlugin)
            //调用查询
            this.query()
        },
        methods: {
            clear(){
                for (var p in this.insertUser){
                    this.insertUser[p]=""
                }
            }
        },
        
 }
 
<input type="button" @click="isActive=false;ctype='insert';clear()" value="新增">

v-on:click可以简写为@click,其他事件参考,去掉on。
vue其他语法参考

2.2.5 ajax

query(event) {
    var dthis = this;
    //链式调用承诺将来执行的then和catch是一个异步操作 叫做Promise
    //axios.get("http://192.168.1.35/ums/tpauth/supportType1")返回就是一个Promise对象
    axios.get("http://192.168.1.35/ums/tpauth/supportType").then(response => {
        this.thirdList = response.data.data
    }).catch(error=>{
        Promise.reject(error);
    })
}

axios语法参考

2.2.6 vue内置属性

vm意思是View Model ，一般定义为

var vm=new Vue({
    el:'#app',
    render: h => h(ThirdList)
})
一般一个vue项目在main.js定义的为 root vm 

其他所有vue控件类中export default都将是一个vm对象。
vm对象的官方解释（https://cn.vuejs.org/v2/guide/instance.html）

<script>
export default {
    data() {
            return {
            }
    },
    mounted(){},
    methods: {}
}
</script>

生命周期图谱

2.2.6.1 属性

 var vm = new Vue({
    el:'#app', 
    data:{}, //数据
    methods:{}, //方法调用
    filters:{}, //私有过滤器 
    directives:{}, //私有指令
    component:{},  //私有组件    
    beforeCreate(){}, // 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
    created(){}, // 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
    beforeMount(){}, // 在挂载开始之前被调用：相关的 render 函数首次被调用。
    mounted(){}, //都能用了
    beforeupdate(){}, //数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
    updated(){}, //当这个钩子被调用时，组件 DOM 已经更新，
    beforeDestroy(){}, //实例销毁之前调用。在这一步，实例仍然完全可用。
    destroyed(){} //Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
});

2.2.6.2 $refs属性

在行上光标聚焦时高亮当前行，此时获取当前行的dom元素,可以将tr上设置ref=当前行索引

<tr v-for="(r,index) in thirdList" :ref="'tr_'+index" :class="{o:index%2==0}" @mouseover="mouseover(index)" @mouseout="mouseout(index)">
    <td>{{r.name}}</td>
    <td><img :src="r.iconUrl"/></td>
    <td><button @click="deleteUser(r)">删除</button><button @click="isActive=false;ctype='update';insertUser.id=r.id;insertUser.name=r.name;insertUser.iconUrl=r.iconUrl">修改</button></td>
</tr>

光标悬浮和移出事件 (通过this.$refs[“名称”]获取dom元素的数组)

methods: {
    mouseover(index){
        var srcElement=this.$refs["tr_"+index][0];
        srcElement.style.backgroundColor="red";
    },
    mouseout(index){
        var srcElement=this.$refs["tr_"+index][0];
        srcElement.style.backgroundColor="";
    }
}

2.2.6.3 $attrs和$props属性

vue的父子组件传值的时候，我们先需要的子组件上用props注册一些属性：

<template>
    <div>
        props:{{name}},{{age}} 或者 {{$props['name']}},{{$props['age']}}
    </div>
</template>

export default{
    props: ['name','age']
}

然后父组件调用的时候当属性来传值

<child name="rick" :age="当前vm中data数据"></child>

如果我们给child传props没有注册的属性gender，我们就要用$attrs来取了

<child name="rick" :age="18" gender="male"></child>

child:

<template>
    <div>
        props:{{name}},{{age}} 或者 {{$props['name']}},{{$props['age']}} 
        <br>
        attrs: {{$attrs['gender']}}  在$attrs里面只会有props没有注册的属性
    </div>
</template>

export default{
    props: ['name','age']
}

2.2.6.4 $route和$router属性

• router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，
  这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。
• route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等
  对应值就是当前路径对应的路由。

2.2.6.5 vm.$parent和vm.$root和vm.$children

1. vm.$root ：获取当前vm对象的根vm对象 ,一般root就是main.js中new
   Vue的那个

    this.$root.$options
    {components: {…}, directives: {…}, filters: {…}, _base: ƒ, el: "#app", …}

2. vm.$parent ：获取当前vm对象的父vm对象 ,有父子控件的可以获取父vm。
3. vm.$children ：获取当前vm对象的所有子vm对象。

如果需要查看vue控件的父子关系，可以使用浏览器安装vue-devtools插件，如果检测到vue项目，多一个vue面板

2.2.6.6 $store

VueX 是一个专门为 Vue.js
应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成
vue 组件里的某些 data )。 Vue有五个核心概念，state, getters, mutations,
actions, modules。本文将对这个五个核心概念进行梳理。

• state => 基本数据
• getters => 从基本数据派生的数据
• mutations => 提交更改数据的方法，同步！
• actions => 像一个装饰器，包裹mutations，使之可以异步。
• modules => 模块化Vuex

简单案例:

初始化store

const store = new Vuex.Store({
    state: {
        count:0
    }
})
const app = new Vue({
    el:"#app"
    store,
    router,
    render: h => h(App)
})

任何vm中可以直接应用

  {{this.$store.state.count}}

具体详细参考官网

2.2.6.x 其他$属性

1. vm.$el：获取vm对象关联的DOM元素；

2. vm.$data：获取Vue实例的data选项（对象）

3. vm.$options：获取Vue实例的自定义属性（如vm.$options.methods,获取Vue实例的自定义属性methods）

4. vm.$mount方法是在dom上挂载我们的扩展.

var judy = Vue.extend({
    template:'<p>{{message}}</p>',
    data: function () {
        return{
            message:'I am Jiaozi'
        }
    }
    
});
var vm = new judy().$mount('#app')
<div id="app">
        {{message}}
</div>
打印结果：
<p>I am Jiaozi</p>

其他方法比如 $watch $once $emit 参考官方api
其他属性参考(https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B%E5%B1%9E%E6%80%A7)