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. DataRow修改某一Cell的值

    发现ItemArray并不能改变DataRow的值,之前用ItemArray来复制整行数据的操作. 实际上可以直接用DataRow[]就可以直接改变对应Cell的值.

  2. SpringMvc请求流程源码解析

    目录 SpringMvc请求流程图 请求流程粗讲解 方法细讲 doDispatcher --> 核心 找到Handler#getHandler getHandler(request) mappi ...

  3. docker容器数据卷的使用

    什么是容器数据卷 docker的理念回顾 将应用和运行的环境打包形成容器运行,运行可以伴随着容器,但是我们对于数据的要求,是希望能够持久化的! 就好比,你安装一个MySQL,结果你把容器删了,就相当于 ...

  4. nginx的安装和配置

    目录 目录 一.购买下载SSL证书 二.修改Nginx配置信息 三.重启Nginx 一.购买下载SSL证书 SSL证书阿里云做活动期间可以免费申请,购买SSL证书时选择单域名-DV SSL-免费版即可 ...

  5. JAVA中自定义扩展Swagger的能力,自动生成参数取值含义说明,提升开发效率

    大家好,又见面了. 在JAVA做前后端分离的项目开发的时候,服务端需要提供接口文档供周边人员做接口的对接指导.越来越多的项目都在尝试使用一些基于代码自动生成接口文档的工具来替代由开发人员手动编写接口文 ...

  6. KingbaseES R3 集群一键修改集群用户密码案例

    案例说明: 在KingbaseES R3集群的最新版本中增加了kingbase_monitor.sh一键修改集群用户密码的功能,本案例是对此功能的测试. kingbaseES R3集群一键修改密码说明 ...

  7. 【android逆向】 ARM for 逆向

    C源码 #include <stdio.h> int nums[5] = {1, 2, 3, 4, 5}; int for1(int n){ //普通for循环 int i = 0; in ...

  8. WebDriver常见操作

    本文当个记录贴,记录WebDriver常用的一些函数(含自己封装的函数) 让WebDriver使用浏览器用户设置 1 option = webdriver.ChromeOptions() 2 opti ...

  9. [Python]-sklearn.model_selection模块-处理数据集

    拆分数据集train&test from sklearn.model_selection import train_test_split 可以按比例拆分数据集,分为train和test x_t ...

  10. ELK基于ElastAlert实现日志的微信报警

    文章转载自:https://mp.weixin.qq.com/s/W9b28CFBEmxBPz5bGd1-hw 教程pdf文件下载地址 https://files.cnblogs.com/files/ ...