vue基础

vue是一套用于构建用户界面的前端框架，提供构建用户界面的一整套解决方案（俗称vue全家桶）

区别	传统开发	vue开发
构建方式	jQuery+模板引擎	结构：vue指令，数据驱动视图 交互：事件绑定（双向数据绑定）
缺点	基于结构：需要定义大量模板结构，数据变化时需要重新调整，否则不会更新 基于交互：业务复杂数据变化频繁，DOM操作困难	底层基于Object.defineProperty实现响应式，兼容性较差，api本身不支持IE8及以下浏览器 CRS（浏览器端渲染）先天不足，首页白屏 SPA先天对SEO（搜索引擎优化）优化不足
优点	基于结构：不用手动拼接字符串 基于交互：屏蔽DOM API兼容性，提高操作效率体验	配合diff算法、响应式和观察者、异步队列等手段最小代价更新dom，渲染页面 组件化，支持强大预处理 丰富API满足业务开发 生命周期钩子函数

包含：

vue(核心库)

vue-router(路由方案)

vuex(状态管理方案)

vue组件库(快速搭建页面ui效果的方案)

辅助工具：

vue-cli(npm全局包：一键生成工程化vue项目-基于webpack-大而全)

vite(npm全局包：一键生成工程化的vue项目-小而巧)

vue-devtools(浏览器插件：辅助调试)

vetur(vscode插件：提供语法高亮和智能提示)

数据驱动视图

页面所依赖的数据（从接口获取还是页面上假数据）都会被vue实时监听并且自动渲染到页面上

好处：当页面数据发生变化时，页面会自动进行重新渲染

数据驱动视图是单项数据绑定

双向数据绑定

在填写表单时，双向数据绑定辅助开发者不操作DOM的前提，自动把用户填写的内容同步到数据源中

好处：不需要手动操作DOM元素，获取表单元素最新的值

MVVM

MVVM是vue实现数据驱动视图和双向数据绑定的核心原理：

 

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

MVVM是Model+View+ViewModel缩写

vue版本

2.x版本的vue目前企业级项目开发主流版本

3.x 2020-09-19发布，已经普及为默认版本

新增的功能：组合式API、多根节点组件、更好的TypeScript支持

废弃旧功能：过滤器，不支持$on,$odd,$once实例方法

基本使用步骤

1. 导入vue.js的script脚本文件
2. 在页面中声明一个被vue所控制DOM区域
3. 创建vm实例对象（vue实例对象）

1. <script src="https://unpkg.com/vue@3"></script>//直接官网导入

并且不带构建工具

2-3由于是vue3所以使用工厂模式而不是构造函数搭建

<div id=”app”>{{username}}</div>

<script>

//带API使用ref

const {createApp,ref}=Vue

