指令

最新推荐文章于 2024-04-23 15:20:24 发布

勤奋的宇威

最新推荐文章于 2024-04-23 15:20:24 发布

阅读量227

点赞数

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45080852/article/details/104089585

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue指令

一

v-pre 跳过该元素和他的子元素的变异过程。显示原始的 {{}} 标签。
v-cloak 该指令保持在元素上，直到关联实例结束变异，可与css配合使用，隐藏未编译的 {{}} 标签。就是避免一次次的渲染，则可以使用css影藏起来，任何渲染完成这个指令则会消失
v-once 只渲染和组件一次，随后的重新渲染，元素、组件及其所有的子节点江北视为静态内容并跳过。这可以用于优化更新性能。vue内部进行了缓存，以后使用的值都是缓存里面的结果。
v-html === innerHTML 但是要防止 XXS 攻击，更新元素的innerTHTML
v-text innerText 更新元素的innerText
v-if 控制元素是否存在。
v-else
v-else-if

v-if 和 v-else 同时使用的时候不能有其它元素拆散。能显示和隐藏效果，这里的隐藏则是html结构不存在。

v-show display 控制元素的样式, 能显示和隐藏效果，这里的隐藏则是设置了disply:none。

v-show和v-if的区别？
1. v-if是控制该元素是否存在，值为false时，完全移除该元素
v-show是控制该元素的样式(display)，值为false时，元素的display为none
2. v-if支持template标签
v-show不支持template标签

练习

    <div id="app">
        <!-- {{ name }} -->
        <div v-pre>{{ name }}</div> 
        <!-- 张三 -->
        <div v-cloak>{{ name }}</div>
        <!-- 张三 -->
        <div v-once>{{ name }}</div>
        <!-- this is my beautiful -->
        <div v-html=domHtml></div>
        <!-- so so yeas -->
        <div v-text=domText></div>
    </div>
    <script>
        const vue = new Vue({
            el : "#app",
            data : {
                name : "张三",
                domHtml : "<span>this is my beautiful</span>",
                domText : "so so yeas"
            }
        });
        // v-once还是张三，v-cloak变为李四
        vue.name = "李四"; 
    </script>

二

v-bind: 绑定属性（v-bind: <==> : ）

如可以绑定图片的地址等。

class的绑定形式 class [] {}绑定多个
style的绑定形式 style {} [] :style > style
v-on: <==> @ 事件绑定事件绑定的方法在methods方法中写

虽然说data里面也可以使用绑定事件的方法，打印data里面的方法和methods里面的方法的this,发现都是一个vue实例，但是不传递参数的时候发现data中的this为window，methods中的this还是vue实例。

练习

    <div id="app">
        <div :class="[{ red : flag}]"></div>
        <div :class="[red,yellow]"></div>
        <div :style="{width: '120px' , height :'120px', backgroundColor : 'pink'}"></div>
        <div :style="domStyle"></div>
    </div>
    <script>
        const vue = new Vue({
            el : "#app",
            data : {
                flag : true,
                red : "red",
                yellow : "yellow",
                greed : "green",
                domStyle : {width:"50px", height : "50px", backgroundColor : "red"}
            }
        });
    </script>

事件绑定

    <div id="app">
        <div :class="domColor"></div>
        <button @click="change('red')">red</button>
        <button @click="change('yellow')">yellow</button>
        <button @click="change('greed')">greed</button>
    </div>
    <script>
        const vue = new Vue({
            el : "#app",
            data : {
                flag : true,
                domColor : 'red',
            },
            methods: {
                change(result){
                    this.domColor = result;
                }
            },
        });
    </script>

三

v-for 循环数组或者对象字符串等。一班我们设置v-for循环的时候会随着设置key值。

什么是key值？key值是vue中用来监听数据有没有变动，然后去改变dom，key值的作用：减少dom的渲染，

key值尽量保持唯一，不建议直接使用index

key值不会渲染到页面中的

练习

v-for

    <div id="app">  
        <div v-for="(item, index) in arr" :_key="`${index}_1`">{{ item }}</div>
        <div v-for="(key, value) in obj">{{ key }}</div>

        <template v-for="(item, index) in arr">
           <div :key="`${index}_1`" :_key="`${index}_1`">{{ item }}</div>
           <div :key="`${index}_2`" :_key="`${index}_2`">{{ item }}</div>
        </template>

        <div v-for="item in 8">{{item}}</div>
        <div v-for="item in 'yuwei'">{{ item }}</div>
    </div>
    <script>
        const vue = new Vue({
            el : "#app",
            data : {
                arr : [1,2,3,4],
                obj : {
                    a : "A",
                    b : "B", 
                    c : "C"
                }
            }
        })
    </script>

<div id="app">
        <div v-if="flag">
            <label for="name">名字</label>
            <input type="text" key="name" id="name">
        </div>
        <div v-else>
            <label for="age">年龄</label>
            <input type="text" id="age" key="age">
        </div>
        <button @click="change">切换</button>
    </div>
    <script>
        const vue = new Vue({
            el : "#app",
            data : {
                flag : true,
            },
            methods: {
                change(){
                    this.flag = !this.flag;
                }
            },
        })
    </script>

