Vue入门之v-for、computed、生命周期和模板引用

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

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

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

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

文章目录

Vue入门之v-for、computed、生命周期和模板引用

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

Vue入门之v-for、computed、生命周期和模板引用

文章目录

Vue入门之v-for、computed、生命周期和模板引用

1. v-for

1.1 script setup

1.2 template

1.3 style scoped

1.4 页面效果

2. computed

2.1 script setup

2.2 template

2.3 style scoped

2.4 页面效果

3. 生命周期和模板引用

3.1 script setup

3.2 template

3.3 style scoped

3.4 页面效果

4. 代码示例

5. 项目demo

目录

1. `v-for`

2. `computed`