---

天行健，君子以自强不息；地势坤，君子以厚德载物。

---

每个人都有惰性，但不断学习是好好生活的根本，共勉！

---

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

---

燕山雪花大如席，片片吹落轩辕台。
——《北风行》

---

---

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环境变量

---

感谢阅读，祝君暴富！

---