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. 2023-01-03：超过5名学生的课。编写一个SQL查询来报告 至少有5个学生 的所有班级，返回结果不限顺序。请问sql语句如何写？ +---------+ | class | +-----

    2023-01-03:超过5名学生的课.编写一个SQL查询来报告 至少有5个学生 的所有班级,返回结果不限顺序.请问sql语句如何写? ±--------+ | class | ±--------+ ...

  2. 2021-02-18：给定一个字符串str，给定一个字符串类型的数组arr，出现的字符都是小写英文。arr每一个字符串，代表一张贴纸，你可以把单个字符剪开使用，目的是拼出str来。返回需要至少多少张贴纸可以完成这个任务。例子：str= "babac"，arr = {"ba","c","abcd"}。a + ba + c 3 abcd + abcd 2 abcd+ba 2。所以返回2。

    2021-02-18:给定一个字符串str,给定一个字符串类型的数组arr,出现的字符都是小写英文.arr每一个字符串,代表一张贴纸,你可以把单个字符剪开使用,目的是拼出str来.返回需要至少多少张贴 ...

  3. 给你安利一款国产良心软件uTools

    前言 大家好,我是xiezhr 最近由于换了新电脑,也是在各种折腾搭建开发环境,安装各种常用软件.今天呢给大家安利一款你可能没用过的国产良心软件uTools,这也是我刚刚拿到电脑后安装的第一款软件吧. ...

  4. Django4全栈进阶之路3 apps.py 文件

    在 Django 4 中,每个应用(app)都需要定义一个 apps.py 文件,用于配置应用的基本信息,如应用的名称.显示名称.图标.默认路径.启动时需要执行的操作等.apps.py 文件是一个 P ...

  5. 基于.NetCore开源的Windows的GIF录屏工具

    推荐一个Github上Start超过20K的超火.好用的屏幕截图转换为 GIF 动图开源项目. 项目简介 这是基于.Net Core + WPF 开发的.开源项目,可将屏幕截图转为 GIF 动画.它的 ...

  6. Vue——前端发展史、Vue介绍和使用、插值语法、文本指令、事件指令

    前端的发展史 # 1 HTML(5).CSS(3).JavaScript(ES5.ES6):编写一个个的页面 -> 给后端(PHP.Python.Go.Java) -> 后端嵌入模板语法 ...

  7. sqlmap工具学习

    tryhackme:sqlmap github:https://github.com/sqlmapproject/sqlmap kali集成 参数介绍 sqlmap -h ___ __H__ ___ ...

  8. go 实现ringbuffer以及ringbuffer使用场景介绍

    ringbuffer因为它能复用缓冲空间,通常用于网络通信连接的读写,虽然市面上已经有了go写的诸多版本的ringbuffer组件,虽然诸多版本,实现ringbuffer的核心逻辑却是不变的.但发现其 ...

  9. WPF入门教程系列二十八 ——DataGrid使用示例MVVM模式(5)

    WPF入门教程系列目录 WPF入门教程系列二--Application介绍 WPF入门教程系列三--Application介绍(续) WPF入门教程系列四--Dispatcher介绍 WPF入门教程系 ...

  10. [MAUI]写一个跨平台富文本编辑器

    @ 目录 原理 创建编辑器 定义 实现复合样式 选择范围 字号 字体颜色与背景色 字体下划线 字体加粗与斜体 序列化和反序列化 跨平台实现 集成至编辑器 创建控件 使用控件 最终效果 已知问题 项目地 ...