Vite+Vue3学习笔记（2）——语法、渲染、事件、数据传递、生命周期、第三方库、前端部署
官网链接：https://cn.vuejs.org/
如果出现普通用户无法新建项目，必须要管理员身份新建，那么可以在nodejs的安装路径设置安全选项，提高普通用户的权限。
具体方法参考：
https://blog.csdn.net/weixin_43174650/article/details/121865934
0 基本标签
| 标签 | 功能 |
|---|---|
| template | 模板 |
| div | 块 |
| h1~h6 | 标题 |
| p | 文字 |
| header | 头部 |
| main | 主体 |
| button | 按钮 |
| img | 图片 |
| canvas | 画布 |
| ul | 无序列表 |
| ol | 有序列表 |
| li | 列表项目，用在ul和ol中 |
| input | 输入文本框 |
| textarea | 文本区域 |
| select | 下拉选择框 |
1 模板语法
首先来看一下项目的结构，src下存放了需要我们关注的文件。
- assets下包含了静态资源，包括图片和公共的css文件。
- components下存放vue的组件。
- App.vue是根组件。
- main.js是主入口文件。
1.2 文本
数据绑定，形成能改变的动态文字。使用双花括号{{ }}插入文字。
<template>
<p>{{ message }}</p>
</template>
<script>
export default {
data() {
return {
message:"学习Vue"
}
}
}
</script>
1.3 链接
双花括号会将数据解释为普通文本，而不是HTML代码。为了输出真正的HTML代码，需要使用v-html代码。
<template>
<div>{{rawHtml}}</div>
<div v-html="rawHtml"></div>
</template>
<script>
export default {
data() {
return {
rawHtml:"百度搜索"
}
}
}
</script>
1.4 属性（attribute）
位于尖角括号内的<*** class="text" width="100px" height="200px">，为标签的属性。
要让属性（class或id）成为能按照js改变的属性，需要使用v-bind指令。
<template>
<div v-bind:id="dynamicID"></div>
</template>
<script>
export default{
data(){
return{
dynamicID:10001,
}
}
</script>
注意：v-bind:可以简写为:。
1.5 表达式
只能单行表达式！
赋值语句不可以，if表达式也不可以。
<template>
<p>输入：{{ num }}，输出：{{ num + 10 }}</p>
<p>{{ flag ? "真":"假" }}</p>
</template>
<script>
export default{
data(){
return{
flag : true,
num:10,
}
}
}
</script>
2 渲染方式
2.1 条件渲染：v-if和v-else
使用变量flag的true和false来控制是否渲染此对象。v-if后面可以紧跟着v-else来表达另外一种选择时的渲染对象。
<template>
<p v-if="flag">Hello World!</p>
<p v-else>I am Jonathan!</p>
</template>
<script>
export default{
data(){
return{
flag : true,
}
}
}
</script>
2.2 v-show
只能控制一个，要么显示要么不显示。
<template>
<p v-show="flag">Hello World!</p>
</template>
<script>
export default{
data(){
return{
flag : true,
}
}
}
</script>
两者的区别：
v-if是真正的条件渲染，没有被渲染的会背销毁，重新渲染的会重建。是惰性的，有更高的切换开销。
v-show只是显示不显示的问题，所有都被渲染，有最高的初始渲染那开销。
2.3 列表渲染：v-for
把一个数组映射为一组元素，然后渲染。
维护模式，添加:key="id"确定一个唯一的标识，以便后期渲染时，只渲染新增的元素，以节约渲染开销。
<template>
<ul>
<li v-for="news in newslist" :key="news.id">
{{ news.title }}
</li>
</ul>
</template>
<script>
export default{
data(){
return{
newslist:[
{
id:1001,
title:"今日新闻1"
},
{
id:1002,
title:"今日新闻2"
},
{
id:1003,
title:"今日新闻3"
},
{
id:1004,
title:"今日新闻4"
},
}
}
}
</script>
3 事件处理
3.1 监听事件：v-on或@
使用v-on或者@来监听DOM事件，并在触发事件时执行一些Javascript。用法为：v-on:lick="methodName"或者使用快捷方式@click="methodName"。
3.1.1简单事件处理
直接在click事件中添加变量自增。
<template>
<button @click="counter += 1">点击增加counter值：{{ counter }}</button>
</template>
<script>
export default{
data(){
return{
counter:0,
}
}
}
</script>
3.1.2 事件处理方法
如果事件处理逻辑较为复杂，则v-on接收一个需要调用的方法（函数）名称。
<template>
<button @click="clickHandle">点击弹出对话框</button>
</template>
<script>
export default{
methods:{
clickHandle(){
alert("只因你太美！");
},
}
}
</script>
3.1.3 获取、修改页面信息
获取页面中的数据需要使用this.来指定对象。
event时间内有较多参数，也可以修改。
<template>
<p>{{ message }}</p>
<button @click="changeText">撤回消息</button>
</template>
<script>
export default{
data(){
return{
message:"消息通知",
}
},
methods:{
changeText(event){
// 在时间中，读取data中的属性，是需要通过this.属性
this.message = "消息被撤回了。";
console.log(event); //event为原生DOM event
event.target.innerText = "无新消息";
},
}
}
</script>
3.1.4 事件传递参数
click可以传递参数到js内。
1、点击按钮传递参数：
<template>
<p>----------------</p>
<button @click="sendParam('hi')">send hi</button>
<button @click="sendParam('bye')">send bye</button>
</template>
<script>
export default{
methods:{
sendParam(data){
console.log(data);
},
}
}
</script>
点击按钮可以发现参数传递成功，调试输出了对应文本。
2、点击文本/列表传递参数
<template>
<ul>
<li @click="clickItemHandler(name)"
v-for="(name,index) in namelist"
:key="index">{{ name }}</li>
</ul>
</template>
<script>
export default{
data(){
return{
namelist:['owen','john','frank'],
}
},
methods:{
clickItemHandler(name_param){
console.log(name_param)
},
}
}
</script>
点击无序列表的各个项目，可以发现下方调试面板输出了对应的name。
4 表单输入绑定
4.1 数据绑定v-model
可以使用v-model指令在表单、