Vue2学习笔记
1、插值语法:
1.1、功能:
用于解析标签体内容
1.2、写法:
{{ xxx }},xxx是js表达式,且可以直接读取到data中的所有属性。
2、收集表单数据
若:<input type="text"/>,则 v-model 收集的是 value 值,用户输入的就是 value 值。
若:<input type="radio"/>,则 v-model 收集的是 value 值,且要给标签配置 value 值。
若:<input type="checkbox"/>
1.没有配置 inpu t的 value 属性,那么收集的就是 checked(勾选 or 未勾选,是布尔值)
- 2.配置 input 的 value 属性:
- (1) v-model 的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
- (2)v-model 的初始值是数组,那么收集的的就是 value 组成的数组
v-model 的三个修饰符:
lazy:失去焦点再收集数据
number:输入字符串转为有效的数字
trim:输入首尾空格过滤
3、过滤器
3.1、定义:
对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
3.2、语法:
注册过滤器:Vue.filter(name,callback)(局部过滤器) 或 new Vue{filters:{}}(全局过滤器)
- 使用过滤器:{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
3.3、栗子:时间戳转换为自定义格式
HTML 代码:
<!-- 准备好一个容器-->
<!-- 用于定义局部过滤器 -->
<div id="root">
<h2>显示格式化后的时间</h2>
<!-- 计算属性实现 -->
<h3>现在是:{{fmtTime}}</h3>
<!-- methods实现 -->
<h3>现在是:{{getFmtTime()}}</h3>
<!-- 过滤器实现 -->
<h3>现在是:{{time | timeFormater}}</h3>
<!-- 过滤器实现(传参) -->
<!-- 1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
-->
<h3>现在是:{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
<h3 :x="msg | mySlice">大美女</h3>
</div> <!-- 用于定义全局过滤器 -->
<div id="root2">
<h2>{{msg | mySlice}}</h2>
</div>
Vue 代码:
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
}) new Vue({
el:'#root',
data:{
time:1621561377603, //时间戳
msg:'你好,尚硅谷'
},
// 计算属性
computed: {
fmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
// 方法
methods: {
getFmtTime(){
return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
}
},
//局部过滤器
filters:{
timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
// console.log('@',value)
return dayjs(value).format(str)
}
}
}) new Vue({
el:'#root2',
data:{
msg:'hello,atguigu!'
}
})
4、指令语法
4.1、功能:
用于解析标签(包括:标签属性、标签体内容、绑定事件.....)。
4.2、定义语法:
- 局部指令:
new Vue({ directives:{指令名:配置对象 } })
或
new Vue({ directives{指令名:回调函数 } })
- 全局指令:
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
4.3、使用:
v-bind:href="xxx" 或 简写为 :href="xxx",xxx 同样要写 js 表达式,且可以直接读取到 data 中的所有属性。
4.3、栗子备注:
- Vue中有很多的指令,且形式都是:v-自定义名称,此处我们只是拿 v-bind 举个例子
- 指令定义时不加 v- ,但使用时要加 v- ;
- 指令名如果是多个单词,要使用 kebab-case 命名方式,不要用 camelCase 命名。
4.4、栗子:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。
HTML 代码:
<!-- 准备好一个容器-->
<div id="root">
<h2>{{name}}</h2>
<h2>当前的n值是:<span v-text="n"></span> </h2>
<!-- <h2>放大10倍后的n值是:<span v-big-number="n"></span> </h2> -->
<h2>放大10倍后的n值是:<span v-big="n"></span> </h2>
<button @click="n++">点我n+1</button>
<hr/>
<input type="text" v-fbind:value="n">
</div>
Vue 代码:
new Vue({
el:'#root',
data:{
name:'尚硅谷',
n:1
},
directives:{
//big函数何时会被调用?1.指令与元素成功绑定时(一上来)。2.指令所在的模板被重新解析时。
// element:DOM元素,binding:传过来的值
big(element,binding){
console.log('big',this) //注意此处的this是window
// console.log('big')
element.innerText = binding.value * 10
},
fbind:{
//指令与元素成功绑定时(一上来)
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
}
}
})
Vue2学习笔记的更多相关文章
- Vue2 学习笔记1
什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...
- Vue2 学习笔记3
文中例子代码请参考github 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组 ...
- vue2 学习笔记2
文中例子代码请参考github 品牌管理案例 添加新品牌 <body> <div id="app"> <div class="panel p ...
- Vue2学习笔记:键盘事件
Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...
- Vue2 学习笔记5
文中例子代码请参考github watch属性的使用 考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变:(用以前的知识如何实现???) 监听data中属性的改变 ...
- Vue2 学习笔记4
文中例子代码请参考github 父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewM ...
- Vue2学习笔记:计算属性(computed)
参考:https://www.cnblogs.com/zycbloger/p/6428907.html
- Vue2学习笔记:组件(Component)
组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...
- Vue2学习笔记:过渡效果css
过渡效果 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡 <!DOCTYPE html> <html ...
- Vue2学习笔记:实例生命周期
实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个 ...
随机推荐
- mydodo协议
mydodo协议 目录 数据帧结构 命令 协议 代码样例 数据帧结构 帧头1 帧头2 设备号 命令 数据长度 数据 0x4D 0x59 xxx cmd nByte data 例子:设备my01 的继电 ...
- KingbaseES XA 分布式事务
在分布式系统中,各个节点(或者事务参与方)之间在物理上相互独立,各节点之间无法确切地知道其它节点中的事务执行情况,所以多节点之间很难保证ACID,尤其是原子性.如果是单节点的事务,由于存在事务机制,可 ...
- 如何修改SAO用户密码
KingbaseES SAO 用户是专门用于审计管理的用户,用户配置审计策略需要使用该用户.在initdb 完成后,SAO 用户的默认密码保存在参数 sysaudit.audit_table_pas ...
- K8S name_namespace
Name 由于K8S内部,使用"资源"来定义每一种逻辑概念(功能),故没种"资源",都应该有自己的"名称" "资源"有 ...
- Ansible_基础模块
特点:无主从,即装即用,基于ssh 安装ansible yum install epel-release -y yum install ansible -y 定义主机清单 vim /etc/ansib ...
- 聊聊两个Go即将过时的GC优化策略
转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 这篇文章本来是要讲 Go Memory Ballast 以及 Go GC Tuner 来 ...
- 跟羽夏学 Ghidra ——数据
写在前面 此系列是本人一个字一个字码出来的,包括示例和实验截图.本人非计算机专业,可能对本教程涉及的事物没有了解的足够深入,如有错误,欢迎批评指正. 如有好的建议,欢迎反馈.码字不易,如果本篇文章 ...
- linux使用iptables屏蔽ip地址
一.iptables命令介绍: netfilter/iptables(简称为iptables)组成Linux平台下的包过滤防火墙,与大多数的Linux软件一样,这个包过滤防火墙是免费的,在安装系统的时 ...
- 第一章:模型层 - 10:不返回QuerySets的API
以下的方法不会返回QuerySets,但是作用非常强大,尤其是粗体显示的方法,需要背下来. 方法名 解释 get() 获取单个对象 create() 创建对象,无需save() get_or_crea ...
- Kibana仪表盘(Dashboard)详解
Kibana 仪表板(Dashboard) 展示保存的可视化结果集合. 在编辑模式下,您可以根据需要安排和调整可视化结果集,并保存仪表板,以便重新加载和共享. 创建一个仪表板 如何创建一个仪表板: 点 ...