Vue全家桶之Vue基础

最新推荐文章于 2024-03-06 09:18:48 发布

CV工程师呀

最新推荐文章于 2024-03-06 09:18:48 发布

阅读量200

点赞数

本文链接：https://blog.csdn.net/qq_44954571/article/details/108628837

版权

1. Vue模板语法

1.1v-cloak指令用法

1.插值表达式存在的问题：“闪动”
2.如何解决该问题：使用v-cloak指令
3.解决该问题的原理：先隐藏，替换好值之后再显示最终的值

示例：

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

1.2数据绑定指令

1.2_1v-text 填充纯文本

示例：

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

1.2_2v-html 填充HTML片段

① 存在安全问题
② 本网站内部数据可以使用，来自第三方的数据不可以用
示例：

<div v-html="html"></div>

1.2_3v-pre 填充原始信息

① 显示原始信息，跳过编译过程（分析编译过程）
示例：

<span v-pre>{{ this will not be compiled }}</span>

1.3 数据响应式

1.3_1v-once 只编译一次

① 显示内容之后不再具有响应式功能
②只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

1.3_2v-model指令用法

双向数据绑定

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

在这里插入图片描述

1.4 事件绑定

1.4_1v-on指令用法

一般写法

<input type=‘button' v-on:click='num++'/>

简写

<input type=‘button' @click='num++'/>

1.4_2 事件函数的调用方式

直接绑定函数名称

<button v-on:click='say'>Hello</button>

调用函数

<button v-on:click='say()'>Say hi</button>

1.4_3事件函数参数传递

<button v-on:click='say("hi",$event)'>Say hi</button>

这里的 $e v e n t 是固定写法，如果没有参数传递，那么默认第一个参数是$ event，没有写$event也是。

1.4_4事件修饰符

stop 阻止冒泡

<a v-on:click.stop="handle">跳转</a>

prevent 阻止默认行为

<a v-on:click.prevent="handle">跳转</a>

1.4_5按键修饰符

enter 回车键

<input v-on:keyup.enter='submit'>

esc 退出键

<input v-on:keyup.delete='handle'>

1.4_6 自定义按键修饰符

全局 config.keyCodes 对象

Vue.config.keyCodes.f1 = 112

1.5属性绑定

v-bind指令用法

<a v-bind:href='url'>跳转</a>

缩写形式

<a :href='url'>跳转</a>

1.6 样式绑定

class样式处理

对象语法

<div v-bind:class="{ active: isActive }"></div>

数组语法

<div v-bind:class="[activeClass, errorClass]"></div>

style样式处理

对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

1.7 分支循环结构

1.7_1 分支结构

v-if
v-else
v-else-if
v-show

1.7_2v-if与v-show的区别

v-if控制元素是否渲染到页面
v-show控制元素是否显示（已经渲染到了页面）

1.7_3 循环结构

v-for遍历数组

<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>

（没写也没事，就是降低效率）key的作用：帮助Vue区分不同的元素，从而提高性能

<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>

v-for遍历对象

<div v-for='(value, key, index) in object'></div>

v-if和v-for结合使用

<div v-if='value==12' v-for='(value, key, index) in object'></div>

1.8表单域修饰符

number：转化为数值
trim：去掉开始和结尾的空格
lazy : 将input事件切换为change事件，input事件是及时操作的，而change事件是鼠标失去失去焦点才启动，所以change事件比input事件慢，因而叫lazy

<input v-model.number="age" type="number">

1.9自定义指令

1.9_1 自定义指令的语法规则（获取元素焦点）

Vue.directive('focus' {
	inserted: function(el) {
	// 获取元素的焦点
	el.focus();
	}
})

1.9_2 自定义指令用法

<input type="text" v-focus>

1.9_3 带参数的自定义指令（改变元素背景色）

Vue.directive(‘color', {
	inserted: function(el, binding) {
	el.style.backgroundColor = binding.value.color;
	}
})

1.9_4 指令的用法

<input type="text" v-color='{color:"orange"}'>

1.9_5局部指令

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-color='msg'>
    <input type="text" v-focus>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      自定义指令-局部指令
    */
    var vm = new Vue({
      el: '#app',
      data: {
        msg: {
          color: 'red'
        }
      },
      methods: {
        handle: function(){
          
        }
      },
      directives: {
        color: {
          bind: function(el, binding){
            el.style.backgroundColor = binding.value.color;
          }
        },
        focus: {
          inserted: function(el) {
            el.focus();
          }
        }
      }
    });
  </script>
</body>
</html>

1.10计算属性

computed: {
	reversedMessage: function () {
	return this.msg.split('').reverse().join('')
	}
}

计算属性与方法的区别
计算属性是基于它们的依赖进行缓存的
方法不存在缓存

1.11侦听器

watch: {
	firstName: function(val){
		// val表示变化之后的值
		this.fullName = val + this.lastName;
	},
	lastName: function(val) {
	this.fullName = this.firstName + val;
	} 
}

1.12生命周期

① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
② created 在实例创建完成后被立即调用。
③ beforeMount 在挂载开始之前被调用。
④ mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
⑤ beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。
⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
⑦ beforeDestroy 实例销毁之前调用。
⑧ destroyed 实例销毁后调用。

1.13数组相关API(响应式）

变异方法(修改原有数据)
push()
pop()
shift()
unshift()
splice()，从第几个开始删，删几个
sort()
reverse()
替换数组(生成新的数组)
filter()
concat()
slice()
修改响应式数据
⚫ Vue.set(vm.items, indexOfItem, newValue)
⚫ vm.$set(vm.items, indexOfItem, newValue)
① 参数一表示要处理的数组名称
② 参数二表示要处理的数组的索引
③ 参数三表示要处理的数组的值