Vue学习总结(更新中)

原创

已于 2022-03-14 11:25:55 修改 · 置顶 · 3.4k 阅读

标签

#vue #js #javascript #vue.js #前端

于 2020-05-19 11:23:39 首次发布

前端小白简单总结，参考黑马珠峰等课程以及其他内容整合，还望各位大佬多多指教~

Vue基础

零、Vue前置知识：es6部分内容

参见ES6部分内容（Vue前置内容）

一、Vue初识

vue数据驱动（主要操作的是数据）
js、jQuery都是操作dom，导致页面重复渲染

框架和库

框架：vue 拥有完整的解决方案，我们写好人家调用我
库：jquery underscore zepto animate.css 我们调用他

1、Vue简介

`因为Object.defineProperty(es5)的没有替代方案，所以不支持ie8以下版本`

Vue.js(读音 /vju:/，类似于view) 是一套构建用户界面的渐进式（渐近增强）框架，它只关注视图层。

声明式渲染（无需关心如何实现）
组件系统
客户端路由（vue-router）
集中式状态管理（vuex）
项目构建（vue-cli）

2、优点：

易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
灵活：在一个库和一套完整框架之间自如伸缩
高效：20kB运行大小，超快虚拟DOM

3、主要开发思想

组件化开发：
把页面拆分成多个组件，ui页面映射为组件树，每个组件依赖的模板（html） css、js等资源放在一起开发、维护和测试
响应的数据变化（数据驱动视图）：
当数据发生改变时 -> 视图随之发生改变

4、Vue基本使用

1） Vue使用的基本步骤

1> 需要提供标签用于填充数据

2> 引入vue.js库文件

3> 可以使用vue的语法做功能了

4> 把vue提供的数据填充到标签里面

2） Hello World实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>

<body>
    <div id="app">
        <div>{
  
  {msg}}</div>
        <div>{
  
  {1+1}}</div>
        <div>{
  
  {msg+'-----'+123}}</div>
    </div>
    <script src="js/vue.js"></script>
    <script>
    // 引入vue会给你一个Vue构造函数
        var vm = new Vue({
    
     // vm = viewModel
            el: '#app', // 告诉vue能管理哪个部分，querySelector
            data: {
    
     // data中的数据会被vm所代理
                msg: 'Hello World' // 可以通过vm.msg取到对应的内容
            }
        }) // Object.defineProperty
    </script>
</body>

</html>

1、实例参数分析：

el：元素挂载位置(值可以是CSS选择器或者DOM元素)

data：模型数据(值是一个对象)

2、差值表达式用法：

-#### 将数据填充到HTML标签中
-#### 差值表达式支持基本的计算操作

5、Vue代码运行原理分析

概述编译过程的概念(Vue语法—>原生语法)

在这里插入图片描述

5、Vue环境搭建（Vue-cli脚手架）

参见：Vue环境搭建（Vue-cli脚手架）

二、Vue的模板语法

1、前端渲染

1）定义：把数据填充到HTML标签中

在这里插入图片描述

2）前端渲染方式

原生js拼接字符串
使用前端模板引擎
使用vue特有的模板语法

3）模板语法概览：

差值表达式
指令
事件绑定
属性绑定
样式绑定
分支循环结构

2、差值表达式（moustache 小胡子语法）

将数据填充到HTML标签中
差值表达式支持表达式、赋值、三元运算等

	<div>{
  
  { msg }}</div>
	<div>{
  
  { 1+1 }}</div>
	<div>{
  
  { msg+'-----'+123 }}</div>

3、指令（dom元素的行间属性）

1）定义：

本质就是自定义属性
指令的格式：Vue中都是以v-开头的

vue的指令directive只是dom上的行间属性，vue给这类属性赋予
一定的意义，来实现特殊的功能，所有指令都以v-开头，value属
性默认情况下，vue会忽略掉 selected checked都没有意义

2）v-cloak指令

