Vue基础

LSY-Web-programmer

已于 2023-07-18 20:28:52 修改

阅读量92

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-18 20:23:41 首次发布

本文链接：https://blog.csdn.net/m0_46631458/article/details/131794349

版权

1、vue的特点

1.三大前端框架

目前前端有两个非常流行的框架，非别是reactjs,vuejs。而这三个当中，vuejs的受欢迎度目前是最高的，而开发vuejs的就是一个中国人尤雨溪。

1.2 vue的优势

Vue致力解决的问题与React一致，但却提供了另外一套解决方案。Vue使用模板系统而不是JSX，使其对现有应用的升级更加容易
Vue的开发者尤雨溪是中国人，框架本身提供了大量丰富的中文文档，这也为Vue的发展和使用带来巨大的优势。
Vue框架适合于需要快速上手、上线的应用，还适用于迁移传统的多单面应用。

2、vue的下载和使用

2.1直接用<script>引入

2.2 使用CDN

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

什么是MVVM（前后端分离）

M：model 模式存储数据

V：view 显示内容（html）

VM viewModel视图模块连接视图与modelcompon模型（

）

当model数据发生变化.时候通过VM可以监听变化更新视图

当view视图发变化时候通过VM可以监听变化自动更新model数据

3.1 vue的模版

<div id="app">
  <button @click="change">改变数据</button>
  <!-- {{}}里是js的表达式 -->
  <h1>{{msg - 8}}</h1>
</div>

3.2 vue的实例化

// jquery是以DOM做为驱动
// Vue是以数据做为驱动

let vm = new Vue({
  // 挂载点
  el: "#app",
  data: {
    //只有注册在data当中的数据才是响应式数据，数据改变，会触发视图的重新渲染
    msg: 'hello world'
  },
  // 方法
  methods: {
    change(){
      // this等价于vm这个vue的根实例
      this.msg = 'hahaha';
    }
  }
})

4.插值语法

数据

let vm = new Vue({
	data: {
    msg： "hello"
  }
})

模版

<h1>{{msg}}</h1>   
<h1>{{msg - 8}}</h1>

5.vue指令

指令的属性值为js表达式

5.1 v-html

可以解析html标签

<h1 v-html="msg"></h1>
<h1 v-html="msg + 'world'"></h1>

5.2 v-text

不能解析html标签

<h1 v-text="msg"></h1>

5.3 v-bind

绑定动态属性

<h1 title="msg">1111</h1>
<h1 v-bind:title="msg">2222</h1>
<h1 :title="msg">2222</h1>

5.4 v-on

5.4.1 事件绑定

js 数据

var vm = new Vue({
    el: '#app',
    data: {
        isShow: false,
        msg: '1111'
    },
    methods: {
        //没有参数的绑定
        show(){
            this.isShow = true;
        },
        //有参数的绑定
        change(newVal){
            this.msg = newVal;
        },

        //获取事件对象
        get(e){
            console.log(e);
        },
        //获取事件对象
        get(newVal,e){
            this.msg = newVal.isShow;
            console.log(e);
        }
    }
});

模版

<p v-on:click="show">显示</p>
<p @click="show">显示</p>
<p @click="change('hello')">改变msg</p>
<p class="box" @touchmove="get">改变msg</p>
<p class="box" @click="get('hello',$event)">改变msg</p>

5.4.2 事件绑定的修饰符

v-on:keyup.enter.13 按键修饰符
v-on:click.stop 阻止冒泡
v-on:click.prevent 阻止浏览器默认行为

5.5 v-if v-else-if v-else

条件渲染指令

v-if:如果表达式为真，则渲染该元素，如果为假，则不渲染（dom不存在）

v-if和v-else之间不能有其它内容

<p v-if="count > 80">红色</p>
<p v-else-if="count > 60">蓝色</p>
<p v-else>绿色</p>

5.6 v-show

条件渲染指令

如果表达式为真，则显示该元素，如果为假，则隐藏该元素（dom存在）

<p v-show="0">红色</p>

v-if与v-show的区别

都可以隐藏节点
v-show通过css方式隐藏
v-if 直接移除dom节点
频繁切换显示与隐藏用v-show反之用v-if

5.7 v-for

列表渲染指令

new Vue({
   data: {
     arr: ['Amy', 'Rose', 'Black'],
     person: {
       name: 'Rose',
       age: 34,
       class: 'H5'
     }
  }
})

5.7.1 遍历数组

<li v-for="item in arr">{{item}}</li>
<li v-for="item of arr">{{item}}</li> -->
<li v-for="(item,index) in arr">{{item}}----{{index}}</li>

