摘要: 我们使用组件一定是依托在某一个父组件的身上,比如我们上面写的study.vue文件就是依托在App.vue文件中,此时我们如果要使用App.vue文件中的值怎么办 vue提供了一个props的入口,也是父子组件之间唯一的传值方式,父组件通过v-bind自定义属性传入值,子组件通过props接受对应的 阅读全文
posted @ 2021-09-14 22:57 keyeking 阅读(538) 评论(0) 推荐(0) 编辑
摘要: 所有的vue组件都是以.vue格式结尾的文件。可以说,一个vue文件就是一个类。 我们看到的vue-cli中的App.vue文件就是整个vue的根组件。 1 <template> 2 <div id="app"> 3 {{a}} 4 </div> 5 </template> 6 <script> 7 阅读全文
posted @ 2021-09-14 21:21 keyeking 阅读(98) 评论(0) 推荐(0) 编辑
摘要: vue-cli vue-cli是vue的脚手架工具,帮我们快速生成了vue的起步项目,内置一些必备的比如打包工具,比如配置文件等等。 地址:https://cli.vuejs.org/zh/ 第一步全局安装 npm install -g @vue/cli 如何查看是否安装成功 vue --versi 阅读全文
posted @ 2021-09-14 16:55 keyeking 阅读(121) 评论(0) 推荐(1) 编辑
摘要: 表单修饰符一共有三个,分别是.lazy,.number,.trim,都是用来修饰v-model属性的。 .lazy修饰符 .lazy修饰符是将input输入框的数据绑定v-model从实时监听的状态变为change状态 <div id="app"> <input type="text" v-mode 阅读全文
posted @ 2021-09-13 22:06 keyeking 阅读(322) 评论(0) 推荐(0) 编辑
摘要: 鼠标按键修饰符修饰的是鼠标的左、滚轮、右键。 如果我们需要点击某个事件,但是我们可以需要使用鼠标右键 1 <div id="app"> 2 <p>{{a}}</p> 3 <button @click.right='add'>按我加1 </button> 4 </div> 5 <script src= 阅读全文
posted @ 2021-09-13 21:47 keyeking 阅读(128) 评论(0) 推荐(0) 编辑
摘要: 系统修饰符指的是通过一些指定的按键配合鼠标点击或者键盘事件进行事件监听。 比如.ctrl系统修饰符的使用 1 <div id="app"> 2 <p>{{a}}</p> 3 <button @click.ctrl='add'>按我加1 </button> 4 </div> 5 <script src 阅读全文
posted @ 2021-09-13 21:03 keyeking 阅读(110) 评论(0) 推荐(0) 编辑
摘要: 按键修饰符就是对键盘事件的修饰。 基本用法: 1 <div id="app"> 2 <p>{{a}}</p> 3 <input type="text" @keyup.space="add"> 4 </div> 5 <script src="./js/vue.js"></script> 6 <scri 阅读全文
posted @ 2021-09-13 20:42 keyeking 阅读(147) 评论(0) 推荐(0) 编辑
摘要: 修饰符是vue功能的拓展,是对vue事件或者系统操作等等进行功能的补充。 看下面的案例 1 <div id="app"> 2 <div class="outer" @click="outer"> 3 <div class="center" @click="center"> 4 <div class= 阅读全文
posted @ 2021-09-13 18:15 keyeking 阅读(124) 评论(0) 推荐(0) 编辑
摘要: v-model属性是使用在表单元素中的,作用是实现表单和数据的双向绑定 传统的表单 <div id="app" v-clock> <p> 姓名:<input type="text" :value="val"> {{val}} </p> </div> <script src = "js/vue.js" 阅读全文
posted @ 2021-09-13 11:25 keyeking 阅读(411) 评论(0) 推荐(0) 编辑
摘要: v-bind属性的作用是将普通的w3c属性变为动态属性,让属性具有动态能力。 使用v-bind实现轮播图 1 <div id="app" v-clock> 2 <div > 3 <img src="'images/'+url+'.jpg'" alt=""> 4 </div> 5 <button @c 阅读全文
posted @ 2021-09-13 10:39 keyeking 阅读(402) 评论(0) 推荐(0) 编辑