Vue CLI 3.0

Vue CLI 3.0

1.安装node.js、npm

#1.配置环境变量
    1.计算机上右键属性----->  高级属性  ----->环境变量  添加如下配置:
        NODE_HOME = nodejs安装目录
        PATH = %NODE_HOME%
#2.查看node版本
    node -v
    npm -v //查看npm版本
#3.下载
    1.npm install 下载名
    2.nvm 
        nvm -help
    nvm list //查看版本
    nvm install 版本号
    vnm use 版本号 //切换版本
    nvm uninstall 版本号 //卸载
#4.构建项目
    npm init vite@latest //vite构建项目
    npm init vue@latest //vue构建项目
    npm i //vue构建项目使用npm i添加依赖
#5.终端安装
    npm install
    npm install执行后自动创建node_modules
#6.前端运行
    npm run dev

2.TS语法eg:

vue输出:

<template>
  <div>
    {{a+2}}<br>
    {{b ? 'true' : 'false'}}<br>
    {{c.map(v => ({num : v}))}}<br>
  </div>
</template>
  
  <script setup lang="ts">
        const a:number = 1
​
        const b:number = 0
​
        const c:number[] = [1,2,3,4,5]
</script>

v-text绑定

<template>
  <div v-text="d">
  </div>
</template>
​
<script setup lang="ts">
    const d:string = '我是一段文字xxxxx'
</script>

v-html绑定

<template>
  <div v-html="a">
  </div>
</template>
​
<script setup lang="ts">
const a:string ='<section style="color: red">我是一段文字xxxxxx</section>'
</script>

v-if绑定

<template>
  <div v-if="a">
    true
  </div>
</template>
<script setup lang="ts">
const a:boolean = true
</script>

v-show绑定

<template>
  <div v-show="a">
    true
  </div>
</template>
<script setup lang="ts">
const a:boolean = true
</script>

v-if v-else绑定

<template>
  <div v-if="a">
    true
  </div>
  <div v-else>
    false
  </div>
</template>
​
<script setup lang="ts">
const a:boolean = false
</script>

v-else-if绑定

<template>
  <div v-if="a=='A'">
    A
  </div>
  <div v-else-if="a=='B'">
  B
  </div>
  <div v-else>
    C
  </div>
</template>
​
<script setup lang="ts">
const a:string = 'A'
</script>

@click点击事件

<template>
  <button @click="xxx">点击我</button>
</template>
​
<script setup lang="ts">
const xxx=()=>{
  alert('点击了xxx')
}
</script>
​
# const声明evnet; @[evnet]
<template>
  <button @[evnet]="xxx">点击我</button>
</template>
​
<script setup lang="ts">
const evnet = 'click'
const xxx=()=>{
  alert('点击了xxx')
}
</script>
​
# 父级；冒泡触发父级parent
<template>
  <div @click="parent">
    <button @[evnet]="xxx">点击我</button>
  </div>
​
</template>
​
<script setup lang="ts">
const evnet = 'click'
const parent=()=>{
  alert('我是父级')
}
const xxx=()=>{
  alert('点击了xxx')
}
</script>
​
# 阻止父级冒泡.stop
<template>
  <div @click="parent">
    <button @[evnet].stop="xxx">点击我</button>
  </div>
​
</template>
​
<script setup lang="ts">
const evnet = 'click'
const parent=()=>{
  alert('我是父级')
}
const xxx=()=>{
  alert('点击了xxx')
}
</script>

v-bind:绑定

<template>
  <div v-bind:id="id">
    v-bind 你好
  </div>
</template>
​
<script setup lang="ts">
const id:string = '123'
</script>

:class绑定

<template>
  <div :class="['a' ,'b']">
    v-bind 你好
  </div>
</template>
​
<script setup lang="ts">
const id:string = '123'
const Cls:boolean = false
​
const style={
  color:'red',
  border:'1px solid #ccc'
}
</script>
<style scoped>
.a{
  color: red;
}
.b{
  border: 1px solid #ccc;
}
.c{
  background-color: aqua;
}
</style>

:class表达式

<template>
  <div :class="[Cls ? 'a' : 'b']">
    v-bind 你好
  </div>
</template>
​
<script setup lang="ts">
const id:string = '123'
const Cls:boolean = true
​
const style={
  color:'red',
  border:'1px solid #ccc'
}
</script>
<style scoped>
.a{
  color: red;
}
.b{
  border: 1px solid #ccc;
}
.c{
  background-color: aqua;
}
</style>

v-model绑定

<template>
  <div>
    <input v-model="a" type="text">
    <div>{{a}}</div>
  </div>
</template>
​
<script setup lang="ts">
//ref reactive
import {ref} from 'vue'
const a = ref('张三')
</script>

v-for循环遍历

<template>
  <div>
    <div v-for="item in arr">
      {{item}}
    </div>
  </div>
</template>
​
<script setup lang="ts">
//ref reactive
const arr:string[] = ['张三','李四','王五']
</script>
​
//拼接
<div>
    <div v-for="(item,index) in arr">
      {{index}} - {{item}}
    </div>
  </div>

v-once渲染(性能优化 只渲染一次)

<div>
    <div v-once>
      {{ 123 }}
    </div>
  </div>

v-memo性能优化

<template>
<div>
<div v-for="item in arr" v-memo="[item == 2]">
​
</div>
</div>
</template>
​
<script setup lang="ts">
//ref reactive
const arr = [1,2,3]
</script>

3.Vue核心虚拟Dom和 diff 算法

虚拟DOM就是通过JS来生成一个AST节点树

为什么要有虚拟DOM？

let div = document. creatrElement('div')
let str = ''
for(const key in div){
    str += key + ''
}
console.log(str)

发现上面的属性是非常多的

所以直接操作DOM非常浪费性能

解决方案就是 我们可以用JS的计算性能来换取操作DOM所消耗的性能,既然我们逃不掉操作DOM这道坎，但是我们尽可能少的操作DOM操作JS是非常快的

3.1介绍Diff算法

无key

1.无key patch的时候会替换——>2.新增——>3.删除

有key

1.前序对比算法——>2.尾序对比算法——>3.新节点如果多出来 就是挂载通过patch函数第一个参数为null——>4.旧节点如果多出来就是卸载——>5.特殊情况乱序

乱序:当需要进行移动操作时，那么这个问题就变成了求取新旧子树上的最长递增序列

<template>
  <div>
    <div :key="item" v-for="(item) in Arr">{{ item }}</div>
  </div>
</template>
 
<script setup lang="ts">
const Arr: Array<string> = ['A', 'B', 'C', 'D']
Arr.splice(2,0,'DDD')
</script>
 
<style>
</style>

4.认识Ref全家桶