5.7.2 遍历对象

<li v-for="item in person">{{item}}</li> -->
<li v-for="(item,key) in person">{{key}}-----{{item}}</li>
<li v-for="(item,key,index) in person">{{index}}----{{key}}-----{{item}}</li>

在vue-for循环中为什么要绑定key值

key为了让vue虚拟dom节点查找与更新更加优化（优化dom的渲染）

vdom 优化diff算法：

v-for为什么要加key,因为兄弟节点之间要求key必须保持唯一性，key可以提高diff算法，
提高列表在排序或者是筛选时的渲染速度

5.8 v-model

双向数据绑定

js数据

new Vue({
  data: {
    tel: '123'
  }
})

Vue2 响应式原理，（双向绑定的原理）

通过订阅与发布者模式结合

通过Object.defineProperty劫持对象的getter与setter

观察者来连接视图与数据

当数据发生变化时候通知说要订阅该数据的订阅者更新

模版

Vue3响应式原理

ES6新增的 proxy代理实现的

vue3 与Vue2的区别

响应式原理不同：Object.defineProperty和Proxy

启动方式不同

vue2
new Vue({
    store,
    router,
    render:h=>h(App)
}).$mount("#app")

// vue3
createApp(App).use(store).use(router).mount("#app")

// vue2
Vue.prototype.$http = axios;
// vue3
app.config.globalProperties.$http = axios;

Vue3 增加了setup 组合式api

<p>请输入手机号：<input type="text" v-model="tel"></p>
<p>{{tel}}</p>

5.9 v-once

只渲染一次

<span v-once>This will never change: {{msg}}</span>

什么是生命周期？
生命周期就是vue实例从创建到销毁的全过程，也就是 new Vue() 开始就是vue生命周期的开始。Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom-->渲染、更新-->渲染、卸载等一系列过程，称这是Vue的生命周期

生命周期的钩子函数：

钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。

beforeCreate( ){ } 实例创建前

因为此时vue实例还没有创建，那么就无法访问到 data 中的数据，并且 dom 视图也没有更新，所有的结构都停留在原始的状态

create( ){ } 实例创建后

这里是，最早能够调用 data 数据和 methods 方法的周期函数，此时，data 数据和 methods 方法已经可以调用，但是 dom 视图并没有更新

beforeMount( ){ } 实例挂载前

在当前生命周期中，页面呈现的是原始 dom 结构，但是此时虚拟 dom 已经创建完成，在 mounted 生命周期，会覆盖所有的 dom 所有的dom操作，均不奏效

mounted( ){ } 实例挂载后

在此周期之前的所有的dom操作，都不凑效，在这里可以做 dom 操作，并且所有的dom操作都能够展现出视图的变化

beforeUpdata( ){ } 实例（试图）更新前

在数据更新的时候触发；此时 data 数据是最新的，但是并没有更新到视图上，就是数据视图内容不同步

updated( ){ } 实例（试图）更新后

数据更新后，此时数据是最新的，视图也是最新的，实现了数据和视图内容双同步

beforeDestroy( ){ } 实际销毁前

实例销毁前，在这里是最后一次，能够访问的到 data 的数据和 methods 方法的生命周期

destroyed( ){ } 实例销毁后

实例销毁后，当触发了这个声明变量的时候，代表者，当前的vue实例已经被销毁的，所有的 data 数据和 methods 方法，都不能用了

组件传参：

父传子在父组件中通过属性的方式向子组件传参子组件中通过props接收参数

子传父在子组件中通过$emit调用父组件的自定义事件在父组件的自定义事件中通过$event接收参数

非父子关系：

ref获取引用

依赖注入：provide inject

vuex

vue2（选项options） envetBus传参”；$parent父对象，$chilren子对象 $root根节点

Vue 路由钩子函数

路由钩子的执行流程，钩子函数种类有：全局守卫、路由守卫、组件守卫。

完整的导航解析流程：

1、导航被触发。

2、在失活的组件里调用 beforeRouteLeave 守卫。

3、调用全局的 beforeEach 守卫。

4、在重用的组件调用 beforeRouteUpdate 守卫（2.2+）。

5、在路由配置里面 beforeEnter。

6、解析异步路由组件。

7、在被激活的组件里调用 beforeRouteEnter。

8、调用全局的 beforeResolve 守卫（2.5+）。

9、导航被确认。

10、调用全局的 afterEach 钩子。

11、触发 DOM 更新。

12、调用 beforeRouteEnter 守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入。