v-cloak：防止页面加载时出现闪烁问题；

“闪动”产生原因：Vue解析差值表达式是先将差值表达式显示在页面中，然后迅速替换为对应的内容；

原理：先通过样式隐藏内容，然后在内存中进行值的替换,替换好之后再显示最终的结果；

3）数据绑定指令

v-text：填充纯文本(单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值)。

特点：相比差值表达式更加简洁，没有“闪动”问题

v-html：填充HTMl片段

1、存在安全问题

2、本网站内部数据可以使用，来自第三方的数据不可以用

3、重复渲染，影响性能

v-pre：填充原始信息

1、显示原始信息，跳过编译过程

4）数据响应式

1> 如何理解数据响应式

1、html5中的响应式：屏幕尺寸变化导致样式的变化

2、数据的响应式：数据的变化导致页面内容的变化

2> 数据绑定：将数据填充到标签中

3> v-once：只编译一次，

1、显示内容之后不再具有响应式功能

2、应用场景：如果显示的信息后续不需要再修改，这样可以提高性能

5）自定义指令：directive：用来操作dom

	<button v-color="flag">变色</button>
	<div v-drag></div>
	<script>
		let vm = new Vue({
    
    
			directives: {
    
    
				color(el, bindings){
    
     // el指代的是当前操作的dom，当前是指button按钮
					el.style.background = bindings.value
				},
				drag(el){
    
    
					el.onmousedown = function(e){
    
    
						var disx = e.pageX - el.offsetLeft;
						var disy = e.pageY - el.offsetTop;
						document.onmousemove = function(e){
    
    
							el.style.left = e.pageX - disx + 'px';
							el.style.top = e.pageY - disy + 'px';	
						}
						document.onmouseup = function(){
    
    
							document.onmousemove = document.onmouse = null
						}
						e.preventDefault();
					}	
				}	
			}
		})
	</script>

4、双向数据绑定

1）数据变化会导致显示发生变化

2）修改页面内容导致数据发生变化

在这里插入图片描述

vue会循环data中的数据（数据劫持），依次的增加getter和setter
使用变量时，先要初始化，否则新加的属性不会导致页面刷新
给对象添加响应式的数据变化有三种方法：
1> 变量初始化
2> 使用setter添加属性：vm.$set(vm.a, ‘school’, 1) // 此方法可以给对象添加响应式的数据变化
3> 替换原对象：vm.a = {school: ‘1’}

要想改变数组的某一项(重点)

data: {
arr: [1, 2, 3, 4, 5]
}
错误：
vm.arr[0] = 100; // 去改变数组中的某一项是监控不到的
vm.arr.length -=2; // 也不能使用改变数组长度的方法

只能使用变异方法：
pop push shift unshift sort reverse splice
或filter map

vm.arr = vm.arr.map(item=>item*=3);

v-model（底层是事件绑定）

// v-model会将msg的值赋予输入框，输入框的值改变了会影响数据
<input type="text" v-model="uname" />

数据双向绑定的简单原理实现：(Object.defineProperty)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="input">
<script src="node_modules/vue/dist/vue.js"></script>
<script>
  let obj = {
    
    };
  // Object.defineProperty(obj, 'name', {
    
    
  //   configurable: false, // 是否可配置(删除)
  //   writable: false, // 是否可重新赋值
  //   enumerable: false, // 是否可枚举
  //   value: 1
  // })
  // delete obj.name
  // obj.name = 1000
  // for(key in obj){
    
    
  //   console.log(key)
  // }
  Object.defineProperty(obj, 'name', {
    
    
    get(){
    
     // 取obj的name属性会触发
      return temp['name']
    },
    set(val){
    
    // 给obj赋值会触发set方法
      console.log(val);
      // obj.name = val; // 会反复调用set,造成死循环
      temp['name'] = val; // 改变temp的结果
      input.value = val; // 将值赋予输入框
    }
  });
  input.value = obj.