vue总结

1.1、MVVM

MVVM是实现数据驱动视图和双向数据绑定的核心原理。MVVM指的是Model、View和ViewModel，他们把每个页面都拆分成了这三个部分。

1、Model表示当前页面渲染时所依赖的数据源

2、View表示当前页面所渲染的Dom结构

3、ViewModel表示vue的实例，他是MVVM的核心

1.2、内容渲染指令

1.2.1 v-text

把msg对应的值渲染到div标签中

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

v-text指令会覆盖元素内默认的值，李四会被usename的值覆盖掉

<div v-text="usename">李四</div>

1.2.2 插值表达式 {{}}

<div>姓名:{{usename}}</div>

1.2.3 v-html

v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素，则需要用到v-html指令

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

data:{

        info:"<p>我是一个前端</p>"

}

1.2.4 属性绑定指令

<input v-bind:value="paly"></input>

data:{

        paly:"请输入"        

}

1.2.5 使用JavaScript表达式

加法运算

{{number+1}}

三元表达式

{{ok? 'yes':'no'}}

字符串反转

{{msg.split('').reverse().join('')}}

1.2.6 事件绑定指令

<button v-on:click="handleClick">点击</button>

事件绑定简写形式 把v-on：简写为@符号

<button @click="handleClick"></button>

methods:{

        handleClick(){

        alert("我被点击了！")

}

}

1.2.6 事件修饰符

.prevent 阻止默认行为(阻止a链接的跳转、阻止表单的提交)

.stop  阻止事件冒泡

.caputure  以捕获模式出发当前的事件处理函数

.once  绑定事件只触发一次

.self  只有在event.target是当前元素自身时触发事件处理函数

1.2.7 按键修饰符

只有在key是enter时调用

<input @keyup.enter="submit"> </input>

1.2.8 双向绑定指令v-model

<p>{{usename}}</p>

<input v-model="usename"></input>

data:{

        usename:'李四'

}

v-model指令修饰符

.number 自动将用户输入的值转换为数值类型 <input v-model.number="age"></input>

.trim 自动过滤用户输入的收尾空白符  <input v-model.trim="msg" />

.lazy  在change时更新而非input时更新 <input v-model.lazy="msg" />

1.2.9 条件渲染指令

条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指令有两个分别是v-if、v-show

<p v-if="Math.random()>0.5">v-if指令</p>

<p v-show="Math.random()>0.5">v-show指令</p>

v-if和v-show的区别

1、v-if指令会动态的创建或移除DOM元素，从而控制元素在页面上的显示与隐藏

2、v-show指令会动态为元素添加或移除style="display:none;"样式，从而控制元素的显示与隐藏

3、v-if有更高的切换开销，而v-show有更高的初始渲染开销

4、如果需要非常频繁的切换，则使用v-show较好

5、如果在运行时条件很少改变，则使用v-if较好

v-else

v-if可以单独使用，或配合v-else指令一起使用。v-else指令必须配合v-if指令一起使用，否则他将不会被识别

<div v-if="Math.random()>5">

        随机数大于5
</div>

<div v-else>

        随机数小于或等于5

</div>

v-else-if

v-else-if指令，充当v-if的else-if块，可以连续使用。v-else-if指令必须配合v-if指令一起使用，否则他将不会被识别

1.3.0 列表渲染指令

vue使用v-for列表渲染指令，用来辅助开发者基于一个数组来渲染一个列表结构。

<li v-for="(item,index) in list" :key="item.id">

        索引是:{{index}} ,姓名是:{{item.name}}

</li>

2.1 组件生命周期

beforeCreate  在实例初始化之后data observer和事件配置之前被调用

created   data 已经初始化，计算属性、event/watch事件回调，但dom属并未挂载

beforeMount  在挂载前被调用render函数首次被调用生成虚拟dom

mounted   挂载完成，dom树已经完成渲染到页面，可进行dom操作

beforeDestroy   清楚watcher 、 子组件事件监听器等

destroyed   组件销毁 所有数据和方法不可被访问

2.2 组件之间的数据共享

2.2.1 组件之间的关系

1、父子关系

2、兄弟关系

2.2.2 父组件向子组件共享数据

父组件：

<child :msg="message"></child>

data(){

        return{

        message:"hello"

}

}

子组件：

<div>{{msg}}</div>

export default {

        props:{

                msg:{type:string,default:nihao}

}

}

2.2.3 子组件向父组件共享数据

子组件：

export default{

         data(){

                return{

                        count:0

        }

},       

methods:{

                add(){

                        this.count++;

                         this.$emit('change-count',this.count)

                }

        }

}

父组件：

<child @change-count="changeCount"></child>

data(){

        return{

                parentCount:0

        }

}

methods:{

        changeCount(count){

                this.parentCount=count

        }

}

2.2.4 兄弟组件之间的数据共享

1、创建eventBus.js模块，并向外共享一个Vue的实例对象

2、在数据发送方，调用bus.$emit('事件名称'，要发送的数据)方法触发自定义事件

3、在数据接收方，调用bus.$on（'事件名称'，事件处理函数）方法注册一个自定义事件

3.1 ref引用

ref用来辅助开发者在不依赖jQuery的情况下，获取DOM元素组件的引用

