2021-7-6 VUE笔记
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笔记的更多相关文章
- Vue笔记目录
Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待
- 《Vue笔记01: 我与唐金州二三事》
最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...
- Vue笔记--通过自定义指令实现按钮操作权限
经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...
- Vue笔记（有点乱）
Vue学习笔记(2019.7.31) 目录 Vue学习笔记(2019.7.31) vue 基本指令用法 v-cloak v-text v-html v-bind v-on 跑马灯 v-on v-mod ...
- 一个后端开发的 Vue 笔记【入门级】
一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...
- vue笔记
安装vue脚手架工具 sudo cnpm install -g vue-cli
- vue笔记 递归组件的使用
递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...
- vue笔记-列表渲染
用v-for把一个数组对应为一组元素 使用方法:v-for="(item,index) in items"//也可以使用of替代in { items:源数组 item:数组元素迭代 ...
- vue笔记-条件渲染
条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...
- 【Vue笔记】-- 详解vue生命周期
针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...
随机推荐
- 【干货】Vue2.x 组件通信方式详解，这篇讲全了
前言 vue是数据驱动视图更新的框架, 我们平时开发,都会把页面不同模块拆分成一个一个vue组件, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在v ...
- [Pytorch框架] 1.2、Pytorch环境搭建
文章目录 1.2 Pytorch环境搭建 1.2.1 安装Pytorch 1.2.2 配置 Jupyter Notebook 1.2.3 测试 1.2.4 问题解决 问题1:启动python提示编码错 ...
- ai问答：使用vite如何配置多入口页面
Vite 是一个 web 开发构建工具,它可以用于开发单页应用和多页应用.要在 Vite 中配置多入口,可以: 在 vite.config.js 中定义多个 entry 入口: export defa ...
- 2022-11-06：给定平面上n个点，x和y坐标都是整数， 找出其中的一对点的距离，使得在这n个点的所有点对中，该距离为所有点对中最小的。 返回最短距离，精确到小数点后面4位。
2022-11-06:给定平面上n个点,x和y坐标都是整数, 找出其中的一对点的距离,使得在这n个点的所有点对中,该距离为所有点对中最小的. 返回最短距离,精确到小数点后面4位. 答案2022-11- ...
- 2022-07-01：某公司年会上，大家要玩一食发奖金游戏，一共有n个员工， 每个员工都有建设积分和捣乱积分， 他们需要排成一队，在队伍最前面的一定是老板，老板也有建设积分和捣乱积分， 排好队后，所有
2022-07-01:某公司年会上,大家要玩一食发奖金游戏,一共有n个员工, 每个员工都有建设积分和捣乱积分, 他们需要排成一队,在队伍最前面的一定是老板,老板也有建设积分和捣乱积分, 排好队后,所有 ...
- 2022-05-03：Alice 和 Bob 再次设计了一款新的石子游戏。现有一行 n 个石子，每个石子都有一个关联的数字表示它的价值。给你一个整数数组 stones ，其中 stones[i] 是第
2022-05-03:Alice 和 Bob 再次设计了一款新的石子游戏.现有一行 n 个石子,每个石子都有一个关联的数字表示它的价值.给你一个整数数组 stones ,其中 stones[i] 是第 ...
- 2021-04-17：给定一个整型数组 arr，数组中的每个值都为正数，表示完成一幅画作需要的时间，再 给定 一个整数 num，表示画匠的数量，每个画匠只能画连在一起的画作。所有的画家 并行工作，请
2021-04-17:给定一个整型数组 arr,数组中的每个值都为正数,表示完成一幅画作需要的时间,再 给定 一个整数 num,表示画匠的数量,每个画匠只能画连在一起的画作.所有的画家 并行工作,请 ...
- 2021-12-09：二叉树展开为链表。 给你二叉树的根结点 root ，请你将它展开为一个单链表： 展开后的单链表应该同样使用 TreeNode ，其中 right 子指针指向链表中下一个结点，而左
2021-12-09:二叉树展开为链表. 给你二叉树的根结点 root ,请你将它展开为一个单链表: 展开后的单链表应该同样使用 TreeNode ,其中 right 子指针指向链表中下一个结点,而左 ...
- 2021-09-04：加油站。在一条环路上有 N 个加油站，其中第 i 个加油站有汽油 gas[i] 升。你有一辆油箱容量无限的的汽车，从第 i 个加油站开往第 i+1 个加油站需要消耗汽油 cost
2021-09-04:加油站.在一条环路上有 N 个加油站,其中第 i 个加油站有汽油 gas[i] 升.你有一辆油箱容量无限的的汽车,从第 i 个加油站开往第 i+1 个加油站需要消耗汽油 cost ...
- 记一次处理挖矿程序引发的postgres 连接超时
近一段时间内发现自己的服务器总是警告被挖矿,然处理挖矿程序中也引发了许多其他的问题,也从中学到了其他的知识,趁今天未加班梳理一下便于巩固,记录日常 文章目录 一.查找进程 1.使用 ll /proc/ ...