Vue3基础知识（待续）

Vue是什么

构用户界面的js的渐进式框架，基于htlm、css、js，并提供声明式组件化的编程模型，帮你高效开发用户界面。无论简单或复杂的界面Vue都可以胜任。

vue是一个框架，同时也是一个生态。因为有很多程序员支持vue，开发了很多如轮播图的东西就形成了一个生态。考虑到web世界的多样性，vue注重灵活性和可被逐步继承。可在一个完整项目中使用vue，或某一个功能上使用vue，或某一个html中使用vue的某个功能。

后期主要是一个完整的项目中使用Vue。

vue分为vue2和vue3。vue3涵盖了vue2，vue3增加了很多新的特性。

官网：cn.vuejs.org v2.cn.vuejs.org

Vue API风格

vue2和vue3新老版本的问题，代码书写风格不一样：选项式API（vue2）、组合式API（vue3）。

使用选项式API，我们可以用包含多个选项的对象来描述组件的逻辑，例如data 、methods 和(mounted。选项所定义的属性都会暴露在函数内部的this 上，它会指向当前的组件实例.

具体参见Vue2如Vue2基础入门_阳光明媚UPUP的博客-CSDN博客

通过组合式API，我们可以使用导入的API函数来描述组件逻辑。

组合式api如：

这两种风格的api虽然写法完全不同，但是效果确实完全相同的。

当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用Vue，例如渐进增强的应用场景，推荐采用选项式API
当你打算用Vue构建完整的单页应用，推荐采用组合式API＋单文件组件

学习Vue前的准备

熟悉命令行

要求安装15.0或更高版本的nodejs cmd下node -v检测

nodejs简单了解

node.js：是一个开源的，跨平台的javaScript运行环境，简单来说它是一款应用程序，是一款软件，可运行javaScript。

nodejs可开发服务器端应用，nodejs就可在服务器中进行处理，将视频发给用户端。将资源返回给浏览器解析。nodejs就运行在服务器端，将用户的请求做处理，并把资源返回给浏览器。

nodejs可开发工具类应用如webpack、vite、babel，这三个工具可提高前端开发的效率和质量，都是借助于是借助于nodejs。

nodejs可以开发桌面端应用：vscoder、figma、postman，这三都借助于electron框架，electron又是借助于nodejs开发出来的。

nodejs下载安装

Node.js

选中LTS长期支持版下载

旧版本可在中文网站中全部按转包中CNPM Binaries Mirror

下载 | Node.js 中文网

下载.mis直接安装，途中不用勾选那个自动install的选框。

下载zip参考【转载】windows下Nodejs zip版下载安装及环境变量配置_nodezip版如何配置_AllTimeLow丶的博客-CSDN博客

创建Vue项目

进入空文件夹，上方cmd敲，会进入到该目录，然后 npm init vue@latest

D:\VueProject>npm init vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-base 起个项目名，不要有大写字母
√ Add TypeScript? ... No / Yes //添加TS默认NO直接回车即可
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes 添加路由，先no
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes

Scaffolding project in D:\VueProject\vue-base... //全部no默认，然后回车即可。

Done. Now run:

cd vue-base
npm install
npm run dev

D:\VueProject>

然后执行它的提示代码即可：

先cd vue-base

然后执行cnpm install 也可安装cnpm后执行cnpm install

安装cnpm命令为npm install -g cnpm --registry=https://registry.npm.taobao.org

然后使用cnpm install

然后npm run dev运行项目运行成功后复制地址到浏览器url输入访问即可。

也可使用vscoder打开一个空文件夹，然后ctrl+`在终端里敲上面的初始化代码等。

开发环境

vscoder+volar扩展

vscoder打开vue项目根目录

由于App.vue是字体为灰色，我们在vsccoder左侧扩展里加上一个vue language feature volar

这时App.vue就有颜色了

Vue项目目录结构

.vscode --- vscode工具的配置文件
node_modules --- Vue项目的运行依赖文件夹执行npm install安装的就是它
public --- 资源文件夹（浏览器图标)
src --- 源码文件夹进行编码的文件夹写代码的文件夹
.gitignore --- git忽略文件
index.html --- 入口的HTML文件
package.json --- 信息描述文件依赖vue3，开发环境dev详细依赖vite脚手架类似webpack
README. md --- 注释文件
vite.config.js --- vue配置文件做配置，如跨域、打包

模板语法

基于html的模板语法，是我们能够声明式的将其组件实例的数据绑定到呈现的dom上，所有的vue模板都是语法层面合法的html，可被符合规范的浏览器和html解析器解析。

1.文本插值

最基本的数据绑定形式，采用双大括号mustache语法

我们可先删除vue项目src下的components目录下所有的东西，然后App.vue中只保留

<script> </script> <template> </template> template和script上下顺序可颠倒，template建议放在script上面。

我们在App.vue中写入

  <template><h3>模板语法</h3><p>{{msg}}</p></template><script>export default{data(){return{msg:"神奇的语法"}}} </script>

重新运行终端npn run dev访问即可（后期保存自动更新页面）。发现还有样式剧中，样式在main.js中引入了资源文件夹assets文件夹下的main.css删除import语句即可。

assets为资源文件夹，日后公共css及实现都可放在这里，目前assets中资源直接删除掉即可。

2、使用js表达式

仅支持单一表达，即一个有结果的js表达式，可放在return语句中的。

不支持var，不支持for这种换行的表达式，可三元表达式。

  <template><h3>模板语法</h3><p>{{msg.split("").reverse().join("")}}</p><p>{{number+1}}</p><p>{{ok?'yes':'no'}}</p></template><script>export default{data(){return{msg:"神奇的语法",number:10,ok:true}}} </script>

3、原始html

双大括号将会将数据插值为纯文本，而不是HTML。若想插入HTML，你需要使用vhtml指令

  <template><h3>模板语法</h3><p>{{url}}</p><p v-html="url"></p></template><script>export default{data(){return{url:"<a href='http://www.baidu.com'>百度</a>"}}} </script>

属性绑定

双大括号不能在HTML attributes 中使用。想要响应式地绑定一个attribute，应该使用v-bind指令。

App.vue中改成引入组件文件夹中的HelloWorld.vue

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template><HelloWorld/>
</template>

src下components下的HelloWorld.vue

<template><!-- v-bin:也可简写为:一个冒号 --><div v-bind:id="dynamicId" :class="msg" >测试</div><button :disabled="isButtonDisabled">button按钮</button><div v-bind="objectOfAttrs">一次性绑定多个属性</div>
</template>
<script>
export default{data(){return{msg:"active",//active为选中的意思dynamicId:"appId",dynamicTitle:null,//如果为null或undefined，那么该attribute将会从渲染的元素上移isButtonDisabled:false,//也可一次性绑定多个值objectOfAttrs:{id:"appId",class:"allClass"}}}
}
</script>

刷新网页即可。所有的标签的属性都可通过这个v-bind为其绑定vue的data值

条件渲染

在vue中，提供了条件渲染，这类似于JavaScript中的条件语句

v-if、v-else、v-else-if、v-show

先src的components文件夹下创建ifDemo.vue

<template><h3>条件渲染</h3><div v-if="flag">你能看见我吗？</div><!-- v-if为假的时候显示 --><div v-else>那你还是看看我吧</div><div v-if="type === 'A'">A</div><div v-else-if="type==='B'">B</div><div v-else-if="type==='C'">C</div><div v-else>Not A/B/C</div><div v-show="flag">你能看见我吗？</div>
</template>
<script>
export default{data(){return{flag : true,type : "B"}}
}
</script>

在App.vue中引入：

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import IfDemo from "./components/ifDemo.vue"
</script>
<template><HelloWorld /><IfDemo />
</template>

v-if是基于对标签的渲染与否，v-show是基于display属性设置为true或false。

总的来说，ve-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要频繁切换，则使用v-show较好;如果在运行时绑定条件很少改变，则v-if会更合适。

v.if 也是惰性的:如果在初次渲染时条件值为false，则不会做任何事。条件区块只有当条件首次变为true时才被渲染。

列表渲染

我们可以使用v-for指令基于一个数组来渲染一个列表。v-or指令的值需要使用item in items 形式的特殊语法，其中items是源数据的数组，而item是迭代项的别名

src下的components中创建ListDemo.vue

<template><h3>列表渲染</h3><p v-for="item in names">{{item}}</p><p v-for="(item,index) in names">{{item}}--{{ index }}</p><!-- 使用in和使用of都一样 --><p v-for="item of names">{{item}}</p><p v-for="(item,index) of names">{{item}}--{{ index }}</p><hr/><!-- 对于复杂的json --><div v-for="item of results"><p>{{item.id}}</p><p>{{item.title}}</p><a :href="item.url">链接</a></div><!-- 对于一个对象也可遍历 --><div><p v-for="item in userInfo">{{ item }}</p><p v-for="(value,key,index) in userInfo">{{ value }}-{{ key }}--{{index}}</p></div>   
</template>
<script>export default{data(){return{names:["张三","李四","王二麻子"],//对于复杂的json数据results:[{"id":1,"title":"111hello你好","url":"http://www.baidu.com"},{"id":2,"title":"222hello你好","url":"http://www.baidu.com"},{"id":3,"title":"333hello你好","url":"http://www.baidu.com"}],//对于一个对象也可以遍历userInfo:{name:"张三",age:22,sex:"男"}}}}
</script>

App.vue中引入

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import IfDemo from "./components/ifDemo.vue"
import ListDemo from "./components/ListDemo.vue"
</script>
<template><HelloWorld /><IfDemo /><ListDemo />
</template>

通过key管理状态

Vue默认按照"就地更新"的策略来更新通过v-for渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动DOM元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染
为了给Vue一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的key attribute:

使用key可用节省开销。

src的component中创建KeyDemo.vue

<template>
<h3>key属性添加到v-for循环中</h3>
<p v-for="(item ,index) in names" :key="index">{{item}}</p>
<!-- 一般不推荐使用index作为key，一般使用result服务器返回的结果集中的id -->
<div v-for="item of result" :key="item.id">
<p>{{ item.name }}</p>
<a :href="url">链接</a>
</div>
</template>
<script>
export default{data(){return{names:["aaa","sss","ddd"],result:[{"id":1,"name":"aaa","url":"http://www.baidu.com"},{"id":2,"name":"bbb","url":"http://www.baidu.com"},{"id":3,"name":"ccc","url":"http://www.baidu.com"}]}}
}
</script>

App.vue中引入

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import IfDemo from "./components/ifDemo.vue"
import ListDemo from "./components/ListDemo.vue"
import keyDemo from "./components/KeyDemo.vue"
</script>
<template><HelloWorld /><IfDemo /><ListDemo /><keyDemo />
</template>

事件处理

我们可以使用von指令(简写为 @)来监听DOM事件，并在事件触发时执行对应的JavaScript。用法:on:click="methodName”或@click="handler"
事件处理器的值可以是
内联事件处理器:事件被触发时执行的内联JavaScript语句(与onclick类似)

方法事件处理器:一个指向组件上定义的方法的属性名或是路径

事件参数

事件参数可以获取event对象和通过事件传递数据

事件修饰符

在处理事件时调用event.preventDefault(或event stopPropagation()是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好
为解决这一问题，Vue为v-on提供了事件修饰符，常用有以下几个:
.stop 阻止事件冒泡
.prevent 阻止默认事件
.once4 事件只会被触发一次
.enter 回车按键触发的

具体参考
地址:https://cn.vuejs.org/guide/essentials/event-handling.html#event-modifiers

demo如下

src下的component创建EventDemo.vue

<template>
<h3>事件处理</h3>
<!-- 内联事件处理器 -->
<button v-on:click="count++">（内联处理器)Add</button>
<p>{{ count }}</p>
<!-- 方法事件处理器 -->
<button @click="addNum">addNum</button>
<button @dblclick="addNum">addNum</button>
<p>{{ number }}</p>
<!-- 事件参数，传递event对象 -->
<button @click="addNum2">addNum222</button>
<p>{{ number }}</p>
<!-- 事件参数，传递事件参数 -->
<button @click="addNum3('hello')" >Add333</button>
<p>{{ number }}</p>
<p @click="getNamesHandler(item)" v-for="(item,index) of names" :key="index">{{ item }}</p>
<p @click="getNamesHandler2(item,$event)" v-for="(item,index) of names" :key="index">{{ item }}</p>
<!-- 阻止默认事件1，在click的方法中调用e.preventDefault(); -->
<a @click="clickHandle" href="http://www.baidu.com">百度链接</a><br/>
<!-- 阻止默认事件2，直接写-->
<a @click.prevent="clickHandle2" href="http://www.baidu.com">百度链接</a>
<!-- 阻止事件冒泡：事件冒泡就是如下 -->
<div @click="clickDiv">
<p @click="clickP">测试事件冒泡</p>
<!-- 还可通过.stop进阻止事件冒泡 -->
<p @click.stop="clickP">测试事件冒泡</p>
</div>
</template>
<script>
export default{data(){return{ count:0,number:0,names:["aaa","bbb","ccc"]}},methods:{addNum(){this.number++;},addNum2(e){console.log(e),e.target.innerHTML = "Add222"+this.numberthis.number++;},addNum3(msg){console.log(msg),this.number++;},getNamesHandler(item){console.log(item)},getNamesHandler2(item,e){console.log(e)console.log(item)},clickHandle(e){e.preventDefault();//这点击该a超链接标签后，就不会默认的跳转url事件了。console.log("点击了")},clickHandle2(){console.log("点击了")},clickDiv(){console.log("DIV");},clickP(e){//e.stopPropagation();//如果不加这个，就会出现事件冒泡，点击p中的测试事件冒泡clickP，会将div父标签的clickDiv也会执行。console.log("P");}}
}
</script>

App.vue中加上

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import IfDemo from "./components/ifDemo.vue"
import ListDemo from "./components/ListDemo.vue"
import keyDemo from "./components/KeyDemo.vue"
import EventDemo from "./components/EventDemo.vue"
</script>
<template><HelloWorld /><IfDemo /><ListDemo /><keyDemo /><EventDemo />
</template>

数组变化的侦测

1变更方法：Vue能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2、替换一个数组
变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变
(immutable)方法，例如fiter)，concat)和islice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的数组。

src下的components中创建ArraysDemo.vue

<template>
<h3>数组变化侦听</h3>
<button @click="addListHandle">添加数组</button>
<ul><li v-for="(item,index) of names" :key="index">{{ item }}</li>
</ul>
<button @click="concatHandle">合并数组</button>
<h3>数组1</h3>
<p v-for="(item ,index) of nums1" :key="index">{{ item }}</p>
<h3>数组2</h3>
<p v-for="(item ,index) of nums2" :key="index">{{ item }}</p>
</template>
<script>
export default{data(){return{names:["aaa","bbb","ccc"],nums1:[1,2,3,4,5],nums2:[6,7,8,9,10]}},methods:{addListHandle(){//引起ui自动更新//this.names.push("ddd")//不会引起ui自动更新this.names = this.names.concat(["ddd"])},concatHandle(){this.nums1 = this.nums1.concat(this.nums2)}}
}
</script>

App.vue中引入

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import IfDemo from "./components/ifDemo.vue"
import ListDemo from "./components/ListDemo.vue"
import keyDemo from "./components/KeyDemo.vue"
import EventDemo from "./components/EventDemo.vue"
import ArrayDemo from "./components/ArrayDemo.vue"
</script>
<template><HelloWorld /><IfDemo /><ListDemo /><keyDemo /><EventDemo /><ArrayDemo />
</template>

计算属性

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。

src下的components中新建ComputedDemo.vue文件

<template>
<h3>{{ user.name}}</h3>
<p>{{ user.hobbies.length>0? 'yes':'no' }}</p>
<!-- 双花括号直接引用计算属性，不用加括号 -->
<p>{{ userContent }}</p>
<!-- 会使用传统的双花括号引一个函数，要加括号 -->
<p>{{ userContents() }}</p>
<p></p>
</template>
<script>
export default{data(){return{user:{name:"aaa",hobbies:["h111","h222","h333"]}}},computed:{//计算属性，用的时候直接写名，不用加括号userContent(){return this.user.hobbies.length >0 ? 'Yes':'No'}},methods:{userContents(){//函数，用加括号return this.user.hobbies.length >0 ? 'Yes':'No'}}
}
</script>

App.vue中引入

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import IfDemo from "./components/ifDemo.vue"
import ListDemo from "./components/ListDemo.vue"
import keyDemo from "./components/KeyDemo.vue"
import EventDemo from "./components/EventDemo.vue"
import ArrayDemo from "./components/ArrayDemo.vue"
import computedDemo from "./components/computedDemo.vue"
</script>
<template><HelloWorld /><IfDemo /><ListDemo /><keyDemo /><EventDemo /><ArrayDemo /><computedDemo/>
</template>