摘要：
<body> <div id="app"> <cpn></cpn> </div> <template id="cpn"> <div> <ccpn></ccpn> <h3>我是子组件</h3> <button @click="btnClick">按钮</button> </div> </templat 阅读全文
posted @ 2020-12-29 18:22
闭上耳朵
阅读(95)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <cpn></cpn> <cpn></cpn> <cpn ref="aaa"></cpn> <button @click="btnClick">点击</button> </div> <template id="cpn"> <div> <h3>我是子组件</ 阅读全文
posted @ 2020-12-29 18:19
闭上耳朵
阅读(75)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <!-- 2.监听子组件发射的事件 然后再父组件处理事件 --> <cpn @itemclick="cpnClick"></cpn> </div> <template id="cpn"> <div> <button v-for="item in categ 阅读全文
posted @ 2020-12-29 18:06
闭上耳朵
阅读(94)
评论(0)
推荐(0)
摘要：
<body> <!-- 父组件模板 --> <div id="app"> <!-- 如果属性名有 大写 要换小写 并用 - 隔开 如下 --> <cpn :cinfo="info" :child-my-message="message"></cpn> </div> <!-- 子组件模板 --> <t 阅读全文
posted @ 2020-12-29 18:00
闭上耳朵
阅读(135)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <!-- 组件的变量名不能有大写 会报错 --> <cpn :cmessage="message" :clis="lis"></cpn> </div> <template id="cpn"> <div> <p> {{ cmessage }} </p> <u 阅读全文
posted @ 2020-12-29 16:19
闭上耳朵
阅读(1498)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <cpn1></cpn1> </div> <template id="cpn1"> <div> <!-- <h2> {{ title }} </h2> 组件内部不能访问 Vue实例对象里面的数据的 如果要动态绑定数据 要在注册组件内部调用里面的 data数 阅读全文
posted @ 2020-12-29 16:16
闭上耳朵
阅读(130)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <cpn1></cpn1> <cpn2></cpn2> </div> </body> <!-- 方法 1 --> <!-- 组件和模板分离写法 写在script标签里面 类型是 x-template --> <script type="x-template 阅读全文
posted @ 2020-12-29 16:14
闭上耳朵
阅读(89)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <cpn1></cpn1> <cpn2></cpn2> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script> <script> // 组件的语法 阅读全文
posted @ 2020-12-29 16:11
闭上耳朵
阅读(133)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <cpn2></cpn2> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script> <script> const cpnC1 = Vue.exte 阅读全文
posted @ 2020-12-29 16:01
闭上耳朵
阅读(144)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <cpn></cpn> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script> <script> const cpnC = Vue.extend( 阅读全文
posted @ 2020-12-29 15:45
闭上耳朵
阅读(105)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <!-- 3.使用组件 --> <my-cpn></my-cpn> </div> <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script> <script> // 阅读全文
posted @ 2020-12-29 15:43
闭上耳朵
阅读(101)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <cpn></cpn> <cpn> <template v-slot="slot"> <span> {{ slot.data.join("-") }} </span> <!-- 拿到slot插槽里面的data 也就是pLanguages数组 把这个数组用分 阅读全文
posted @ 2020-12-29 15:42
闭上耳朵
阅读(142)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <!-- 编译作用域就是 如果父组件模板 和 子组件模板 同时有 v-show指令 父组件模板只会找VUE实例里面的数据 子组件模板只会找子组件里面的数据 --> <cpn v-show="isShow"></cpn> </div> <template i 阅读全文
posted @ 2020-12-29 15:40
闭上耳朵
阅读(168)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <cpn> <span slot="center">标题</span> </cpn> <cpn> <button slot="left">下一步</button> </cpn> </div> <template id="cpn"> <div> <!-- 如 阅读全文
posted @ 2020-12-29 15:39
闭上耳朵
阅读(111)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <cpn> </cpn> <cpn> <b style="color: red;"> 火星情报局 </b> </cpn> <cpn> <em style="font-size: 12px;"> 我是斜体 </em> </cpn> </div> <templ 阅读全文
posted @ 2020-12-29 15:38
闭上耳朵
阅读(389)
评论(0)
推荐(0)
摘要：
<body> <script> // 1.属性的增强写法 const name = "蔡依林"; const age = "17"; const height = "162"; // ES5的增强写法 const obj = { name: name, age: age, height: heigh 阅读全文
posted @ 2020-12-29 15:36
闭上耳朵
阅读(102)
评论(0)
推荐(0)
摘要：
<body> <button>第1个按钮</button> <button>第2个按钮</button> <button>第3个按钮</button> <button>第4个按钮</button> <button>第5个按钮</button> <script> // 在ES5之前 var没有块级作用 阅读全文
posted @ 2020-12-29 15:35
闭上耳朵
阅读(85)
评论(0)
推荐(0)
摘要：
// 导入：import { flag, sum } from "./a.js"; import { flag, sum } from "./ES6的导出方式.js"; if (flag) { console.log("小明是天才"); console.log(sum(99, 1) + '明明调用S 阅读全文
posted @ 2020-12-29 15:33
闭上耳朵
阅读(401)
评论(0)
推荐(0)
摘要：
<body> <!-- 模块化导入 import{导入的变量名或者函数名}、 导出 export{导出的变量名或者函数名} from "./a.js" 如下--> <!-- 导出：export { flag, sum, uname } --> <!-- // 导入：import { flag, su 阅读全文
posted @ 2020-12-29 15:32
闭上耳朵
阅读(87)
评论(0)
推荐(0)
摘要：
let uname = 'lala'; let age = 17; let flag = true; function sum(num1, num2) { return num1 + num2; } if (flag) { console.log(sum(20, 30)); } // 导出方式1 e 阅读全文
posted @ 2020-12-29 15:31
闭上耳朵
阅读(396)
评论(0)
推荐(0)
摘要：
<script> let arr = [10, 20, 30, 40, 50, 60]; // 要求找出小于40的元素*2再让这个数组的每个元素相加 // 链式写法： let newArr = arr.filter(function(n) { return n < 40; }).map(functi 阅读全文
posted @ 2020-12-29 12:21
闭上耳朵
阅读(452)
评论(0)
推荐(0)
摘要：
<script> // 编程范式： 命令式编程 / 声明式编程 // 编程范式： 面向对象编程（第一公民：对象） / 函数式编程（第一公民：函数） // filter / map / reduce // filter中的回调函数有一个要求：必须返回一个布尔值 // true: 当返回true时 函数 阅读全文
posted @ 2020-12-29 11:53
闭上耳朵
阅读(105)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <ul> <button @click="add">添加</button> <li v-for="i in list"> {{ i }} </li> </ul> </div> <script src='https://cdn.jsdelivr.net/np 阅读全文
posted @ 2020-12-29 11:52
闭上耳朵
阅读(91)
评论(0)
推荐(0)
摘要：
<style> * { margin: 0; padding: 0; } #app { width: 800px; height: 500px; margin: 50px auto; border: 1px solid #000; text-align: center; } nav { font-w 阅读全文
posted @ 2020-12-29 11:51
闭上耳朵
阅读(96)
评论(0)
推荐(0)
摘要：
<style> .changeList { color: red; } </style> <body> <div id="app"> <h1> {{ fullName }} </h1> <h2> {{ fullNameT }} </h2> <h2> {{ fullNameT }} </h2> <h2 阅读全文
posted @ 2020-12-29 11:50
闭上耳朵
阅读(115)
评论(0)
推荐(0)
摘要：
<body> <div id="app"> <h1> {{ message + ' ' + add + ' ' + sub }} </h1> <!-- 这样写太繁琐了 不方便阅读 --> <h1> {{ getMessage() }} </h1> <!-- 方法1 调用方法 --> <h1> {{ 阅读全文
posted @ 2020-12-29 11:49
闭上耳朵
阅读(228)
评论(0)
推荐(0)
摘要：
<style> * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: Scroll; overflow-y: hidden } li { list-style: none; } #mask { display: f 阅读全文
posted @ 2020-12-29 11:47
闭上耳朵
阅读(82)
评论(0)
推荐(0)
浙公网安备 33010602011771号