2019 年 11月 22 日随笔档案 - Damocless

父子组件之间的通信

摘要：首先，组件需要向服务器请求数据，服务器将数据传递给外层最大的父级组件，因此父级组件需要将得到的值传递给下面的小组件，因此引入了父子间通信子组件不能引用父组件或者Vue实例的数据的；在开发中，往往需要将一些数据从上层传递给下层；进行父子组件之间信息传递（互传）的方式：1通过props向子组件传递信阅读全文

posted @ 2019-11-22 22:21 Damocless 阅读(495) 评论(0) 推荐(0)

组件的代码为什么必须是一个函数？

摘要： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><div id="app"><!-- 组件实例，没有共享同意个数据，因为他是阅读全文

posted @ 2019-11-22 21:13 Damocless 阅读(254) 评论(0) 推荐(0)

将组件中的数据进行动态绑定

摘要： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><div id="app"> <mycpn1></mycpn1> <mycpn1></my 阅读全文

posted @ 2019-11-22 20:47 Damocless 阅读(463) 评论(0) 推荐(0)

模板分离写法

摘要： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><div id="app"> <mycpn1></mycpn1> <mycpn1></my 阅读全文

posted @ 2019-11-22 20:34 Damocless 阅读(319) 评论(0) 推荐(0)

注册组件的语法糖

摘要： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><div id="app"> <mycpn1></mycpn1> <mycpn2></my 阅读全文

posted @ 2019-11-22 20:24 Damocless 阅读(270) 评论(0) 推荐(0)

父组件子组件

摘要： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><div id="app"> <mycpn1></mycpn1> <mycpn2></my 阅读全文

posted @ 2019-11-22 20:10 Damocless 阅读(140) 评论(0) 推荐(0)

组件化全局组件和局部组件

摘要：目标：将页面划分为几个功能块，然后进行组合，目的是实现更好的代码复用， Vue的组件化思想：独立，可复用。任何应用都会被抽象成为一个组件树；树形结构组件的使用分为是三个步骤 1创建组件构造器 Vue.extend({}) 2注册组件 Vue.conponent 3使用组件在Vue的实例范围之内阅读全文

posted @ 2019-11-22 19:54 Damocless 阅读(361) 评论(0) 推荐(0)

修饰符

摘要： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><div id="app"> <input 阅读全文

posted @ 2019-11-22 19:08 Damocless 阅读(262) 评论(0) 推荐(0)

值绑定

摘要： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app">  <select name="ab 阅读全文

posted @ 2019-11-22 18:52 Damocless 阅读(195) 评论(0) 推荐(0)

select 和v-model

摘要： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app">  <select name="ab 阅读全文

posted @ 2019-11-22 16:58 Damocless 阅读(1839) 评论(0) 推荐(0)

v-CheckBox

摘要： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app">  <label for="agree"></ 阅读全文

posted @ 2019-11-22 16:47 Damocless 阅读(981) 评论(0) 推荐(0)

v-radio

摘要： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <label for="man">男</label> <!--两个中有相同的变量阅读全文

posted @ 2019-11-22 16:25 Damocless 阅读(343) 评论(0) 推荐(0)

表单绑定 v-model

摘要： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"><!-- <input type="text" v-model="message" 阅读全文

posted @ 2019-11-22 16:11 Damocless 阅读(223) 评论(0) 推荐(0)

高阶函数 filter map reduce

摘要： const app=new Vue({ el:'#app', data:{ books:[{ id:1, name:"算法导论", data: '2006-1', price:39.00, count:1 },{ id:2, name:"算法导论", data: '2006-1', price:39 阅读全文

posted @ 2019-11-22 15:44 Damocless 阅读(175) 评论(0) 推荐(0)

小案例购物车

摘要： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css"></head><body><div id='app'> 阅读全文

posted @ 2019-11-22 14:42 Damocless 阅读(118) 评论(0) 推荐(0)

点击显示红色小案例 vue

摘要： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js" type="text/javascript"></script> <style type="t 阅读全文

posted @ 2019-11-22 13:31 Damocless 阅读(638) 评论(0) 推荐(0)

哪些数组的方法是响应式的？

摘要： <script> const app=new Vue({ el:'#app', data:{ message:"hello" , items:[ "haha", 'asda', 'asdfasd', 'asddddd'] }, methods:{ btnclick(){ // 1push方法,可以一阅读全文

posted @ 2019-11-22 09:24 Damocless 阅读(393) 评论(0) 推荐(0)

v-for

摘要： <body><div id="app">  <p v-if="false">{{message}}</p>  <p v-show="fal 阅读全文

posted @ 2019-11-22 09:03 Damocless 阅读(203) 评论(0) 推荐(0)

2019年11月22日

公告