Vue指令及基础知识

发表于 : | 更新于 : | 分类于 : | 评论 : | 阅读次数 :

VUE

  • 数据驱动:操作DOM
  • JS的数据类型 基本 和 引用
  • 改变原数组 —> 数组的变异 pop push shif unshift reverse sort splice(n,m,x,y,z)
  • 不改变原数组 —> slice(n,m) concat indexOf join(‘+’) toString()
  • 数组的迭代方法
    • forEach
    • map:renturn什么值，就往新数组添加新属性，若没有return值，就添加undefined
    • filter
      • 1)filter的回调函数中return值，若是true，则把当前迭代的项复制一份到新数组arr中
      • 2)filter的返回值是新数组arr
    • some:
      • 1)回调函数中只要有一个回调函数返回的是true，则整个some 返回值就是ture
      • 2)只要某个项满足条件，就不在进行迭代
    • every:
      • 1)回调函数，每一个都是true，every的返回值才是true
      • 2)换句话说就是只要有一个是false ，整个结果就是false
    • reduce((prev,next)=>):结果就是最后一次迭代的return值
    • find: 找到满足条件的第一项
    • includes(item,index)从index索引值开始查找 找到就是true 找不到就是false

NODE基础命令

  • package.json 是项目的依赖表单
  • dependencies:存储的都是生产环境的依赖
  • devdependencies:储存的都是开发环境的依赖
  • scripts:中存储的都是要执行的命令对应的代码
  • npm run hello : 对应的要执行hello对应的代码
  • npm i vue –save:在项目中添加依赖，安装依赖
  • npm i yarn -g : 全局安装yarn，以后可以使用yarn代替npm 去安装一些依赖

VUE - M-V-VM

  • 1.vue 双向数据绑定 ；渐进式；框架
  • 2.视图 V 数据 M VM
  • 3.视图改变 数据自动更新
  • 4.数据更新 视图自动更改
  • 5.渐进式: SPA 单页面开发
    • 核心:vue.js
    • vue-router控制路由
    • vuex 处理数据
    • axios 解决请求

MVC 和 MVVM

声明式

  • 编程式 forEach
  • 声明式 for() 编程式

框架

  • 框架:自己写的代码被框架调用 Vue React Angular BootStrap
  • 库: 自己调用库的代码

Vue的指令

  • 1.v-model: 是vue的指令 name是实例的变量 指令是指让对应的元素做某件事
  • 2.v-text : 展示对应的文本
  • 3.v-once : 对应的标签只渲染一次 1~3指令都是行内属性
  • 4.v-html : 把值中的标签渲染出来
  • 5.v-cloak : 解决渲染闪烁问题
    [v-cloak] {display: none;} 
<div v-cloak>{{ message }}</div>
  • 6.v-show : 控制元素的display:ngone 属性
  • 7.v-on:click : 给元素绑定事件 简写 @click = 'fn'
  • 8.v-keyup.enter = ‘fn’ : 给元素绑定键盘事件
  • 9.v-bind:绑定样式 对象 路径 缩写: :
  • 10.v-for : 循环显示元素的,可以循环数组，也可以循环对象、字符串、数字 ，v-for优先级比v-if/else的优先级高，先渲染v-for
  • 11.v-if / v-else-if /v-else :直接不加载元素,先做循环再做判断

    v-model指令

  • 实现 数据和视图 双向绑定 <input>、<textarea> 及 <select>等表单元素和components组件
  • 单个复选框，绑定到布尔值： 
1
<label for="checkbox">{{ checked }}</label>
  • CheckBox 多个复选框,绑定到同一个数组：check = []
    CSS
    HTML
    JS
  • check 若为 [] 一个数组 则3个input框能联系在一起,选择input框，则会在数组中push表单框中的value值
1
2
3
4
5
radio 单选框
	<!-- 多个input绑定同一个变量即可 -->
	<input type="radio" v-model="fruit" value="1"/>🍎
	<input type="radio" v-model="fruit" value="2"/>🍌
	<input type="radio" v-model="fruit" value="3"/>🍊

v-model实现数据双向绑定的原理

get方法

  • 获取数据，当属性依赖于其他data中属性时，其他数据改变，才会触发这个方法，但必不会触发set方法
  • 最终值是由get方法决定的
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var obj = {};
    Object.defineProperty(obj,'name',{
    	get(){return 123},
        set(val){
            console.log(val)
        }
    })
    obj.name = 333;
    console.log(obj.name)

