随笔分类 - vue学习
摘要：$attrs属性 $attrs包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs
阅读全文
摘要：computed计算属性的作用是对数据的计算和缓存，优点是能够提高性能 基本使用 1 <template> 2 <div> 3 <p>{{reverseStr}}</p> 4 5 </div> 6 </template> 7 <script> 8 export default { 9 data(){
阅读全文
摘要：在vue中，使用watch来响应数据的变化 下面我们看一个案例 1 <template> 2 <div> 3 <p>{{num}}</p> 4 <button @click="add">加一</button> 5 </div> 6 </template> 7 8 <script> 9 export
阅读全文
摘要：我们使用组件一定是依托在某一个父组件的身上，比如我们上面写的study.vue文件就是依托在App.vue文件中，此时我们如果要使用App.vue文件中的值怎么办 vue提供了一个props的入口，也是父子组件之间唯一的传值方式，父组件通过v-bind自定义属性传入值，子组件通过props接受对应的
阅读全文
摘要：所有的vue组件都是以.vue格式结尾的文件。可以说，一个vue文件就是一个类。 我们看到的vue-cli中的App.vue文件就是整个vue的根组件。 1 <template> 2 <div id="app"> 3 {{a}} 4 </div> 5 </template> 6 <script> 7
阅读全文
摘要：vue-cli vue-cli是vue的脚手架工具，帮我们快速生成了vue的起步项目，内置一些必备的比如打包工具，比如配置文件等等。 地址：https://cli.vuejs.org/zh/ 第一步全局安装 npm install -g @vue/cli 如何查看是否安装成功 vue --versi
阅读全文
摘要：表单修饰符一共有三个，分别是.lazy，.number，.trim，都是用来修饰v-model属性的。 .lazy修饰符 .lazy修饰符是将input输入框的数据绑定v-model从实时监听的状态变为change状态 <div id="app"> <input type="text" v-mode
阅读全文
摘要：鼠标按键修饰符修饰的是鼠标的左、滚轮、右键。 如果我们需要点击某个事件，但是我们可以需要使用鼠标右键 1 <div id="app"> 2 <p>{{a}}</p> 3 <button @click.right='add'>按我加1 </button> 4 </div> 5 <script src=
阅读全文
摘要：系统修饰符指的是通过一些指定的按键配合鼠标点击或者键盘事件进行事件监听。 比如.ctrl系统修饰符的使用 1 <div id="app"> 2 <p>{{a}}</p> 3 <button @click.ctrl='add'>按我加1 </button> 4 </div> 5 <script src
阅读全文
摘要：按键修饰符就是对键盘事件的修饰。 基本用法： 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
阅读全文
摘要：修饰符是vue功能的拓展，是对vue事件或者系统操作等等进行功能的补充。 看下面的案例 1 <div id="app"> 2 <div class="outer" @click="outer"> 3 <div class="center" @click="center"> 4 <div class=
阅读全文
摘要：v-model属性是使用在表单元素中的，作用是实现表单和数据的双向绑定 传统的表单 <div id="app" v-clock> <p> 姓名：<input type="text" ：value="val"> {{val}} </p> </div> <script src = "js/vue.js"
阅读全文
摘要：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
阅读全文
摘要：v-on的作用是给元素添加事件监听，可以简写为@ JavaScript的元素的事件监听都可以再vue中使用 原生的JavaScript的事件监听: 事件名称 方法 点击 onclick 双击 ondblclick 鼠标移上 onmouseenter 鼠标离开 onmouseleave 鼠标滑过 on
阅读全文
摘要：v-pre属性的作用是跳过该元素编译过程，直接显示元素内部的文本，特点就是跳过大量的没有指令的节点。 1 <div id="app" > 2 <h2 v-pre>{{a}}</h2> 3 </div> 4 <script src = "js/vue.js"></script> 5 <script>
阅读全文
摘要：v-once的作用是只会渲染对应元素一次，数据更新不会引起视图的更新，目的是为了优化页面的性能。 1 <div id="app" v-clock> 2 <h2 v-once>{{a}}</h2> 3 <button @click="add">按我加1</button> 4 <button @clic
阅读全文
摘要：v-cloak指令的作用是vue实例渲染后关联结束； 双大括号插值语法在遇到网络延迟的时候会显示编译之前的文本。 1 <div id="app"> 2 {{a}} 3 </div> 4 <script src="./js/vue.js"></script> 5 <script> 6 var vue
阅读全文
摘要：v-html和v-text都是渲染文本的指令，使用场景有不同 现在接触了三种渲染方法 双大括号插值：{{}} v-text v-html 1 <div id="app"> 2 <p> {{a}} </p> 3 <p v-text="a"> </p> 4 <p v-text="a"></p> 5 <p
阅读全文
摘要：v-for是vue 的循环指令，作用是遍历数组（对象）的每一个值。 基本使用： 1 <div id="app"> 2 <ul> 3 <li v-for="item in arr"> 4 {{item}} 5 </li> 6 </ul> 7 </div> 8 <script src = "js/vue
阅读全文
摘要：vue指令的作用是通过带有v-的特殊属性，实现对dom的响应式加载。 v-if v-if的作用是通过一个布尔表达式进行对dom的上树和下树的渲染。 1 <div id="app"> 2 <p v-if="true">我是第一行dom元素</p> 3 <p v-if="false">我是第二行dom元
阅读全文
浙公网安备 33010602011771号