VUE
关注
分享
扫一扫
chencaw
这个作者很懒，什么都没留下…
展开
-
27vue学习_ES模块化的导入和导出
ES模块化的导入和导出1index页面中//注意type='modle'//注意type='modle'<script src='aaa.js' type='modle'></script>2.aaa.js中导出export指令用于导出变量//aaa.js//方式1，命名时直接导出export let name ='chen';export let age = 22;export let height =1.82;//方式2，最后导出let原创 2021-02-08 07:16:03 · 360 阅读 · 0 评论 -
26vue学习_组件高级slot的使用（基本使用和具名插槽）
1、slot的基本使用（1）slot的使用，抽取共性，保留不同（2）slot可以设置默认值（3）如果有多个值放入slot中，会同时替换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <!-- 父组原创 2021-02-07 20:19:43 · 493 阅读 · 0 评论 -
25vue学习_子组件访问父组件$parent,$root
1子组件访问父组件,$parent使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <!-- 父组件模板 --> <div id ="app"> <cpn&g原创 2021-02-07 18:45:25 · 203 阅读 · 0 评论 -
24vue学习_父组件调用子组件$children,$refs
正常情况下都用$refs1父组件调用子组件$children<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <!-- 父组件模板 --> <div id ="app">原创 2021-02-07 14:43:21 · 395 阅读 · 0 评论 -
23vue学习_父组件和子组件双向绑定的经典例子
父组件和子组件双向绑定，子组件的中修改<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <!-- 父组件模板 --> <div id ="app"> <!-- 注原创 2021-02-07 09:56:06 · 133 阅读 · 0 评论 -
22vue学习_子组件通过自定义事件传递数据给父组件
1子组件通过自定义事件传递数据给父组件（1）子组件通过$emit发射自定义事件XXX（2）父组件响应该自定义事件v-on:XXX或者@XXX<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <!-- 父原创 2021-02-06 19:16:31 · 232 阅读 · 1 评论 -
21vue学习_父组件通过props传递数据给子组件
1、vue实例可以看成是一个父组件。原创 2021-02-06 18:28:07 · 152 阅读 · 0 评论 -
20vue学习_组件里的数据，以data函数的形式
1、组件里的数据以DATA函数的形式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <div id ="app"> <!-- 3.使用组件 --> <m原创 2021-02-06 10:08:51 · 134 阅读 · 0 评论 -
19vue学习_组件的模板分离写法
模板分离开来，看起来不乱1.模板分离写法1 ，script标签，类型必须是text/x-template2.模板分离写法2 ，推荐，使用template标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> .原创 2021-02-06 08:57:30 · 351 阅读 · 0 评论 -
18vue学习_语法糖写法的全局组件和局部组件
语法糖写法，直接注册和创建，通常都用这个方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <div id ="app"> <!-- 3.使用组件 --> &原创 2021-02-06 08:14:36 · 160 阅读 · 0 评论 -
17vue学习_最简单的父子组件
1、创建子组件 //1.创建第1个组件构造器对象（子组件） const cpnC1 = Vue.extend({ //... });2、创建父组件，并调用 //2.创建第2个组件构造器对象（父组件） const cpnC2 = Vue.extend({ //注意，使用了tab键上面的反斜杠``，因而可以换行定义 template: `原创 2021-02-06 06:55:15 · 189 阅读 · 0 评论 -
16vue学习_组件的使用（全局和局部）
1、构造组件2、注册组件3、使用组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <div id ="app"> <!-- 3.使用组件 --> &原创 2021-02-05 20:00:43 · 132 阅读 · 0 评论 -
15vue学习_经典练习3--v-model--注册表单提交
v-model数据绑定<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <div id = "app"> <form> <table border="0"> <tr> <td>原创 2021-02-05 19:12:32 · 346 阅读 · 0 评论 -
14vue学习_经典练习1--循环显示和2--购物车！！！
1、经典练习一、循环显示，判断索引，点击变色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title> <style> .active{ color:red; } </style></原创 2021-02-05 07:37:37 · 162 阅读 · 0 评论 -
13vue学习_v-if和v-show 修饰符的使用
1、使用原则v-if和v-show都可以决定一个元素是否渲染，开发中的原则如下：（1）v-if当条件为false时，压根不会有对应的元素在DOM中（2）v-show 当条件为false时，仅仅是将元素的display属性设为none而已。开发中如何选择呢？（1）当需要在显示与隐藏之间切片很频繁时，使用v-show（2）当只有一次切换时，通过使用v-if<!DOCTYPE html><html lang="en"><head> <me原创 2021-02-02 09:26:35 · 167 阅读 · 0 评论 -
12vue学习_v-if和v-else 修饰符的使用
1、v-if的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <div id ="app"> <h2 v-if = "isShow"> <div>.原创 2021-01-31 10:55:06 · 185 阅读 · 0 评论 -
11vue学习_v-on 修饰符的使用
1、相关的修饰符如下<!-- v-on的修饰符 --> <!-- 在某些情况下，拿event进行一些事件处理 --> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- 阻止默认行为 --> <button @click.prevent="doThis"></butto原创 2021-01-31 09:46:13 · 134 阅读 · 0 评论 -
10vue学习_v-on的使用，参数传递，修饰符
1、v-on的使用和语法糖<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <div id ="app"> <h2>当前计数:{{counter}}</h2>原创 2021-01-31 09:15:48 · 203 阅读 · 0 评论 -
9vue学习_对象字面量的增强写法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title> <style> </style></head><body> <script> const name = 'why'; .原创 2021-01-30 09:25:14 · 164 阅读 · 0 评论 -
8vue学习_let和const
1、 let和var的区别let有作用域var没有2、const的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title> <style> </style></head><body> <原创 2021-01-30 08:51:09 · 199 阅读 · 0 评论 -
7vue学习_computed方法的使用
1、主要代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title> <style> </style></head><body> <div id ="app"> <!--原创 2021-01-28 07:55:00 · 447 阅读 · 0 评论 -
6vue学习_v-bind绑定style
1、对style的绑定例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title> <style> </style></head><body> <div id ="app"> &l原创 2021-01-27 14:08:52 · 134 阅读 · 0 评论 -
5vue学习_动态绑定属性v-bind
1、对属性的动态绑定，如超链接，图像等众多地方<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <div id ="app"> <h2>{{message}}</h2&g原创 2021-01-27 12:03:43 · 181 阅读 · 0 评论 -
4vue学习_v-once和v-html和v-pre和v-cloak
1、如果不想要，交互式修改则，备注v-once<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <div id ="app"> <h2>{{message}}</h2&g原创 2021-01-27 09:30:40 · 132 阅读 · 0 评论 -
3vue学习_按钮响应例子计数
1、代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <div id ="app"> <h2>当前计数:{{counter}}</h2> &原创 2021-01-26 15:38:56 · 207 阅读 · 0 评论 -
2vue学习_列表循环显示
1、代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body> <div id ="app"> <ul> <!--注意v-for的用法-->原创 2021-01-26 15:03:20 · 238 阅读 · 0 评论