set方法

  • 使用v-model:进行数据的双向绑定 只有点击改变值的时候，才会触发这个方法，触发这个方法必然触发了get方法
  • get与set的区别

修饰符

事件修饰符

  • self: 只有点击元素本身的时候才触发
  • stop:阻止冒泡
  • prevent:阻止默认事件
  • once: 对应的函数只触发一次
  • capture: 让事件在捕获阶段触发
  • passive : 优先执行默认事件，在执行绑定的函数，优化移动端性能，只对滚动行为有效

    v-model修饰符

  • number : 将字符串转化为数字 类似 parsefloat的效果
  • trim : 自动去除首尾空格

自定义全局键码

Vue.config.keyCodes.f2 = 113 => 在模板中可以这样使用 `@keyup.f2 = fn’’`·

过滤器

1
{{money | changeM}}
  • 管道符前边是要处理的数据，后边是处理的参数，最终展示的是函数的返回值
  • 过滤器是可以连续使用的，下一个过滤器的返回值，是上一个过滤器的返回值
  • 全局过滤器和私有过滤器，全局过滤器任何组件都可以调用，私有过滤器只有定义过滤器的组件可以调用
  • filter 中的方法 可以重名，不会被冲掉，但尽可能不要重名
    1
    2
    3
    4
    5
    6
    Vue.filter('过滤器名称'，function(){}) 全局过滤器
    	console.log(this) //=> this 指向window
    在vm实例中定义
    filters:{
    	'过滤器名称':functon(){}
    } 私有过滤器

侦听器 Watch

  • 异步用监听,但是比较耗性能，能够深层监听，能够返回oldV 和 newV 两个值供实例调用
  • 深层监听的属性必须是有set和get方法的属性值
  • 当监听一个数组的时候，若数组地址不发生改变，那么不会触发watch的方法
  • Watch还可以监听到路由的变化
  • 具有局限性，当监听的数据过多时，不适合使用watch方法

计算属性 Computed

  • 同步用计算属性，但依赖性太强，用到get/set方法
  • 定义的方法，挂载在vm的实例，不能跟methods和data重名，但是现在不报错，但是不能用，因为methods中的方法会把computed中的方法冲掉
  • 只要name不发生改变，name2就不发生改变
  • name2用到谁，就依赖谁

  • conputed计算属性，具有缓存机制，若数据发生改变，会重新计算属性，若只是重复调用，则不会触发computed方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    computed:{
    	name2(){
    		return this.name.split('').rerverse().join('')
    	},
    	name3(){
    		get(){
    			console.log(this.name)
    			return 123
    		},
    		set(val){
    			// 给name3赋值的时候会触发, set函数
    			// val 是外界
    		}
    	}
    }

  • computed / watch / methods 三者的区别

    • computed : 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当做属性来使用
    • watch : 一个对象，键是需要观察的表达式，值是对应的回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是methods和computed的结合体
    • methods : 表示一个具体的操作，主要书写业务逻辑

      自定义全局指令

  • 使用directive定义全局的指令
  • 其中参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加 -v 前缀
  • 但是在调用的时候，必须在指令名称前加上 v- 前缀 进行调用
  • 参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Vue.directive('focus',{
	bind:function(el){  =>每当指令绑定到元素身上的时候，会立即执行这个bind函数，只执行一次
		//1.注意：在每个函数中，第一个参数永远是el，表示被绑定的那个元素，这个el参数以一个原生JS对象
		//2.在元素刚绑定指令的时候，还没有插入到DOM中，这时候，调用focus方法没有起作用
		//3.因为，一个元素只有插入到DOM中，才能获取焦点
		//el.focus()
	},
	inserted:function(el){  =>表示元素被插入到DOM中的时候，触发这个inserted函数，触发一次
		el.focus()
	},
	updated:function(el){  =>每当VNode更新的时候，会执行updated函数，可能会被触发多次 
		
	}  
})
  • 自定义指令简写:
    Vue.directive('focus',function(el,binding){}) 钩子函数
  • 钩子函数的参数:
    • 指令钩子函数会被传入以下实参
    • 1.el : 指令所绑定的元素，可以用来直接操作 DOM
    • 2.binding:
      • name: 指令名，不包括 v- 前缀;
      • value:指令的绑定值，例如：v-my-directive=”1 + 1” 中，绑定值为 2;
      • expression:字符串形式的指令表达式。例如 v-my-directive=”1 + 1” 中，表达式为 "1 + 1"
-------------本文结束感谢您的阅读-------------