前端Vue

常见表单的基本用法

html

  <div id="app">
        <form action="" id="form">
            <span>姓名 :</span><input type="text" v-model="userName"><br>
            <span>性别: </span>
            <label for="man">男</label><input type="radio" id="man" value="男" v-model="sex">
            <label for="woman">女</label><input type="radio" id="woman" value="女" v-model="sex"><br>
            <label for="sing">唱歌</label><input type="checkbox" id="sing" value="唱歌" v-model="habby">
            <label for="run">跑步</label><input type="checkbox" id="run" value="跑步" v-model="habby">
            <label for="dance">跳舞</label><input type="checkbox" id="dance" value="跳舞" v-model="habby"><br>
            <select v-model="location" multiple>
                <option value="深圳市">深圳市</option>
                <option value="广州市">广州市</option>
                <option value="茂名市">茂名市</option>
                <option value="高州市">高州市</option>
            </select><br>
            <textarea cols="30" rows="10" v-model="textarea"></textarea>
            <button @click="handles">提交</button>
        </form>
    </div>

js

  let vm = new Vue({
            el: "#app",
            data: {
                userName: "李狗蛋",
                sex: "男",
                habby: ['跳舞'],
                location: ['茂名市'],
                textarea: "好开心"
            },
            methods: {
                handles: function (e) {
                    e.preventDefault()
                    console.log(this.userName)
                    console.log(this.sex)
                    console.log(this.habby)
                    console.log(this.location)
                    console.log(this.textarea)
                }
            }
        })

表单域修饰符

HTML

 <div id="app">
        <form>
            <input type="text" v-model.number="msg">
            <input type="text" v-model.trim="msg1">
            <input type="text" v-model.lazy="msg2">
            <div>{{msg2}}</div>
            <button v-on:click="handles">提交</button>
        </form>
    </div>

JS

 let vm = new Vue({
            el: "#app",
            data: {
                msg: "请叫我靓仔!",
                msg1: "",
                msg2: ""
            },
            methods: {
                handles: function (e) {
                    e.preventDefault()
                    console.log(this.msg)
                    console.log(this.msg1.length)
                }
            }
             })

Vue的指定义指令不带参数

html

  <div id="app">
        <input type="text" v-focus>
    </div>

script

 <script>
        Vue.directive('focus', {
            inserted: function (el) {
                //el表示指令所绑定的元素
                el.focus();
            }
        })
        let vm = new Vue({
            el: '#app',
            data: {

            }
        })
    </script>

directive 指令 inserted 插入

指定义指令带参数

HTML

  <div id="app">
        <input type="text" v-focus="msg">
    </div>

JS

  <script>
        Vue.directive('focus', {
            inserted: function (el, binding) {
                //el表示指令所绑定的元素
                // el.focus()
                console.log(binding)
                console.log(binding.value)
                el.style.backgroundColor = binding.value.color
            }
        })
        let vm = new Vue({
            el: '#app',
            data: {
                msg: {
                    color: "orange"
                }
            }
        })
    </script>

对于参数的打印结果:

指定义局部指令

HTML

 <div id="app">
        <input type="text" v-color="msg">
    </div>

js

let vm = new Vue({
            el: '#app',
            data: {
                msg: {
                    color: "orange"
                }
            },
            directives: {
                color: {
                    inserted: function (el, binding) {
                        //el表示指令所绑定的元素
                        // el.focus()
                        console.log(binding)
                        console.log(binding.value)
                        console.log(binding.value.color)
                        el.style.backgroundColor = binding.value.color
                    }
                }
            }
        })

注意：directive 要加s 为 directives

计算属性computed

计算属性浏览器启动时调用一次，将结果存储在缓存中，我们在之后调用它都是重缓存中获取数据，只有当数据改变时它才再次调用它，并有存储在缓存中。

我们应该如何调用computed里的方法呢？

我们直接在{{}}里写方法名

HTML:

 <div id="app">
        <div>{{msg}}</div>
        <div>{{reverseHolle}}</div>
    </div>

JS:

 let vm = new Vue({
            el: "#app",
            data: {
                msg: "Holle"
            },
            computed: {
                reverseHolle: function (e) {
                    console.log('computed')
                    return this.msg.split('').reverse().join('')
                }
            }
        })

显示：

方法methods和计算computed属性的区别

1. 方法methods中的函数是每调用一次执行一次，计算属性computed中的函数基于依赖进行缓存，只执行一次存入缓存中，之后从缓存中调用，只有数据改变时才重新调用并缓存，节约性能。

监听器watch基本用法

HTML

 <div id="app">
        <input type="text" v-model="firstName"><br>
        <input type="text" v-model="lastName">
        <div>{{xhName}}</div>
    </div>

js

  let vm = new Vue({
            el: "#app",
            data: {
                firstName: "东方",
                lastName: "耀",
                xhName: "东方耀"
            },
            computed: {
             },
            watch: {
                firstName: function (val) {
                    this.xhName = val + this.lastName
                },
                lastName: function (val) {
                    this.xhName = this.firstName + val
                }
            }
        })

监听器当监听的数据发生改变时便会触发watch中监听数据中定义的方法，监听器的方面名为你要监听的数据的属性名。

例如:你要监听”东方“这个数据，它的属性名为firstName，那么watch中定义的函数名为”东方“数据的属性名

 watch: {
                firstName: function (val) {
                    this.xhName = val + this.lastName
                }
        }

过滤器的基本用法

全局过滤器

 Vue.filter("upper", (val) => {
            return val.charAt(0).toUpperCase() + val.slice(1)
        })
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "holle"
            },
            methods: {

            }
        })

局部过滤器

  let vm = new Vue({
            el: "#app",
            data: {
                msg: "holle"
            },
            methods: {

            },
            filters: {
                upper: function (val) {
                    return val.charAt(0).toUpperCase() + val.slice(1)
                }
            }
        })

引用

 <div id="app">
        <input type="text" v-model="msg">
        <div>{{ msg | upper }}</div>
    </div>

Vue的生命周期

生命周期触发条件

beforeCreate、created、beforeMount、mounted
这四个生命周期一般都是页面加载完就调用完成
经常用的为mounted

beforeUpdate、beforeUpdate
beforeUpdate一般是数据发生变化时触发

 <div id="app">
        <input type="text" v-model="msg">
        <button v-on:click="handles">提交</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "请叫我靓仔"
            },
            methods: {
                handles: function (e) {
                    e.preventDefault()
                    console.log(1234)
                    this.msg = "你是小狗！"
                }
            },
            beforeCreate: function () {
                console.log(`beforeCreate`)
            },
            created: function () {
                console.log(`created`)
            },
            beforeMount: function () {
                console.log(`beforeMount`)
            },
            mounted: function () {
                console.log(`mounted`)
            },
            beforeUpdate: function () {
                console.log(`beforeUpdate`)
            },
            update: function () {
                console.log(`update`)
            },
            beforeDestroy:function(){
                console.log(`beforeDestroy`)
            },
            destroy:function(){
                console.log(`destroy`)
            }
        })