Vue
文章平均质量分 85
学习vue2.x
家乡的落日
博观约取,厚积薄发。拒绝浮躁,保持谦逊。
展开
-
九、操作数组的一些简单方法、动态数据处理
这篇文的的常用方法也可以看看https://blog.csdn.net/qq_37883866/article/details/119490601代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app">原创 2021-11-28 17:08:40 · 190 阅读 · 0 评论 -
Vue操作数组的几种常用方法(map、filter、forEach、find 和 findIndex 、some 和 every)
一、map方法 (返回一个新的数组 新数组中的元素是经过map函数内部代码块处理过的数据)代码示例:testMap() { let array = [1, 2, 3, 4]; let newArray = array.map(item=>{ return item += 1; }); console.log(newArray); }结果:注意点:map函数内部必须要有return 将数据返回 否则默认返回 undefined如果不加 return 如下:原创 2021-08-07 21:06:50 · 9941 阅读 · 9 评论 -
八、Vue生命周期
Vue生命周期官网图示https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>开发者工具网http://deepjava.gitee.io/go&原创 2021-11-28 16:51:39 · 214 阅读 · 0 评论 -
一、Vue基本语法结构、事件绑定(修饰符、参数传递)、按键绑定(修饰符)
Vue官网一、Vue结构<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style type="text/css"> [v-cloak] { display: none; } </sty原创 2021-11-16 22:16:47 · 642 阅读 · 0 评论 -
二、Vue 属性绑定、v-model的原理、绑定class、绑定style
一、属性绑定和v-model的原理v-bind: 可以绑定属性 例如 value属性 class属性 style属性等也可以直接简写成 :<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>开发者工具网(kinggm520.gitee.io/java)</title> <style type="text/原创 2021-11-18 20:12:17 · 1443 阅读 · 0 评论 -
三、Vue分支循环结构v-if v-else-if v-else v-show v-for
一、v-if 、v-else-if、 v-else 、v-show代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>开发者工具网(kinggm520.gitee.io/java)</title> <style type="text/css"> [v-cloak] {原创 2021-11-20 21:47:27 · 847 阅读 · 0 评论 -
四、Vue基础模板语法的应用 实现简单的tab页面(选项卡片)
效果图代码示例实际上就是通过操作数据来控制样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .tab ul { overflow: hidden; padding: 0; m.原创 2021-11-20 22:11:31 · 245 阅读 · 0 评论 -
五、Vue 基本的表单操作、表单域修饰符
一、 基本的表单操作input输入框(单行文本)、radio单选按钮 、checkbox 多选按钮、select下拉框选择(可多选)、textarea 文本域输入框(多行文本)代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>基本表单操作</title> <style type="text/css">原创 2021-11-27 22:28:30 · 497 阅读 · 0 评论 -
六、Vue自定义指令
一、自定义指令基本用法代码示例实现自动聚焦到输入框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>开发者工具网http://deepjava.gitee.io/go</title></head><body> <div id="app"><!-- 使用的使用要在指令前加 v-原创 2021-11-27 22:41:23 · 557 阅读 · 0 评论 -
七、计算属性、侦听器、过滤器
一、计算属性基本语法: computed: { // 类似写个方法 方法名称可以直接使用 值为 {}内部逻辑处理后的返回值 reverseString: function(){ // 字符串转数组 反转后 再拼接 return this.msg.split('').reverse().join(''); } }代码示例<!DOCTYPE html><html lang="e原创 2021-11-28 00:00:42 · 318 阅读 · 0 评论