vue中的一些基本属性和指令

new Vue({
    el:" #root',          //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
    data:{ }                 //data中用于存储数据,数据供e1所指定的容器去使用,值我们暂时先写成一个对象。
    methods              //定义方法
    computed            //计算属性
    watch                  //监视属性
})

指令语法:用于解析标签(包括:标签属性,绑定事件,标签体内容...)
        v-bind:绑定属性,可简写':'
        v-model: 双向数据绑定(页面改变数据可影响数据),只能用于表单类元素
                v-model:value可以简写为v-model
                事件修饰符
                    prevent:阻止默认事件;
                    stop:阻止事件冒泡;
                    once:事件只触发一次;
                    capture:使用事件的捕获模式;
                    self:只有event.target是当前操作的元素是才触发事件;
                    passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
                    trim:去掉空格;
                    number(bug:a12这种会被识别,type改为number):数字限制
                    lazy:vue中的onchange方法(懒监听)
        v-on:事件绑定,可简写'@'
        v-if v-else-if v-else:vue中的条件指令(如果节点不符合条件,则不加载该节点)
        v-show:vue中判断按钮显示的指令(不显示使用display:none样式设置隐藏)   

        v-text
            1.作用:向其所在的节点中渲染文本内容。
            2.与插值语法的区别:v-text会替换掉节点中的内容,{ {xx}}则不会.

        v-html指令:
            1.作用:向指定节点中渲染包含html结构的内容
            2.与插值语法的区别:
                (1).v-html会替换掉节点所有的内容,{ {xx}}则不会
                (2).v-html可以识别html结构。
            3.严重注意: v-html有安全性问题!!!!
                (1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击
                (2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!

        v-cloak指令(没有值);
            1.本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。
            2.使用css配合v-cloak可以解决网速慢时页面展示出{ {xxx}}的问题
                [v-cloak]{display:none;}

        v-once指令:
            1.v-on  ce所在节点在初次动态渲染后,就视为静态内容了。
            2.以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。

        v-pre指令:
            1.跳过其所在节点的编译过程。
            2.可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译.

Guess you like

Origin blog.csdn.net/q12as/article/details/121107522