摘要:
尚硅谷视频链接 计算属性:算出一个ref定义的响应式数据 定义只读的计算属性 let fullName = computed(()=>{ return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' 阅读全文
摘要:
尚硅谷视频教程 响应式数据 vue2中,写在data()里的数据自动成为响应式数据 vue3定义响应式数据,使用ref()或reactive() 什么是响应式数据:数据改变时。页面随之变化,即为响应式数据 ref() 创建基本类型的响应式数据 首先引入ref import { ref } from 阅读全文
摘要:
学习教程-尚硅谷视频 将原vue2的格式改为vue3 使用setup 要点: this在vue3中被弱化,setup函数中不能使用this 定义数据时,如果不是响应式的(暂时还不是很理解响应式),不会触发页面的变化 vue3支持一个标签直接写多次,如 <template> <Person/> <Pe 阅读全文
摘要:
学习教程 使用 v-for 指令来渲染一个基于源数组的列表 <ul> <li v-for="todo in todos" :key="todo.id"> {{ todo.text }} </li> </ul> 更新列表的方式1(添加元素) todos.value.push(newTodo) 更新列表 阅读全文
摘要:
使用教程 使用 v-if , v-else 指令来有条件地渲染元素: 如下例,当 awesome 值为真值 (Truthy) 时渲染第一个 h1 ,否则渲染第二个 h1 <h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1> 阅读全文
摘要:
学习教程 同时使用 v-bind 和 v-on 来在表单的输入元素上创建双向绑定: <input :value="text" @input="onInput"> 在文本框里输入,同时更新 里的文本。实现如下 <script setup> import { ref } from 'vue' const 阅读全文
摘要:
教程链接 使用 v-on 指令监听 DOM 事件 <button v-on:click="increment">{{ count }}</button> 简写语法 <button @click="increment">{{ count }}</button> <script setup> impor 阅读全文
摘要:
学习教程-官方教程 在 Vue 中,mustache 语法 (即双大括号) 只能用于文本插值。为了给 attribute 绑定一个动态值,需要使用 v-bind 指令: <div v-bind:id="dynamicId"></div> v-bind 专门的简写语法: <div :id="dynam 阅读全文
摘要:
尚硅谷视频教程 main.ts import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') App.vue 使用vue2语法 <template> <!-- html --> <di 阅读全文
摘要:
尚硅谷vue3+Typescript教程 安装node.js 安装教程 创建项目 npm create vue@latest 运行项目 npm run dev 出现报错“'vite' 不是内部或外部命令,也不是可运行的程序或批处理文件。” 处理方式 安装依赖npm i .vue文件结构 <templ 阅读全文