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、栗子备注:

  1. Vue中有很多的指令,且形式都是:v-自定义名称,此处我们只是拿 v-bind 举个例子
  2. 指令定义时不加 v- ,但使用时要加 v- ;
  3. 指令名如果是多个单词,要使用 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学习笔记的更多相关文章

  1. Vue2 学习笔记1

    什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue语法也是可以用于进行手机App开发的,需要借助于Wee ...

  2. Vue2 学习笔记3

    文中例子代码请参考github 定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组 ...

  3. vue2 学习笔记2

    文中例子代码请参考github 品牌管理案例 添加新品牌 <body> <div id="app"> <div class="panel p ...

  4. Vue2学习笔记:键盘事件

    Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...

  5. Vue2 学习笔记5

    文中例子代码请参考github watch属性的使用 考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变:(用以前的知识如何实现???) 监听data中属性的改变 ...

  6. Vue2 学习笔记4

    文中例子代码请参考github 父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例,得到 ViewM ...

  7. Vue2学习笔记:计算属性(computed)

    参考:https://www.cnblogs.com/zycbloger/p/6428907.html

  8. Vue2学习笔记:组件(Component)

    组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  9. Vue2学习笔记:过渡效果css

    过渡效果 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡 <!DOCTYPE html> <html ...

  10. Vue2学习笔记:实例生命周期

    实例生命周期 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个 ...

随机推荐

  1. mydodo协议

    mydodo协议 目录 数据帧结构 命令 协议 代码样例 数据帧结构 帧头1 帧头2 设备号 命令 数据长度 数据 0x4D 0x59 xxx cmd nByte data 例子:设备my01 的继电 ...

  2. KingbaseES XA 分布式事务

    在分布式系统中,各个节点(或者事务参与方)之间在物理上相互独立,各节点之间无法确切地知道其它节点中的事务执行情况,所以多节点之间很难保证ACID,尤其是原子性.如果是单节点的事务,由于存在事务机制,可 ...

  3. 如何修改SAO用户密码

    KingbaseES SAO 用户是专门用于审计管理的用户,用户配置审计策略需要使用该用户.在initdb 完成后,SAO  用户的默认密码保存在参数 sysaudit.audit_table_pas ...

  4. K8S name_namespace

    Name 由于K8S内部,使用"资源"来定义每一种逻辑概念(功能),故没种"资源",都应该有自己的"名称" "资源"有 ...

  5. Ansible_基础模块

    特点:无主从,即装即用,基于ssh 安装ansible yum install epel-release -y yum install ansible -y 定义主机清单 vim /etc/ansib ...

  6. 聊聊两个Go即将过时的GC优化策略

    转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 这篇文章本来是要讲 Go Memory Ballast 以及 Go GC Tuner 来 ...

  7. 跟羽夏学 Ghidra ——数据

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.本人非计算机专业,可能对本教程涉及的事物没有了解的足够深入,如有错误,欢迎批评指正. 如有好的建议,欢迎反馈.码字不易,如果本篇文章 ...

  8. linux使用iptables屏蔽ip地址

    一.iptables命令介绍: netfilter/iptables(简称为iptables)组成Linux平台下的包过滤防火墙,与大多数的Linux软件一样,这个包过滤防火墙是免费的,在安装系统的时 ...

  9. 第一章:模型层 - 10:不返回QuerySets的API

    以下的方法不会返回QuerySets,但是作用非常强大,尤其是粗体显示的方法,需要背下来. 方法名 解释 get() 获取单个对象 create() 创建对象,无需save() get_or_crea ...

  10. Kibana仪表盘(Dashboard)详解

    Kibana 仪表板(Dashboard) 展示保存的可视化结果集合. 在编辑模式下,您可以根据需要安排和调整可视化结果集,并保存仪表板,以便重新加载和共享. 创建一个仪表板 如何创建一个仪表板: 点 ...