Vue2
文章平均质量分 85
Vue -- 尚硅谷(张天禹)
CodeJiao
今之视昔,亦如后世视今。
展开
-
Vue -- 列表渲染(基本列表 & key的原理 & 列表过滤 & 列表排序 )
1. 基本列表示例代码:<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>基本列表</title> <script type="text/javascript" src="../js/vue.js"></script></head><body> <!-- v-for指令(可以用原创 2021-09-13 17:20:47 · 255 阅读 · 0 评论 -
Vue -- 绑定样式(绑定class样式 & 绑定style样式)& 条件渲染(v-show 、v-if(可以配合template配合使用)、v-else-if、v-else)
1. 绑定样式示例代码:<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>绑定样式</title> <style> .basic { width: 400px; height: 100px; border: 1px solid black; } .happy { border: 4px solid原创 2021-09-13 15:24:37 · 770 阅读 · 0 评论 -
Vue -- 监视属性watch VS 计算属性computed & 箭头函数和普通函数的this指向问题
1. 监视属性watch VS 计算属性computed1.1 姓名案例: 计算属性实现示例代码:<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>姓名案例_计算属性实现</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js">&原创 2021-09-13 09:49:32 · 555 阅读 · 0 评论 -
Vue -- 监视属性
1. 监视属性1.1 天气案例代码:<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>天气案例</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script></head><body原创 2021-09-12 22:04:06 · 319 阅读 · 0 评论 -
Vue -- 姓名案例(插值语法实现 &方法实现 & 计算属性实现 & 计算属性简化)
1. 姓名案例需求分析:2. 插值语法实现示例代码;<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>姓名案例_插值语法实现</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script></he原创 2021-09-12 21:13:13 · 1304 阅读 · 0 评论 -
Vue 事件处理 -- 事件的基本使用 & 键盘事件
1. 事件的基本使用示例代码:<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>事件的基本使用</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script></head><body&g原创 2021-09-12 17:01:36 · 411 阅读 · 1 评论 -
Vue 事件处理 -- 事件修饰符(prevent、stop、capture、self、once)
1. 事件修饰符Vue中的事件修饰符:prevent:阻止默认事件(常用);stop:阻止事件冒泡(常用);once:事件只触发一次(常用);capture:使用事件的捕获模式;self:只有event.target是当前操作的元素时才触发事件;示例代码:<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>事件修饰符</title>原创 2021-09-12 16:14:43 · 16450 阅读 · 2 评论 -
Vue -- 关于函数调用时加不加括号的问题
1. 关于函数调用时加不加括号的问题1.1 函数不传参:1.1.1 调用时不加()如果函数不传参,推荐不加括号,示例:<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>事件的基本使用</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js原创 2021-09-12 15:09:19 · 2759 阅读 · 0 评论 -
Vue -- 数据代理(Object.defineproperty方法 & 什么是数据代理 & Vue中的数据代理)
1. Object.defineproperty方法示例代码:<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法</title></head><body> <script type="text/javascript"> // 让number和person的原创 2021-09-12 13:44:38 · 94 阅读 · 0 评论 -
Vue -- el 和 data 的两种写法 & MVVM模型
1. el 和 data 的两种写法示例:<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>el与data的两种写法</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script></head>原创 2021-09-12 10:40:36 · 205 阅读 · 0 评论 -
Vue -- 模板语法 & 数据绑定
1. 模板语法html 中包含了一些 JS 语法代码,语法分为两种,分别为:插值语法(双大括号表达式)指令(以 v-开头)1.1 插值语法(放在标签体里面)功能:用于解析标签体内容语法:{{xxx}} ,xxxx 会作为 js 表达式解析示例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equ原创 2021-09-12 09:58:32 · 284 阅读 · 0 评论 -
Vue -- 第一个Vue程序 & Vue工作原理 & 验证data数据改变影响页面数据 & 开发环境版本和生产环境版本
1. 第一个Vue程序示例代码:<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>初识Vue</title> <!-- 引入Vue 这样全局就多了一个Vue构造函数--> <script type="text/javascript" src="../js/vue.js"></script>原创 2021-09-12 01:10:08 · 341 阅读 · 1 评论 -
Vue -- 搭建Vue环境 & 安装Vue开发者工具
1. 搭建Vue环境1.1 引入VueVue官网VueDemo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,原创 2021-09-11 23:31:11 · 661 阅读 · 1 评论