v-cloak：使用的display：none；

直到编译完成后开始显示；

v-text和插值表达式，非必要响应式用v-text会比较好，使用插值表达式要加上v-cloak;

v-html：不推荐使用，动态渲染网页容易导致xss攻击；

本网站内部使用，不应该在来自使用外部数据或者跨域使用；

v-pre：不进行编译，即类似于插值表达式不执行，返回初始状态{{message}}

v-once：只赋值一次，只渲染一次

Vue的v-model使用的是MVVM模式：view和model通过viewmodel进行交互，view通过Data Bindings绑定model

model通过Dom Listeners监听view的值

v-on：事件绑定，可用@表示；

传参时用$event可获取当前使用的控件参数,$event必须放在最后面,相当于选择器例如（event.target.TagName)或（event.target.innerHTML）；

不传参时默认调用$event做为第一个参数；

事件修饰符：.stop:阻止冒泡（传统阻止冒泡event.stopPropagetion()）：冒泡是指由小到大触发标签或者方法

.prevent:阻止默认行为：指标签默认会产生的行为

按键事件修饰符示例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

  <input type="text" v-model="name" @keyup.delete="del">

  <input type="text" v-model="pwd" @keyup.enter="handle"  @keyup.delete="del">

  <input type="button" value="提交" @click="handle">

</div>

<script>

new Vue({

  el: '#app',

  data: {

    name:'',

    pwd:''

  },

  methods:{

    handle:function(){

     console.log(this.name,this.pwd);

    },

    del:function(){

      this.name='';

      this.pwd='';

    }

  }

})

</script>

</body>

</html>

获取按键修饰符的编号，以使用keycode

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

  <input type="text" @keyup="handle($event)">

</div>

<script>

new Vue({

  el: '#app',

  data: {

    code:0

  },

  methods:{

    handle:function(event){

     console.log(event.keyCode);

    }

  }

})

</script>

</body>

</html>
Vue.config.keyCodes.a=65;

上方代码可直接通过keyup.a调用对应的按键

*parseInt可强转string类型为int

v-bind:可以用：代替

实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

  <input type="button" @click="handle()" value="改变">

  <a v-bind:href="url">{{name}}</a>

</div>

<script>

Vue.config.keyCodes.a=65;

new Vue({

  el: '#app',

  data: {

    name:'必应',

    url:'https://cn.bing.com/?mkt=zh-CN'

  },

  methods:{

    handle:function(){

     this.name="百度";

     this.url="https:\\www.baidu.com";

    }

  }

})

</script>

</body>

</html>

v-model：实现原理

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

  <input type="text"  :value="name" @input="handle">

  <input type="text"  :value="name" @input="handle">

</div>

<script>

Vue.config.keyCodes.a=65;

new Vue({

  el: '#app',

  data: {

     name:'陌生人，你好鸭'

  },

  methods:{

    handle:function(event){

     this.name=event.target.value;

    }

  }

})

</script>

</body>

</html>

2021-7-6 VUE笔记的更多相关文章

  1. Vue笔记目录

    Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待

  2. 《Vue笔记01: 我与唐金州二三事》

    最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...

  3. Vue笔记--通过自定义指令实现按钮操作权限

    经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...

  4. Vue笔记（有点乱）

    Vue学习笔记(2019.7.31) 目录 Vue学习笔记(2019.7.31) vue 基本指令用法 v-cloak v-text v-html v-bind v-on 跑马灯 v-on v-mod ...

  5. 一个后端开发的 Vue 笔记【入门级】

    一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...

  6. vue笔记

    安装vue脚手架工具 sudo cnpm install -g vue-cli

  7. vue笔记 递归组件的使用

    递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...

  8. vue笔记-列表渲染

    用v-for把一个数组对应为一组元素 使用方法:v-for="(item,index) in items"//也可以使用of替代in { items:源数组 item:数组元素迭代 ...

  9. vue笔记-条件渲染

    条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...

  10. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

随机推荐

  1. islider.js轮播图

    本篇文章地址:https://www.cnblogs.com/Thehorse/p/11601032.html css #iSlider-effect-wrapper { height: 220px; ...

  2. [C++提高编程] 3.3 deque容器

    文章目录 3.3 deque容器 3.3.1 deque容器基本概念 3.3.2 deque构造函数 3.3.3 deque赋值操作 3.3.4 deque大小操作 3.3.5 deque 插入和删除 ...

  3. MySQL WorkBench更换界面成中文的方法

    菜单页面更换 文章目录 菜单页面更换 汉化文件的xml文件我放在下面的网盘中了 1.找到MySQL的安装位置, 总结 汉化文件的xml文件我放在下面的网盘中了 1.找到MySQL的安装位置, 具体安装 ...

  4. 求解 LCA の方法

    最近公共祖先(LCA) 最近公共祖先简称 LCA(Lowest Common Ancestor).两个节点的最近公共祖先,就是这两个点的公共祖先里面,离根最远的那个. -----oi wiki 举个例 ...

  5. Unity2021SteamingAssets数量限制导致打包异常解决

    最近将项目从Unity2019升级到Unity2021,打包安卓的时候出现异常.查了下资料说是数量超出限制,需要设置不压缩的数量. 1. 使用自定义mainTemplate.gradle 打开编辑,a ...

  6. 获取scrollTop的方法(兼容所有浏览器)

    /** *获取scrollTop的值,兼容所有浏览器 */ function getScrollTop() { var scrollTop = document.documentElement.scr ...

  7. 2022-06-21：golang选择题，以下golang代码输出什么？A：3；B：4；C：100；D：编译失败。 package main import ( “fmt“ ) func

    2022-06-21:golang选择题,以下golang代码输出什么?A:3:B:4:C:100:D:编译失败. package main import ( "fmt" ) fu ...

  8. .join()字符串操作函数

    join函数是一个字符串操作函数 str.join(item)str表示字符串(字符),item表示一个成员,注意括号里必须只能有一个成员,比如','.join('a','b')这种写法是行不通的 举 ...

  9. 如何借助Kafka持久化存储K8S事件数据？

    大家应该对 Kubernetes Events 并不陌生,特别是当你使用 kubectl describe 命令或 Event API 资源来了解集群中的故障时. $ kubectl get even ...

  10. 500行代码代码手写docker-将rootfs设置为只读镜像

    (3)500行代码代码手写docker-将rootfs设置为只读镜像 本系列教程主要是为了弄清楚容器化的原理,纸上得来终觉浅,绝知此事要躬行,理论始终不及动手实践来的深刻,所以这个系列会用go语言实现 ...