vue
关注
分享
扫一扫
文章平均质量分 57
vue学习笔记
韩顺平的小迷弟
这个作者很懒，什么都没留下…
展开
-
16_vue中非单文件组件
代码实践 基本使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>基本使用</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- Vue中使用组件的三大原创 2021-10-26 21:34:10 · 93 阅读 · 0 评论 -
15_vue的生命周期
1 生命周期流程图 2 生命周期分析 初始化显示 beforeCreate() created() beforeMount() mounted() 跟更新状态:this.xxx = value beforeUpdate() beforeUpdate() 销毁 vue 实例: vm.$destory() beforeDestory() destoryed() 3 常用的生命周期方法 mounted():发送 ajax 请求, 启动定时器等异步任务 beforeDestory():做收尾工作, 如: 清除原创 2021-10-26 21:15:08 · 98 阅读 · 0 评论 -
14_自定义指令
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>自定义指令</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 需求1：定义一个v-big指令，和v-te原创 2021-10-20 16:12:25 · 79 阅读 · 0 评论 -
13_内置指令
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>内置指令</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--原创 2021-10-20 15:36:31 · 91 阅读 · 0 评论 -
12_收集表单数据
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>收集表单数据</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 收集表单数据： 若：<in原创 2021-10-20 15:23:01 · 92 阅读 · 0 评论 -
12_列表渲染
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-10-20 15:16:09 · 85 阅读 · 0 评论 -
11_条件渲染
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>条件渲染</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 条件渲染： 1.v-if原创 2021-10-20 13:51:14 · 72 阅读 · 0 评论 -
09_监视属性
通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性 当属性变化时, 回调函数自动调用, 在函数内部进行计算 示例1：天气案列 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天气案例</title> <!-- 引入Vue --> <script type="text/javascript" src=.原创 2021-10-20 09:44:08 · 80 阅读 · 0 评论 -
08_计算属性
姓名案例_插值语法实现\ <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>姓名案例_插值语法实现</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <b.原创 2021-10-20 09:06:27 · 220 阅读 · 0 评论 -
07_事件处理
事件的基本使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件的基本使用</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> .原创 2021-10-20 08:56:16 · 96 阅读 · 0 评论 -
06_数据代理
回顾Object.defineProperty方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法</title> </head> <body> <script type="text/javascript" > let number = 18 .原创 2021-10-19 22:05:12 · 67 阅读 · 0 评论 -
05_MVVM模型
MVVM模型 M：模型(Model) ：对应 data 中的数据 V：视图(View) ：模板 VM：视图模型(ViewModel) ： Vue 实例对象 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>理解MVVM</title> <!-- 引入Vue --> <script type="text/jav.原创 2021-10-19 21:56:58 · 75 阅读 · 0 评论 -
04_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> <body> <原创 2021-10-19 21:49:28 · 62 阅读 · 0 评论 -
0_谷歌浏览器安装VueTool工具包
第一步 第二步 第三步 结果： veu_del_tools工具链接：https://pan.baidu.com/s/1c2yMOPgMsN8CAln8RQ4RoA 提取码：bm7p原创 2021-10-19 21:44:23 · 271 阅读 · 0 评论 -
03_数据绑定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>数据绑定</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--原创 2021-10-19 21:23:59 · 82 阅读 · 0 评论 -
02_vue模板语法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>模板语法</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--原创 2021-10-19 21:21:31 · 70 阅读 · 0 评论 -
01初始Vue
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>初识Vue</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!--原创 2021-10-18 22:07:09 · 100 阅读 · 0 评论