createApp({

data(){return{

Username:’VUE’

}}

}).mount(‘#app’)

</script>

提示：虽然全局构建工作正常，但为了保持一致性，我们将在文档的其余部分主要使用ES模块语法。为了在原生 ES 模块上使用 Vue，请改用以下 HTML

<script type="importmap">

  {

    "imports": {

      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"

    }

  }

</script>

<div id="app">{{ message }}</div>

<script type="module">

  import { createApp } from 'vue'

  createApp({

    data() {

      return {

        message: 'Hello Vue!',

name:{

username:’cx’

},

target:20,

      }

    }

  }).mount('#app')

</script>

另一种写法 一般使用这种写法

没有import，引入

<script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>

const method={

data(){return{num:12}}}

let app=Vue.createApp(method).mount(‘#app’)

安装vue-devtools调试工具，方便调试与开发

注意1：vue2和vue3的浏览器调试工具不能交叉使用

指令

指令是vue模板语法，辅助开发者渲染页面的基本结构

6种（三绑三渲）

内容渲染

属性绑定

事件绑定

双向绑定

条件渲染

列表渲染

内容渲染指令

①v-text②{{}}③v-html

1. v-text指令会覆盖元素默认的值 3.0已弃用  纯文本

<p v-text=”username”></p>

<p v-text=”gender”>性别</p>

1. {{}} 插值表达式，相对v-text指令更常用，不会覆盖元素默认值 纯文本
2. v-html 包含HTML标签的字符串

<i>abc</i>

属性绑定指令

v-bind:placeholder=”inputValuet”//或者:placeholder=”inputValue”

const App={

data(){

return{

inputValue:’请输入内容’

}

}

}

Let input=Vue.createApp(App).mount(‘.app’)

注意在输入地址时要正斜杠imgSrc:'src/image/logo.jpeg'与src中直接输入不一样src\image\logo.jpeg

javascript进行字符运算

事件绑定指令

v-on:click=”addCount”

原生DOM对象有onclick,oninput,onkeyup对应vue事件绑定之后变成

v-on:click,v-on:input,v-on:keyup

在methods节点中声明

methods:{

addCount(){

this.count+=1//this表示new出来的vm实例对象，通过this可以访问到data中的数据

}

}

methods与data平级

注意2：v-on指令简写形式为@，vue官方即

v-on:click=”ck”为@click=”ck”

并且如果逻辑比较简单之间写在行内即可，例如@click=”count+=1”//3.0不能实现

1.事件处理函数,接受事件对象event

methods:{

addCount(e){

const nowBgColor=e.target.style.backgroundColor

e.target.style.backgroundColor=nowBgColor===”red”?’’:’red’

This.count+=1

}

}

2.绑定事件并传参 在（）进行传参

v-on指令绑定事件@click=”addNewCount(2)”

methods:{

addNewCount(step){

this.count+=step

}

}

当有多个参数时候用$event

$event是vue提供的特殊变量，表示原生的事件参数对象event

$event解决事件参数对象被覆盖的问题

例如在实参这里是@click=”addCount(2,$event)”

methods:{

addNewCount(step,e){

const nowBgColor=e.target.style.backgroundColor

e.target.style.backgroundColor=nowBgColor===”red”?’’:’red’

This.count+=step

}

}

Vue实例挂载过程顺序：

初始化组件周期标识符->初始化事件系统->实例化属性合并，包含extend/mixins属性->初始化组件依赖注入内容

Filters过滤器(文本转换器)

1. 实现过滤时，用{{}}和管道符|调用处理方法
2. 对日期进行格式化

例如：

<div id=”root”>

性别：{{flag|sex}}

<br>

日期：{{date|formData}}

</div>

js中

var testApp=new Vue({

el:’#root’,

data:{

flag:1,

date:new Date(),

},

//过滤器Filters

fliters:{

sex:function(v){

if(v==1) return ‘男’；

else return ‘女’；

}，

formData:function(v){

//v就是需要过滤器恶的数据

var year=v.getFullYear();

var month=v.getmonth()+1;

var day=v.getDate()+1;

return year+’年’+month+’月’+day+’日’;

}

}

})

其中过滤器可以串联使用，对同一个实例按照先后顺序分别进行处理

作用是处理简单的文本转换，处理较为复杂的则使用计算属性,即Computed

Watch监听/侦听属性

如果不想调用方法和计算属性如何得到相应的改变呢？

方法：采用异步操作，例如向后台发起请求判断当前权限是否生效时可以使用watch监听属性

可以传入两个有序的参数，分别监听实例变量的新值与旧值（顺序不可出错，对位传参）

watch:{

flag:function(newV,oldv){

alert(‘新增’+newV+’旧值’+oldv);

}

}

生命周期

注意点1：钩子函数beforeCreate和created岱庙创建前和创建后，这个创建指的是什么？

回答：指的是”数据监测和数据代理”也就是data属性和get()和set()，一定不是指代vue实例。

注意点2：（Compile el’s outerHTML as template）将实例挂载目标el的outerHTML作为模板指的是什么？

<div id=’root’>

<h2>当前的值为：{{n}}</h2>

<button @click=’add’>点我n+1</button>

</div>

//外层的root才是outerHTML,而里面的子元素是innerHTML

注意点3：是否含有template选项渲染出来页面是不一样的

即在div定义模板与data中定义模板

一个是将实例挂载到el的outerHTML上，一个是将编译导入渲染函数

当有template选项且也有outerHTML时，外层div的自定义属性会被data中定义模板方式替换掉

例如外部div设置如下

<div id=’root’ :x=’n’>

</div>

而在data中时，

new Vue({

el:’#root’,

template:’

<div>

<h2>当前{{n}}</h2>

<button @click=’add’>点我n+1</button>

</div>

‘

})

注意点4：Has template option中的template是data中的属性而不是标签<template>

注意点5：把虚拟DOM转成真实DOM后往’vm.$el’存了一份，为什么要保存一份？

回答：vue可以提供虚拟DOM与真实DOM比较算法，因此使用vm.$el可以直接使用

注意点6：为什么对所有DOM操作最终都是不奏效的（调用beforeMount钩子函数时）

回答：因为只有到执行了钩子函数beforeMount预备挂载后才会将虚拟的DOM改变成真实的DOM插入当页面中，会进行模板渲染覆盖。

注意点7：在哪个钩子中页面和数据尚未保持同步？

回答：beforeUpdate钩子函数中

注意点8：vm.$destory()用法是什么

回答：完全销毁一个实例，清理它与其他实例的连接，解绑他全部的指令以及事件监听器，而其中事件监听器指的是解绑了自定义事件监听器，原生的监听器可以正常的使用

在大多数场景中不应该调用，而使用v-if和v-for指令进行代替以数据驱动的方式控制子组件的生命周期

注意点9：一般不会在beforeDestroy操作数据，页面不会触发更新操作

注意点10：vue生命周期8钩子

beforeCreate-Created-beforeMount-Mounted-beforeUpdate-Updated-beforeDestory-Destoryed

还有3个钩子分别是nextTick,activated,deactivated

Activated,deactivated用于路由组件，用来捕获路由组件的激活状态

总结：

1. 在created钩子时可以对data数据进行操作，就可以进行ajax请求将返回的数据赋值给data
2. mounted钩子对挂载的dom进行操作，因为此时已经时真实dom可以渲染页面结构
3. Vue-router时需要<keep-alive></keep-alive>来缓存组件状态，created钩子不会被重复调用，如果每次加载某些操作可以通过activated钩子触发。

个人笔记，如有错漏之处，敬请指正