天行健，君子以自强不息；地势坤，君子以厚德载物。
每个人都有惰性，但不断学习是好好生活的根本，共勉！
文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。
燕山雪花大如席，片片吹落轩辕台。
------《北风行》
文章目录
Node.js的下载、安装和配置
node的下载、安装、配置和使用（node.js下载安装和配置、npm命令汇总、cnpm的使用）
Vue3入门之创建vue3的单页应用(vite+vue)
Vue入门第一篇（环境配置、脚手架安装、项目创建、项目运行访问、项目结构详解等）
Vue入门第二篇（基本语法、实例演示）
Vue专栏
Vue入门之v-for、computed、生命周期和模板引用
文末附本文所有示例代码的下载地址以及基于vite构建vue3的项目demo地址
1. v-for
列表渲染
使用v-for渲染列表数据
todo为局部变量，表示当前正在迭代的数组元素，仅在v-for绑定的元素上或其内部访问
id为每个todo对象的唯一标识，且作为属性key绑定到每个li列表
1.1 script setup
script setup标签内的代码
// 6. 列表渲染 v-for渲染一个基于源数组的列表，更新列表方法有两种
// 给每个todo对象一个唯一的id
let id = 0
const newTodo = ref('')
const todos = ref([
{
id:id++, text:'learn Html'},
{
id:id++, text:'learn JavaScript'},
{
id:id++, text:'learn Css'}
])
function addTodo(){
// 6.1 在原数组上调用变更方法
todos.value.push({
id:id++, text:newTodo.value})
newTodo.value = ''
}
function removeTodo(todo){
// 6.2 使用新的数组替换原数组
todos.value = todos.value.filter((t)=>t!==todo)
}
1.2 template
template标签内的代码
<!-- 6. -->
<div>
<h2>6. 列表渲染</h2>
<form @submit.prevent="addTodo">
<input id="ipt-6" v-model="newTodo" required placeholder="new todo">
<button id="btn-6" >Add todo</button>
</form>
<ul id="u-6">
<li v-for="todo in todos" :key="todo.id">
{
{ todo.text }}
<button id="btn-62" @click="removeTodo(todo)">a</button>
</li>
</ul>
</div>
1.3 style scoped
style scoped标签内的代码
/* 6. */
#u-6{
height: 400px;
width: 400px;
text-align: center;
border-radius: 20px;
background-color: lightsalmon;
font-size: 20px;
}
#ipt-6{
height: 30px;
width: 300px;
text-align: center;
border-radius: 10px;
background-color: wheat;
font-size: 20px;
}
#btn-6{
height: 30px;
width: 100px;
text-align: center;
border-radius: 10px;
background-color: lightblue;
font-size: 20px;
}
#btn-62{
height: 25px;
width: 85px;
text-align: center;
border-radius: 15px;
background-color: lightcoral;
font-size: 20px;
}
1.4 页面效果
控制台npm run dev启动项目，访问服务页面http://localhost:5173/
查看页面效果
在new todo中输入新的项，点击Add todo按钮新增项
点击每项的a按钮进行移除该项
2. computed
计算属性
通过在todo列表中加入done属性，使用v-model将其绑定到复选框
创建函数hideCompleted实现切换按钮
computed() API 可以计算属性ref，ref会动态地根据其他响应式数据计算其.value
计算属性会自动跟踪其计算所使用的其他响应式状态，并将他们收集为自己的依赖
计算结果会被缓存，并只有在其依赖发生改变时才会被自动更新
2.1 script setup
script setup标签内的代码
// 7.计算属性 使用computed计算属性
let id2 = 0
const newTodo2 = ref('')
const hideCompleted = ref(false)
const todos2 = ref([
{
id2:id2++, text2:'learn Html', done:true},
{
id2:id2++, text2:'learn JavaScript', done:true},
{
id2:id2++, text2:'learn Css', done:false}
])
const filteredTodos = computed(()=>{
return hideCompleted.value?todos2.value.filter((t)=>!t.done):todos2.value
})
function addTodo2(){
todos2.value.push({
id2:id2++, text2:newTodo2.value, done:false})
newTodo2.value = ''
}
function removeTodo2(todo2){
todos2.value = todos2.value.filter((t)=>t!==todo2)
console.log("todo2:",todo2)
}
2.2 template
template标签内的代码
<!-- 7. -->
<div>
<h2>7. 计算属性 </h2>
<form @submit.prevent="addTodo2">
<input id="ipt-7" v-model="newTodo2" required placeholder="nwe todo2">
<button id="btn-7">Add todo2</button>
</form>
<ul id="u-7">
<li v-for="todo2 in filteredTodos" :key="todo2.id2">
<input type="checkbox" v-model="todo2.done">
<span :class="{done: todo2.done}">{
{ todo2.text2 }}</span>
<button id="btn-72" @click="removeTodo2(todo2)">a</button>
</li>
</ul>
<button id="btn-73" @click="hideCompleted = !hideCompleted">{
{ hideCompleted ? 'Show all' : 'Hide completed' }}</button>
</div>
2.3 style scoped
style scoped标签内的代码
/* 7. */
#u-7{
height: 400px;
width: 400px;
text-align: center;
border-radius: 20px;
background-color: lightsalmon;
font-size: 20px;
}
#ipt-7{
height: 30px;
width: 300px;
text-align: center;
border-radius: 10px;
background-color: wheat;
font-size: 20px;
}
#btn-7{
height: 30px;
width: 100px;
text-align: center;
border-radius: 10px;
background-color: lightblue;
font-size: 15px;
}
#btn-72{
height: 25px;
width: 85px;
text-align: center;
border-radius: 15px;
background-color: lightcoral;
font-size: 20px;
}
#btn-73{
height: 30px;
width: 200px;
text-align: center;
border-radius: 15px;
background-color: blueviolet;
font-size: 20px;
}
.done{
text-decoration: line-through;
}
2.4 页面效果
控制台npm run dev启动项目，访问服务页面http://localhost:5173/
查看页面效果
点击隐藏按钮Hide completed隐藏复选框勾选的项
3. 生命周期和模板引用
使用ref实现模板引用
Vue基于响应式和生命式渲染可以处理所有的dom更新，但有时需要手动操作dom，此时需要使用引用模板
引用模板即指向模板中一个dom元素的ref
在标签中添加属性名ref，属性值自定义，通过在js中引用一个属性值同名的ref变量进行引用
js中声明的ref使用null值来初始化，原因是script setup标签内容执行时dom元素还不存在，引用模板ref只能在组件挂载后访问
要在挂载后执行代码可以用onMounted()函数
被称为生命周期钩子，允许注册一个在组件的特定生命周期调用的回调函数，
钩子除了onMounted还有onUpdated、onUnmounted等
3.1 script setup
script setup标签内的代码
// 8. 声明周期和模板引用 使用ref实现模板引用，必须挂载之后访问
const pElementRef = ref(null)
//之所以使用null值初始化是因为script setup执行时dom元素还不存在，模板引用ref只能在组件挂载后访问
onMounted(()=>{
pElementRef.value.textContent = 'mounted!'
})
3.2 template
template标签内的代码
<!-- 8. -->
<div>
<h2>8. 生命周期和模板引用</h2>
<p id="p-8" ref="pElementRef">Hello</p>
</div>
3.3 style scoped
style scoped标签内的代码
/* 8. */
#p-8{
height: 30px;
width: 200px;
text-align: center;
border-radius: 15px;
background-color: olive;
font-size: 20px;
}
3.4 页面效果
控制台npm run dev启动项目，访问服务页面http://localhost:5173/
查看页面效果，在template标签中的值是Hello，但在js代码中通过挂载将值改为了mounted!
4. 代码示例
以上示例的代码已打包上传到CSDN资源库，可自行下载获取示例代码
下载地址：Vue v-for computed 生命周期和模板引用 语法示例演示代码
5. 项目demo
本文示例代码都是基于vite构建的vue3项目编写，项目demo也已上传CSDN资源库
下载地址：Vue 基于vite构建vue3项目 以及基础语法演示
下载后如想正常运行项目，需先有node环境，可根据文章开始的链接进行下载安装node环境，以及配置node环境变量
感谢阅读，祝君暴富！
原文链接: https://hanshan.blog.csdn.net//article/details/140498394