vue 示范模板 指令 按键修饰符

Posted wuyuan2011woaini

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 示范模板 指令 按键修饰符相关的知识,希望对你有一定的参考价值。

原文链接地址:https://my.oschina.net/u/4087782/blog/3119601

  • 模板示范
<div id="d1">

</div>
<script>
    new Vue({
        el:"#d1",  //	作用的区域
        data:{		//	参数

        },
        methods:{	//  函数

    	},
        computed:{	//	计算数据函数

        },
        create:{	//  页面开始加载时运行

        }
    })
</script>
  • 插值表达式:{{}}

    • 在Vue的作用范围中使用data
    • 支持js代码的运算
    • 支持函数的调用
  • v-text:直接进行输出,会覆盖原有内容

  • v-html:会把数据解析成html代码执行

  • v-bind:对属性进行绑定

    • 简写 :属性=‘‘ ‘ 值 ‘ ‘‘
    • 变量必须使用 ‘ ‘ 包裹,否则会被当做变量去Vue中寻找
    • 变量名中含有 - 时,需要使用 ‘ ‘ 进行包裹
    • 使用对象时可以不用加 ‘ ‘
  • v-model:表单数据的双向绑定,也是Vue

  • v-if:控制标签元素

    • 每次都会删除或创建元素
    • 有较高的切换性能消耗
  • v-show:控制标签元素

    • 没有进行删除,添加了display=none
    • 有较高的初始渲染消耗
  • v-for:循环

    //  遍历数组
    v-for = "(item,i) in 数组"
    //	遍历对象
    v-for = "(val,key,i) in 对象"
    //	迭代数字
    v-for = "(count,i) in 数字"
    
  • v-on:绑定事件

    • 事件修饰符
    • stop:阻止冒泡(从内到外执行函数)
    • prevent:阻止默认行为
    • capture:使用捕获机制执行函数(从外到内)
    • self:只有自己才能触发
    • once:只触发一次事件修饰符
  • 按键修饰符:修饰v-on绑定的事件

    • .enter //回车键
    • .tab //Tab键
    • .delete (捕获 "删除" 和 "退格" 键) //Backspace键或Delete键
    • .esc //Esc键
    • .space //空格键
    • .ctrl //Ctrl键
    • .alt //Alt键
    • .shift //Shift键

以上是关于vue 示范模板 指令 按键修饰符的主要内容,如果未能解决你的问题,请参考以下文章

Vue 第二章 自定义修饰符指令生命周期函数

当使用vue的按键修饰符不起效果的时候怎么办?如@keyup.enter = '' ;

Vue之自定义按键及指令

vue01----虚拟DOM指令事件修饰符按键修饰符双向数据绑定v-if和v-show的区别

vue01----虚拟DOM指令事件修饰符按键修饰符双向数据绑定v-if和v-show的区别

Vue3中模板指令的非兼容变更