vue基础笔记()-vue

发表于： 11月 30, 2022 11月 30, 2022
分类：建站
标签： vue

vue基础笔记()

1 Vue简介

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

无需构建步骤，渐进式增强静态的 HTML
在任何页面中作为 Web Components 嵌入
单页应用 (SPA)
全栈 / 服务端渲染 (SSR)
Jamstack / 静态站点生成 (SSG)
开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

1-1、Vue的特点

采用组件化模式，提高代码复用性，让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM进行

1-2、模板语法

Vue模板语法有两大类：

插值语法
功能：用于解析标签体中的内容
写法：{{xxx}} ，xxx是代表js表达式或vue中定义的data中的所有属性
示例：

{{ foo }}
指令语法
功能：用于解析标签（包括：标签属性，标签体内容，绑定事件…）
举例：v-bind:href=”xxx” 或简写为 :href=”xxx”，xxx同样要写js表达式，
且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-????，此处我们只是拿v-bind举个例子。

数据绑定

Vue中有2种数据绑定的方式：

单向绑定(v-bind)：数据只能从data流向页面。
双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

双向绑定一般都应用在表单类元素上（如：input、select等）
v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

Object.defineProperty的使用

Object.defineProperty 这个方法接收三个参数:

属性所在的对象，即一个对象
属性的名字，对象中的属性名字，可以是这个对象中没有声明的
一个描述符对象，描述所传属性名可以进行那些操作

<script>
  let person = {
    name: '张山',
    sex:'男'
	}
	//动态设置person对象中的age属性
  Object.defineProperty(person,'age',{
    
    //value属性是基本属性，用来设置代理对象指定参数的值，这里就是person.age的值
    value:13, 
    
    //enumerable属性是基本属性，用来控制指定属性是否可以被枚举，即是否可以被遍历，默认是false，不可以枚举，。这里指person对象中的age属性是否可以被遍历
    enumerable: true, 
   
    //writable属性是基本属性，默认值为false，指指定属性是否可以被修改。这里指person对象中的age属性是否可以直接修改
    writable: true, 
    
    //configurable属性是基本属性，默认值为false，指指定属性是否可以被删除。这里指person对象中的age属性是否可以被删除
    configurable: true 

    get(){//代表获取指定属性时会调用此方法，这里指在获取person.age的值时，会调用此方法
    	return 13;
  	},

    set(val){//代表设置指定属性时会调用此方法，这里指在设置person.age的值时，会调用此方法

    }

  });

</script>

事件处理

在vue中，使用v-on进行绑定事件，如点击事件，v-on:click=“函数方法名” 或 @click=“”

事件的基本使用：

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数！否则this就不是vm实例了；
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象；
@click=”demo” 和 @click=”demo($event)” 效果一致，但后者可以传参；$event是当前DOM实例

事件修饰符的使用

事件修饰符有以下几种

.prevent ：阻止默认事件，即阻止原标签事件（常用）
.stop ：阻止事件冒泡（常用）
.once ：事件只发生一次（常用）
.capture ：使用事件的捕获模式
.self ：只有even.target是当前操作的元素时才触发事件
.passive ：事件的默认行为立即执行，无需等待事件回调完毕

示例：

<!-- 事件只触发一次（常用） -->
<button @click.once="showInfo">点我提示信息</button>

键盘事件

Vue中常用的按键别名：

回车 => enter

删除 => delete (捕获“删除”和“退格”键)

退出 => esc

空格 => space

换行 => tab (特殊，必须配合keydown去使用)

上 => up

下 => down

左 => left

右 => right

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
系统修饰键（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2).配合keydown使用：正常触发事件。

.也可以使用keyCode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

示例：

<!-- 自定义按键 -->
<input type="text" placeholder="按下回车提示输入" @keydown.anjian="showInfo">

<!-- 使用已有的别名按键 -->
<input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">

<script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  Vue.config.keyCodes.anjian = 13 //定义了一个别名按键

  new Vue({
    el:'#root',
    data:{
      name:'123'
    },
    methods: {
      showInfo(e){
        // console.log(e.key,e.keyCode)
        console.log(e.target.value)
      }
    },
  })
</script>

监听器（侦听器）

监听器适用于监听vue中属性变化时，同时还要发生其他一些事情时使用，使用关键字为：watch:{ }

watch的级别与data的级别一致，具体实例如下：

export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  
  watch:{
    //监听message属性的值，发生变化则进行调用，此方式为简写形式
    message(newVal,oldVal){
      
    },
    //原方式
    message:{
      deep: true // 开启深度监视
    	immediate:true //是否立即执行，即页面渲染时就会执行,默认false
    	handler(newValue,oldValue){
  			//具体执行的逻辑
			}
  	}
  }
}

计算属性

计算属性可以用于需要多个其他数据组合而成得到的数据可以使用计算属性，并且使用计算属性时，所依赖的数据变化是会重新进行计算。

关键字：computed : {} 级别与data的级别一致

示例：

