摘要：
<body> <div id="app"> <cpn></cpn> </div> <template id="cpn"> <div> <ccpn></ccpn> <h3>我是子组件</h3> <button @click="btnClick">按钮</button> </div> </templat 阅读全文
摘要：
<body> <div id="app"> <cpn></cpn> <cpn></cpn> <cpn ref="aaa"></cpn> <button @click="btnClick">点击</button> </div> <template id="cpn"> <div> <h3>我是子组件</ 阅读全文
摘要：
<body> <div id="app"> <!-- 2.监听子组件发射的事件 然后再父组件处理事件 --> <cpn @itemclick="cpnClick"></cpn> </div> <template id="cpn"> <div> <button v-for="item in categ 阅读全文
摘要：
<body> <!-- 父组件模板 --> <div id="app"> <!-- 如果属性名有 大写 要换小写 并用 - 隔开 如下 --> <cpn :cinfo="info" :child-my-message="message"></cpn> </div> <!-- 子组件模板 --> <t 阅读全文
摘要：
<body> <div id="app"> <!-- 组件的变量名不能有大写 会报错 --> <cpn :cmessage="message" :clis="lis"></cpn> </div> <template id="cpn"> <div> <p> {{ cmessage }} </p> <u 阅读全文
摘要：
<body> <div id="app"> <cpn1></cpn1> </div> <template id="cpn1"> <div> <!-- <h2> {{ title }} </h2> 组件内部不能访问 Vue实例对象里面的数据的 如果要动态绑定数据 要在注册组件内部调用里面的 data数 阅读全文
摘要：
<body> <div id="app"> <cpn1></cpn1> <cpn2></cpn2> </div> </body> <!-- 方法 1 --> <!-- 组件和模板分离写法 写在script标签里面 类型是 x-template --> <script type="x-template 阅读全文
摘要：
<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> // 组件的语法 阅读全文
摘要：
<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 阅读全文
摘要：
<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( 阅读全文
摘要：
<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> // 阅读全文
摘要：
<body> <div id="app"> <cpn></cpn> <cpn> <template v-slot="slot"> <span> {{ slot.data.join("-") }} </span> <!-- 拿到slot插槽里面的data 也就是pLanguages数组 把这个数组用分 阅读全文
摘要：
<body> <div id="app"> <!-- 编译作用域就是 如果父组件模板 和 子组件模板 同时有 v-show指令 父组件模板只会找VUE实例里面的数据 子组件模板只会找子组件里面的数据 --> <cpn v-show="isShow"></cpn> </div> <template i 阅读全文
摘要：
<body> <div id="app"> <cpn> <span slot="center">标题</span> </cpn> <cpn> <button slot="left">下一步</button> </cpn> </div> <template id="cpn"> <div> <!-- 如 阅读全文
摘要：
<body> <div id="app"> <cpn> </cpn> <cpn> <b style="color: red;"> 火星情报局 </b> </cpn> <cpn> <em style="font-size: 12px;"> 我是斜体 </em> </cpn> </div> <templ 阅读全文
摘要：
<body> <script> // 1.属性的增强写法 const name = "蔡依林"; const age = "17"; const height = "162"; // ES5的增强写法 const obj = { name: name, age: age, height: heigh 阅读全文
摘要：
<body> <button>第1个按钮</button> <button>第2个按钮</button> <button>第3个按钮</button> <button>第4个按钮</button> <button>第5个按钮</button> <script> // 在ES5之前 var没有块级作用 阅读全文
摘要：
// 导入：import { flag, sum } from "./a.js"; import { flag, sum } from "./ES6的导出方式.js"; if (flag) { console.log("小明是天才"); console.log(sum(99, 1) + '明明调用S 阅读全文
摘要：
<body> <!-- 模块化导入 import{导入的变量名或者函数名}、 导出 export{导出的变量名或者函数名} from "./a.js" 如下--> <!-- 导出：export { flag, sum, uname } --> <!-- // 导入：import { flag, su 阅读全文
摘要：
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 阅读全文