2020年10月_麻瓜呀

原创 Vue: 组件插槽

组件插槽组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力匿名插槽 <div id="app">  <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box> <alert-box></ale

2020-10-24 18:42:41 162

原创 Vue:组件之间传值

Vue组件之间传值父组件向子组件传值父组件发送的形式是以属性的形式绑定值到子组件身上。然后子组件用属性props接收在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制 <div id="app"> <div>{{pmsg}}</div>  <!-- 给子组件传入一个静

2020-10-23 20:15:59 175

原创 Vue: 局部注册

局部注册只能在当前注册它的vue实例中使用 <div id="app"> <my-component></my-component> </div><script> // 定义组件的模板 var Child = { template: '<div>A custom component!</div>' } new Vue({ //局部注册组件

2020-10-22 18:17:24 90

原创 Vue: 全局注册

全局注册Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象全局组件注册后，任何vue实例都可以用组件基础用<div id="example">  <my-component></my-component></div><script> // 注册组件 // 1、

2020-10-21 18:31:07 351

原创 Vue: 图书列表案例

图书列表案例静态列表效果基于数据实现模板效果处理每行的操作按钮1、提供的静态数据数据存放在vue 中 data 属性中 var vm = new Vue({ el: '#app', data: { books: [{ id: 1, name: '三国演义', date: '' },{ id: 2, name: '水浒传',

2020-10-18 18:30:03 615

原创 Vue: 替换数组

替换数组不会改变原始数组，但总是返回一个新数组filterfilter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。concatconcat() 方法用于连接两个或多个数组。该方法不会改变现有的数组sliceslice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组...

2020-10-16 18:16:27 826

数组变异方法在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展push()往数组最后面添加一个元素，成功返回当前数组的长度pop()删除数组的最后一个元素，成功返回删除元素的值shift()删除数组的第一个元素，成功返回删除元素的值unshift()往数组最前面添加一个元素，成功返回当前数组的长度splice()有三

2020-10-15 18:22:16 318

原创 Vue:替换数组

替换数组不会改变原始数组，但总是返回一个新数组filterfilter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。concatconcat() 方法用于连接两个或多个数组。该方法不会改变现有的数组sliceslice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组...

2020-10-14 12:57:53 1863

原创 Vue:数组变异方法

数组变异方法在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展push()往数组最后面添加一个元素，成功返回当前数组的长度pop()删除数组的最后一个元素，成功返回删除元素的值shift()删除数组的第一个元素，成功返回删除元素的值unshift()往数组最前面添加一个元素，成功返回当前数组的长度splice()有三

2020-10-13 17:59:56 160 1

原创 Vue:生命周期

生命周期事物从出生到死亡的过程Vue实例从创建到销毁的过程，这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数####常用的钩子函数beforeCreate在实例初始化之后，数据观测和事件配置之前被调用此时data 和 methods 以及页面的DOM结构都没有初始化什么都做不了created在实例创建完成后被立即调用此时data 和 methods已经可以使用但是页面还没有渲染出来beforeMount在挂载开始之前被调用此时页面

2020-10-12 18:12:37 59

原创 Vue: 过滤器

过滤器Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示支持级联操作过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本全局注册时是filter，没有s的。而局部过滤器是filters，是有s的 <div id="app"> <input type="text" v-model='msg'>

2020-10-10 18:35:02 82

原创 Vue: watch

侦听器 watch使用watch来响应数据的变化一般用于异步或者开销较大的操作watch 中的属性一定是data 中已经存在的数据当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听 <div id="app"> <div> <span>名：</span> <span

2020-10-09 18:06:32 56

原创 Vue:计算属性 computed

计算属性 computed模板中放入太多的逻辑会让模板过重且难以维护使用计算属性可以让模板更加的简洁计算属性是基于它们的响应式依赖进行缓存的computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化 <div id="app"> <!-- 当多次调用 reverseString 的时候只要里面的 num 值不改变他会把第一次计算的结果直接

2020-10-07 15:59:55 161

原创 Vue:自定义指令

自定义指令内置指令不能满足我们特殊的需求Vue允许我们自定义指令Vue.directive 注册全局指令<input type="text" v-focus><script>// 注意点： // 1、在自定义指令中如果以驼峰命名的方式定义如 Vue.directive('focusA',functio

2020-10-06 19:01:16 177

原创 2020-10-05

表单修饰符.number 转换为数值注意点：当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。.trim 自动过滤用户输入的首尾空白字符只能去掉首尾的不能去除中间的空格.lazy 将input事件切换成change事件.lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上在失去焦点或者按下回车键时才更

2020-10-05 11:33:15 185

原创 Vue:表单基本操作

表单基本操作获取单选框中的值通过v-model  <input type="radio" id="male" val

2020-10-04 20:28:41 229

原创 Vue：循环结构

循环结构v-for用于循环的数组里面的值可以是对象，也可以是普通元素<ul id="example-1">  <li v-for="item in items"> {{ item.message }} </li> </ul><script> new Vue

2020-10-03 16:03:27 232

原创 Vue:分支结构

分支结构v-if 使用场景1- 多个元素通过条件判断展示或者隐藏某个元素。或者多个元素2- 进行两个视图之间的切换<div id="app">  <span v-if="flag"> 如果flag为true则显示,false不显示! </span></div><script> va

2020-10-02 18:18:58 1093

原创 Vue:v-once

v-once执行一次性的插值【当数据改变时，插值处的内容不会继续更新】  <span v-once>{{ msg}}</span> <script> new Vue({ el: '#app', data: { msg: 'Hello Vu

2020-10-01 22:28:09 156

qq_41421033的博客