![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
小青龙8085
这个作者很懒,什么都没留下…
展开
-
vue(作用于插槽--父组件替换插槽的标签,但是内容由子组件提供)
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <script src=...原创 2019-12-03 19:33:34 · 395 阅读 · 0 评论 -
vue(插槽slot的使用)
<template>里面的代码<template id="cpn"> <div> <h2>插槽的使用</h2> <slot name="left">左侧</slot> <slot name="middle">中间</slot> <slot name="right...原创 2019-12-03 19:02:12 · 797 阅读 · 0 评论 -
vue(子组件访问父组件,$root,$parent)
$root:访问根组件$parent:访问父组件运行结果实例代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> </st...原创 2019-12-03 12:08:24 · 564 阅读 · 0 评论 -
vue(访问子组件的方法或属性,$children,$refs)
$children:访问子组件。访问子组件的方法:this.$children[0].ontap(); 访问子组件的属性:this.$children[0].name$refs:访问某个特定的子组件,refs指向的是对象,默认值为空{},使用前必须在组件上面给ref赋值<cpn ref="aaa"></cpn>,使用this.$refs.aaa.name运...原创 2019-12-03 11:36:05 · 3223 阅读 · 0 评论 -
vue(子组件和父组件的双向邦定)
本案例先将父组件的data传到子组件,然后子组件通过input的数据双向绑定(当修改输入框内容时,子组件的数据也同步修改),然后再把子组件输入的值传给父组件( const qpp=vue({.....}))的data,同时第一个数据是第二个的100倍,第二个数据是第一个的一百分之一。运行结果示例代码<!DOCTYPE html><html>...原创 2019-12-02 20:34:19 · 105 阅读 · 0 评论 -
vue(子组件向父组件传递数据)
父子组件通信运行结果示例代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <...原创 2019-12-02 13:12:01 · 82 阅读 · 0 评论 -
vue(父子组件的通信--父组件向子组件通信,及props的驼峰标识)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <script src="./vue.js"...原创 2019-12-01 22:27:01 · 302 阅读 · 0 评论 -
vue(组件的data)
组件里面不能访问vue实例里面的数据。组件对象里面也有data和methods属性。1.组件data里面要这样写,而不是这样写如图,obj1,obj2,obj3调用函数abc(),而函数返回的是一个obj对象,此时变量obj1,obj2,obj3所指向的内存地址是相同的都是obj。换句话说修改obj1的name的时候,obj2,obj3的name也发生了同样的变化。若abc()函数...原创 2019-12-01 21:22:40 · 214 阅读 · 0 评论 -
vue(组件和模板templa分离的两种写法)
由于把html语言写在组件里面很不方便,也不太好看所以将它们分开写。运行结果代码:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> <...原创 2019-12-01 17:39:42 · 1432 阅读 · 0 评论 -
vue(全局组件和局部组件的语法糖)
vue(全局组件和局部组件的语法糖):主要是省去了调用Vue.extend()的步骤,并且可以直接使用一个对象代替运行结果下面是代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title>...原创 2019-12-01 17:25:15 · 218 阅读 · 0 评论 -
vue(父组件和子组件)
这是运行结果直接上代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <scrip...原创 2019-12-01 17:09:34 · 103 阅读 · 0 评论 -
vue(全局组件和局部组件)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <script src="./vue....原创 2019-11-28 20:46:21 · 130 阅读 · 0 评论 -
vue(v-model修饰符lazy,number,trim)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <script src="./vue.js"...原创 2019-11-28 18:48:25 · 315 阅读 · 1 评论 -
vue(v-model结合selete类型)
不知道为什么multiple不能实现多选<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <...原创 2019-11-26 11:45:42 · 103 阅读 · 0 评论 -
vue(v-model结合checkbox类型)
直接上效果图<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <script src=...原创 2019-11-26 11:23:34 · 130 阅读 · 0 评论 -
vue(v-model结合radio使用)
效果图输入前输入后<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> </style> <script ...原创 2019-11-26 11:07:47 · 403 阅读 · 0 评论 -
vue(高级函数:filter,map,reduce)
filterfilter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。注意:filter() 不会对空数组进行检测。注意:filter() 不会改变原始数组。语法array.filter(function(currentValue,index,arr), thisValue)详细网址:https://www.runoob.com/j...原创 2019-11-25 12:38:16 · 2524 阅读 · 0 评论 -
vue(购物车案例)
css代码<style> table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; } th ,td{ padding: 8px 16px; border: 1px solid #e9e9e9; text-a...原创 2019-11-25 10:46:19 · 172 阅读 · 0 评论 -
vue(class案例)
这是一个案例点击哪一个,哪一个就会变红<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .isActive{ color:red; }...原创 2019-11-24 19:55:23 · 90 阅读 · 0 评论 -
vue(v-if,lable)
<label> 标签为 input 元素定义标注(标记)。label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。这个保证点击“切换类型”之后输...原创 2019-11-23 17:35:07 · 1823 阅读 · 0 评论 -
vue(修饰符once,prevent,stop,监听键盘按键(keyup,keydown))
直接上代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </hea...原创 2019-11-23 14:55:47 · 2662 阅读 · 0 评论 -
vue(参数传递)
直接上代码,代码上有详细的注释这个是运行结果,分别点了按钮1-5<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js">...原创 2019-11-23 14:10:14 · 143 阅读 · 0 评论 -
vue(计算属性set和get)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .active{ color:red; } .line{ color:...原创 2019-11-20 17:38:17 · 505 阅读 · 1 评论 -
vue(v-cloak)
加了一个setTimeout事件,时间设置为10s,图一是未编译完之前,图二是编译完之后(10s之后)。v-cloak:在页面编译完之前样式是编译完之后是<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>&...原创 2019-11-19 11:43:52 · 78 阅读 · 0 评论 -
vue(v-pre)
v-pre会直接跳过编译显示标签里面的内容<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></scr...原创 2019-11-19 11:22:36 · 238 阅读 · 0 评论 -
vue之v-once
先上图也就是说加v-once的内容只会被渲染一次,不会随msg的变化而变化(v-model是input的双向绑定)。下面奉上代码。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title&g...原创 2019-11-18 20:52:27 · 110 阅读 · 0 评论 -
VUE(删除功能)
点击提交可增加li,点击li可删除当前li<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script...原创 2019-10-31 16:25:17 · 991 阅读 · 0 评论 -
VUE(自定义全局组件和局部组件)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head>...原创 2019-10-31 13:22:30 · 380 阅读 · 0 评论 -
VUE(todolist功能开发)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head&...原创 2019-10-31 12:35:25 · 175 阅读 · 0 评论 -
VUE(v-if,v-show,v-for)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head>...原创 2019-10-31 12:24:53 · 95 阅读 · 0 评论 -
VUE(计算属性,监听器)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head>...原创 2019-10-31 12:05:17 · 105 阅读 · 0 评论 -
VUE(v-bind: 属性绑定,v-model:双向数据绑定)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style> .active{ color:red; } .line{ color:bl...原创 2019-10-31 11:39:12 · 381 阅读 · 0 评论 -
VUE(v-text,v-html,v-on:click(@click)的使用)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head>...原创 2019-10-31 11:03:18 · 576 阅读 · 0 评论 -
vue(挂载点,模板,实例)
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> </head>...原创 2019-10-31 10:42:13 · 247 阅读 · 0 评论 -
hello world
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script src="./vue.js"></script> //导入vue </he...原创 2019-10-31 10:34:21 · 106 阅读 · 0 评论