文章分类 - Vue
摘要：有时候我们希望子组件的内容由父组件决定如何展示，这个时候子组件的数据父组件并不能访问到，而作用域插槽的关键之处就在于，父组件能接收来自子组件的slot传递过来的参数。 <div id="app"> <cpn></cpn> <cpn> <!--目的是获取子组件的数据并且按照父组件想要的形式展示-->
阅读全文
摘要：为了让我们的组件更加具有扩展性，可以使用插槽 <div id="app"> <cpn> <span>返回</span> <input type="text" placeholder="搜索"> <span>...</span> </cpn> </div> <template id="cpn"> <d
阅读全文
摘要：<div id="app"> <cpn $ref="item"></cpn> <cpn></cpn> <cpn></cpn> <button @click="btnClick">按钮</button> </div> <template> <div>我是子组件</div> </template> </
阅读全文
摘要：1 <div id="app"> 2 <cpn :number1="num1" 3 :number2="num2" 4 @num1change="numchange1" 5 @num2change="numchange2" 6 > 7 8 </cpn> 9 </div> 10 11 12 <temp
阅读全文
摘要：props用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中。我们应该如何处理呢？这个时候，我们需要使用自定义事件来完成。什么时候需要自定义事件呢？当子组件需要向父组件传递数据时，就要用到自定义事件了。我们之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的
阅读全文
摘要：在组件中，使用选项props来声明需要从父级接收到的数据。props的值有两种方式：方式一：字符串数组，数组中的字符串就是传递时的名称。方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。 1 <div id="app"> 2 <!--<cnp :cinfo="info" :childMyM
阅读全文
摘要：1 <input type="text" v-model="message"> 2 等同于 3 <input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 <cpn :number1="num
阅读全文
摘要：1 <html> 2 <body> 3 <div id="app"> 4 <ul> 5 <li v-for="item in letters">{{item}}</li> 6 </ul> 7 <button @click="btnClick">按钮</button> 8 </div> 9 </bod
阅读全文
摘要：1 <html> 2 <body> 3 <div id="app"> 4 <span v-if='isUser'> 5 <label for="username">用户账号</label> 6 <input type="text" id="username" placeholder="用户账号">
阅读全文
摘要：1 <html> 2 <body> 3 <button>按钮1</button> 4 <button>按钮2</button> 5 <button>按钮3</button> 6 <button>按钮4</button> 7 </body> 8 <script> 9 //1.变量作用域：变量在什么范围
阅读全文