四

v-model 双向数据绑定

input text
textarea
input checkbox
input radio
select

v-model的本质是一个语法糖，实际上，是绑定value属性，同时监听input事件

v-model 等中还可以有修饰符
v-model.lazy : 当触发别的东西时候执行。
v-model.number :
v-model.trim : 取出首尾空格
@keyup.Enter=“change” 等修饰符
事件对象

$event

练习

v-model

 <div id="app">
        <!-- text -->
        <input type="text" v-model="content">{{ content }}
        
        <!-- textarea -->
        <textarea v-model="content"></textarea>{{ content }}

        <!-- input checkbox -->
        <label for="cg">成哥</label>
        <input type="checkbox" id="cg" value="cg" v-model="checked">
        <label for="ctg">思彤哥</label>
        <input type="checkbox" id="ctg" value="ctg" v-model="checked">
        <label for="dg">邓哥</label>
        <input type="checkbox" id="dg" value="dg" v-model="checked">
        {{ checked }}

        <!-- radio -->
        <label for="cg">成哥</label>
        <input type="radio" name="radio" id="cg" value="cg" v-model="radioed">
        <label for="dg">邓哥</label>
        <input type="radio" name="radio" id="cg" value="dg" v-model="radioed">
        <label for="st">思彤</label>
        <input type="radio" name="radio" id="cg" value="st" v-model="radioed">
        {{ radioed }}

            
        <label for="cg">成哥</label>
        <input type="checkbox" id="cg" v-model="checkedd">
        {{ checkedd }}

        <!-- 单选框实现不了true和false判断 -->
        <label for="st">思彤</label>
        <input type="radio" id="cg"  v-model="radioed">
        {{ radiodd }}  


        <!-- select单选 -->
        <select v-model="selected">
            <option value="" disabled>请选择</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
        {{ selected }}


        <!-- select多选 -->
        <select v-model="selecteds" multiple>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
        {{ selecteds }}
    </div>
    <script>
        const vue = new Vue({
            el : '#app',
            data : {
                content : '',
                checked : [],
                radioed : "",
                checkedd : false,
                radiodd : false,
                selected : '',
                selecteds : []
            }
        })
    </script>

五

directive自定义事件。

自定义事件，有全局自定义和局部定义事件。

el为元素本身, bindings为绑定的数据, vnode虚拟dom。

        // 第一个参数为名称，第二个参数可以是函数或者对象

        // 这个函数等于bind， 和 update
        // Vue.directive("slice",(el, bindings, vnode)=>{
        //     const val = bindings.value.slice(0,5);
        //     vnode.context.content = val;
        //     console.log(bindings); //  里面有def记录着bind He update
        // })

        Vue.directive("slice",{
            // 开始时候只执行一次
            bind(el, bindings, vnode){
                // el.focus();
            },
            // 虚拟dom改变的时候执行
            update(el, bindings, vnode){
                const val = bindings.value.slice(0,5);
                vnode.context.content = val;
            },
            // 插入到页面的时候执行
            inserted(el){
                el.focus(); //让input聚焦
            }
        })
        const vue = new Vue({
            el : "#app",
            data : {
                content : "a"
            }
        })

模拟双向数据绑定

    <div id="app">
        <input type="text" v-slice:11="content">
        {{ content }}
    </div>
    <script>
        // 第一个参数为名称，第二个参数可以是函数或者对象

        // 这个函数等于bind， 和 update
        // Vue.directive("slice",(el, bindings, vnode)=>{
        //     const val = bindings.value.slice(0,5);
        //     vnode.context.content = val;
        //     console.log(bindings); //  里面有def记录着bind He update
        // })

        Vue.directive("slice",{
            // 开始时候只执行一次
            bind(el, bindings, vnode){
                let context = vnode.context[bindings.expression];
                const length = bindings.arg || 5;
                el.value = context.slice(0,length);//开始得值
                vnode.context.content = context.slice(0,length)

                // 文本框的改变
                el.oninput = e => {
                    let value = e.target.value;
                    const val = value.slice(0,length);
                    e.target.value = val;
                    vnode.context[bindings.expression] = val;
                }

            },
            // 虚拟dom改变的时候执行
            update(el, bindings, vnode){
                const value = vnode.context[bindings.expression];
                const length = bindings.arg || 5;
                let val = value.slice(0,length)
                el.value = val;
                vnode.context.content = val;
            },
            // 插入到页面的时候执行
            inserted(el){
                el.focus(); //让input聚焦
            }
        })
        const vue = new Vue({
            el : "#app",
            data : {
                content : "aasdasd"
            }
        })
    </script>

六

slot 插槽
v-slot === #

    <div id="app">
        <my-button type="success" content="成功按钮">
            你在干嘛？
            <template #right>
                我是谁？
            </template>
            我在干嘛？
        </my-button>
    </div>
    <script>
        const vue = new Vue({
            el : "#app",
            components : {
                myButton : {
                    props : ['type', 'content'],
                    template : `<button  class="my-button" :class="type">
                                    <slot name="right"></slot>
                                </button>`
                }
            }
        })
    </script>