每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素和组件的引用。默认情况下，组建的$refs指向的一个空对象

<div ref="myRef">ref 组件</div>

<button @click="getRef">获取 $refs 引用</button>

methods: {
    getRef() {
      通过 this.$refs 引用的名称，可以获取到 DOM 元素的引用 
      console.log(this.$refs.myRef);
       操作 DOM 元素，把文本颜色改为红色 
      this.$refs.myRef.style.color = 'red';
    }
  }
 

3.1.2 路由

路由模式

1、hash路由

2、历史记录路由

mode："hash"|"history"

哈希路由不依赖后端，刷新并没有问题

历史记录没有后端配置刷新会404

路由原理

地址栏更新页面不刷新，监听变化切换div模板页面的切换

哈希路由：监听onhashchange事件

历史路由：监听onpopstate

路由的配置

普通配置

{path："路径",name:"名称",component:"组件"}

路由懒加载（vite打包需要二次处理）

{path:"路径",name:"名称",component:()=>import(组件)}

子路由

{path:"路径",name:"名称",component:组件,children:[

        {path:路径,component:组件},

        ...

]}

传参路由

{path:"/produce/:id",name:"名称",componnent:组件}

<router-link to="/produce/abc"></router-link>

$route.params.id

路由传参

1、路径传参

{path："/produce/:id",name:"名称",component:组件}

<router-link to="/produce/abc"></router-link>

$route.params.id

2、query查询传参

<route-link to="/user?name=mumu">

$route.query获取

3、meta 元数据传参

没有hasTabs 底部栏

{path:"/user",component:xxx,meta:{hasTabs:true}}

<router-view/>

<tabs v-if=""$route.meta.hasTabs></tabs>

keep-alive缓存路由页面

在原信息页面定义keep值为true会被缓存

{path:"category",meta:{keep:true},component:xxx}

App.vue

<keep-alive v-if="$route.meta.keep">

        <route-view/>

</keep-alive>

<route-view v-else/>

路由组件内部钩子函数

beforeRouteEnter(to,from,next){}

路由进入前(函数不能用this)

beforeRouteUpdate(to,from,next){}

路由更新前(/produce/123)=>(/produce/789)

beforeRouteLeave(to,from,next){}

路由离开前(还差一点就能获取。。。)

全局导航守卫构造函数

作用：权限管理，进入页面前操作(提前获取数据..)

判断to的meta是否需要鉴权，判断是否有token(是否登录)

有就next，没有就next("/login")

一定要有next被执行

1、beforeEach((to,from,next)=>{})

2、afterEeach((to,from)=>{})

路由独享守卫

{path:"",component:xx,beforeEnter:(to,from,next){}}

vuex

什么是vuex：

vuex是应用程序开发的状态管理模式，它采用 了集中式存储管理的应用的所有组件状态

什么时候用vuex

多个视图使用同一个状态：传参的方法对于多层嵌套的组件将会很麻烦，当你使用vuex这个状态会在你的项目任何地方都可以使用这个状态；

不同试图需要变同一个状态：采用父子组件或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护代码

使用vuex的注意事项

1、数据都是单项向的

2、组件能够调用actions

3、actions用来派发mutations

4、只有mutation可以改变状态

5、store是响应式的，无论state什么时候更新，组件都会同步更新

vuex与Storage的几个区别

1、从存储位置来说，vuex用的是内存，而Storage用的是文件存储；

2、从易失性来说，vuex与页面的生命周期相同(如关闭页面、刷新数据就会消失)，而localStorage是永久存储的，sessionStorage生存于应用会话期间；

3、从存储空间来看，vuex取决于内存和浏览器的限制，Storage都有个默认的大小(至少5MB,浏览器决定)，超出大小则需要用户同意增加空间；

4、从共享来看，vuex无法跨标签、跨物理页面共享、而Storage则可以在同一域名地下共享；

5、从用途来看，vuex是用于管理页面内容及组件的状态，而Storage主要是用于存储数据；

另外，缓存是应用级的概念，你可以根据需要，采用符合要求的存储来做缓存。因此，vuex也可以作为缓存来使用。同时，浏览器通常也会为应用提供缓存设施。现代浏览器都会提供几个类别的存储：

1、storage：包括LocalStorage、Session Storage、WebSQL、Cookies等；

2、其他文件缓存，如图片、请求等；

vuex中的五大函数的作用

1、state ： 统一定义公共数据(类似于data（）return)

2、mutations：使用它来修改数据

3、getters：类似于computed(计算属性，对现有的状态进行计算得到新的)

4、actions：发起异步请求

5、modules：模块拆分

vuex的工作流程

首先通过dispatch去提交一个actions，在actions接收到这个事件后，在actions中进行一些异步或同步操作，根据情况分发给不同的mutations，actions通过commit触发mutations，然后mutations去更新state，在state更新后，就会通知vue进行渲染。步骤如下

1、通过dispatch去提交一个actions

2、在actions接收到事件后，在actions中执行一些异步或者同步操作

3、根据不同的情况分发给不同的mutations，actions通过commit触发mutations

4、mutations在触发后就会去更新state

5、在state更新完毕后，就会通知vue进行渲染