<script>
export default {
  data() {
    return {
      newTodo: '',
      hideCompleted: false,
      todos: [
        { id: id++, text: 'Learn HTML', done: true },
        { id: id++, text: 'Learn JavaScript', done: true },
        { id: id++, text: 'Learn Vue', done: false }
      ]
    }
  },
	//计算属性
  computed: {
    //计算newTodos的值，简写形式
    newTodos(){
      //return的值会作为newTodos的值，相当于在data中有一个newTodos属性，且当todos中的数据变化时，会重新进行计算
      return hideCompleted ? this.todos : this.todos.filter((t)=> t.done) 
    },
    //原始方式
    newTodos9:{
      //获取newTodos9的值会自动调用此方式
      get(){
        return this.todo
      },
      //设置属性时使用，一般不适用，使用时需要对应修改newTodos9所依赖的属性的值，否者获取到的newTodos9值还是以前的
      set(){
    
  		}
      
    }
  },
  methods: {
    addTodo() {
      this.todos.push({ id: id++, text: this.newTodo, done: false })
      this.newTodo = ''
    },
    removeTodo(todo) {
      this.todos = this.todos.filter((t) => t !== todo)
    }
  }
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in newTodos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
  <button @click="hideCompleted = !hideCompleted">
    {{ hideCompleted ? 'Show all' : 'Hide completed' }}
  </button>
</template>

<style>
  .done {
    text-decoration: line-through;
  }
</style>

条件渲染

在页面中很多时候是根据某些值进行判断一些操作或样式进行动态显示或隐藏，vue提供两种方式进行判断：

v-if

写法：

(1).v-if=”表达式”

(2).v-else-if=”表达式”

(3).v-else=”表达式”

适用于：切换频率较低的场景。

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

v-show

写法：v-show=”表达式”

适用于：切换频率较高的场景。

特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

绑定样式

绑定样式：

class样式

写法:class=”xxx” xxx可以是字符串、对象、数组。

字符串写法适用于：类名不确定，要动态获取。

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

style样式

:style=”{fontSize: xxx}”其中xxx是动态值。

:style=”[a,b]”其中a、b是样式对象。

列表渲染

v-for指令:

1.用于展示列表数据

2.语法：v-for=”(item, index) in xxx” :key=”yyy”

3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

Vue监视数据的原理：

vue会监视data中所有层次的数据。
如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要监测的数据。

(1).对象中后追加的属性，Vue默认不做响应式处理

(2).如需给后添加的属性做响应式，请使用如下API：

Vue.set(target，propertyName/index，value) 或

vm.$set(target，propertyName/index，value)

如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板，进而更新页面。

在Vue修改数组中的某个元素一定要用如下方法：

1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象添加属性！！！

收集表单数据

收集表单数据：

若：，则v-model收集的是value值，用户输入的就是value值。

<input type="text"/>

若：，则v-model收集的是value值，且要给标签配置value值。

<input type="radio"/>

若：

<input type="checkbox"/>

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.配置input的value属性:

(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

(2)v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入字符串转为有效的数字

trim：输入首尾空格过滤
示例：

账号：<input type="text" v-model.trim="userInfo.account">
密码：<input type="password" v-model="userInfo.password">
年龄：<input type="number" v-model.number="userInfo.age">

内置指令

v-bind : 单向绑定解析表达式, 可简写为 :xxx

v-model : 双向数据绑定

v-for : 遍历数组/对象/字符串

v-on : 绑定事件监听, 可简写为@

v-if : 条件渲染（动态控制节点是否存存在）

v-else : 条件渲染（动态控制节点是否存存在）

v-show : 条件渲染 (动态控制节点是否展示)

v-text指令：

1.作用：向其所在的节点中渲染文本内容。

2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

v-html指令：

1.作用：向指定节点中渲染包含html结构的内容。

2.与插值语法的区别：

(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。

(2).v-html可以识别html结构。

3.严重注意：v-html有安全性问题！！！！

(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。

(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！

v-cloak指令（没有值）：

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
示例：

<h2 v-cloak>{{name}}</h2>//作用：当name有值的时候进行显示

v-once指令：

1.v-once所在节点在初次动态渲染后，就视为静态内容了。

2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

示例

<h2 v-once>初始化的n值是:{{n}}</h2>//页面只会在初次加载时渲染一次，n值改变不会再次渲染

v-pre指令：

1.跳过其所在节点的编译过程，即对应的元素标签。

2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

示例：

<h2 v-pre>Vue其实很简单</h2>

vue的生命周期钩子

常用的生命周期钩子：

1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。

2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息。

2.销毁后自定义事件会失效，但原生DOM事件依然有效。

3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。

vm的整体生命周期：

将要创建 ===> 调用beforeCreate()函数
创建完毕 ===> 调用created()函数，一个实例只会调用一次
将要挂载 ===> 调用beforeMount()函数
挂载完毕 ===> 调用mounted()函数，【重要的钩子】
数据将要更新 ===> 调用beforeUpdate()函数
.数据更新完毕 ===> 调用updated()函数
将要销毁 ===> 调用beforeDestroy()函数【重要的钩子】
销毁完毕 ===> 调用destroyed()函数

————————