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键

原文地址:https://www.cnblogs.com/wuyuan2011woaini/p/12144493.html

时间: 2024-11-07 21:36:19

vue 示范模板 指令 按键修饰符的相关文章

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

这个问题困扰了我一个多小时,各种测bug !始终测不出来! 直接上代码(错误示范) <el-form-item prop="password"> <el-input @keyup.enter="check('form')" //在vue中这个代码是可行的 type="password" v-model="form.password" placeholder="密码" prefix-icon

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

### 虚拟DOM: 虚拟DOM就是内存中的一个变量,是一个对象结构 前端效率优化:最致命的问题就是DOM操作,尽量减少DOM操作 vue的高效: 1.虚拟DOM页面渲染高效 2.js   ①获取数据②根据数据渲染界面DOM操作 for vue将开发者的精力从DOM操作上转移到了数据操作上,数据变页面变 ### 指令: 内置指令 v-if v-show v-on----事件绑定 语法:  v-on:事件名称="事件函数" v-on:click="事件函数" 简写: 

Vue之@click、事件修饰符@click.stop与@click.prevent、按键修饰符@keyup.enter

1.绑定监听@click: (以监听click为例,其他如keyup,用法类似)  v-on:click="fun"  @click="fun"  @click="fun(参数)" <button @click="test1">test1</button> <button @click="test2('abc')">test2</button> <but

Vue 自定义按键修饰符

如点击F2 触发某个事件 <input type="button" name="" id="" value="添加" @keyup.f2="add" /> 自定义全局按键修饰符 Vue.config.keyCodes.f2 =113 其他自定义按键同理,只是编码数字需要自己去找. 原文地址:https://www.cnblogs.com/youmingkuang/p/11616785.html

vue中的按键修饰符

在版本2中这样定义的 1. .enter  (回车键) 2. .tab 3..delete  (捕获”删除“和”退格“键) 4. .esc      (退出键) 5. .space  (空格键) 6.  . up 7.  .dowm 8.  .left 9.  .right  (右箭头) 可以通过 Vue.config.keyCodes.f2=113 自定义按键修饰符   f2 是自定义的名称   ,113是键盘对应的码值 原文地址:https://www.cnblogs.com/Progres

418 vue自定义按键修饰符

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-on:keyup.aaa='handle

Render函数(2):使用原生js替代自定义指令、修饰符、slot

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

vue 中 v-model 和 .sync修饰符

v-model   1 <input v-model="searchText"> 2 3 等价于 4 <input 5 v-bind:value="searchText" 6 v-on:input="searchText = $event.target.value" 7 > 8 当用在组件上时,v-model 则会这样: 9 <custom-input 10 v-bind:value="searchText

vue组件双向绑定.sync修饰符的一个坑

我们知道组件是单项的,但是有时候需要双向,这时候我们可以使用.sync修饰符,但今天遇到一个坑,一直不成功,花了半小时试出来的.... 在编程的时候我们很习惯冒号后面跟着空格.而.sync双向绑定需要子组件显性触发 this.$emit('update:foo', newValue) 这里的updata:foo可以说是一个名字,不能加空格,不能加空格,不能加空格!!!这就是坑,由于编程习惯,也许会有人加空格,我也是,所以写出来当作一个笔记. 根据文档 <comp :foo.sync="ba