营销网站建设设计,中国五大门户网站,用织梦建设网站的步骤,建设高端网站公司的目的全栈开发一条龙——前端篇 第一篇#xff1a;框架确定、ide设置与项目创建 第二篇#xff1a;介绍项目文件意义、组件结构与导入以及setup的引入。 本文为该系列的第三篇#xff0c;主要讲述Vue核心的setup语法#xff0c;同时讲解再使用了setup后如何设置响应式数据。 辅助…全栈开发一条龙——前端篇 第一篇框架确定、ide设置与项目创建 第二篇介绍项目文件意义、组件结构与导入以及setup的引入。 本文为该系列的第三篇主要讲述Vue核心的setup语法同时讲解再使用了setup后如何设置响应式数据。 辅助文档HTML标签大全实时更新 目录 一、Setup1. setup引入数据2. setup传方法3. setup与Vue2中data等的依赖4. setup语法糖 二、响应式数据设置1. ref法 创建基本类型响应式数据2. reactive方法 setup与data、method是同级所以不要忘记段后逗号。
一、Setup
setup是Vue3特有的方便设置数据和方法的api是目前Vue3工程主要使用的。是组合式Api更加方便且易于维护。
1. setup引入数据
setup(){//数据let name TTTi9erlet age 20let tel 114514return {a:name,b:age}
},return什么数据取决于模板里用不用你也可以使用传数据的快捷方式在return里你可以直接写return (name,age)这样相当于return (name name, age age)
**注意此时的name等变量不是相应式的即数据发生改变的时候不会立刻反应在屏幕上。后续会说在setup语法糖讲完之后会说。vue2data中全是相应式 **
2. setup传方法 function showTel(){alert(tel)}return {a:name,b:age,showTel}在setup块里用function定义方法然后把方法名return即可。 注意setup的返回值也可以是一个函数但是不常用知道即可下面给出一个实例
return function(){ return 函数返回测试}可以忽略所有直接在页面渲染’函数返回测试‘。
3. setup与Vue2中data等的依赖
setup与Vue2的data等是可以共存的。 setup里的数据是最早解析的所以Vue2能读取Vue3比如setup里有let a10你可以在data中使用cthis.a,是可以在模板里读取c的。
setup中的数据不能读取Vue2写法中的data中的数据 比如data里写了d:900,你不能在Vue3的setup中写let e d
总体来说Vue3向下兼容Vue2建议不要混写
4. setup语法糖
templatediv class style_testh1其他组件/h1h2姓名{{name}}/h2h2年龄: {{age}}/h2button clickshowTel查看电话/button/div
/templatescriptexport default{name : Test,//组件名}
/scriptscript setuplet name TTTi9erlet age 100let tel 114514function showTel(){alert(tel)}
/scriptstyle.style_test{background-color: rgb(72, 138, 166);box-shadow: 0 0 10px;border-radius:10px;padding: 20px;}
/style如以上代码所示我们如果要每一个返回就会很麻烦所以Vue3提供了一个setup语法糖我们用标签script setup/script来声明语法糖他会自动返回其中出现的所有内容。以上代码效果如下。 二、响应式数据设置
1. ref法 创建基本类型响应式数据 import {ref} from vuelet name ref(TTTi9er)我们先引入ref函数然后在需要相应的数据前加入ref()即可。当你用其他方法修改数据后会直接渲染在网页上。 注意这么操作之后nmae会变成类RefImpl对象其value值为你设置的值。实际上就是vue给你写了个方法让数据可以实时更新。在框架中加上ref的数据与原来的用法不变千万不要改成name.value。
但是后续的方法中你需要写.value。例子如下
script setupimport {ref} from vuelet name TTTi9erlet age ref(100)let tel 114514function showTel(){alert(tel)}function changeage_test(){age.value 1}
/scripttemplatediv class style_testh1其他组件/h1h2姓名{{name}}/h2h2年龄: {{age}}/h2button clickshowTel查看电话/buttonbutton clickchangeage_test增加年龄/button/div
/template这样你就已经把age设置为响应式变量了点击增加后可以即时渲染到屏幕上。 注意ref用于封装基本变量字符串、整数等等一般不包装对象
2. reactive方法
注意reactive方法用于包装对象。使用方法与ref类似 let person reactive({name : TTTiger,age : 19})function changeage_test(){person.age 1}templatediv class style_testh1其他组件/h1h2姓名{{person.name}}/h2h2年龄: {{person.age}}/h2button clickshowTel查看电话/buttonbutton clickchangeage_test增加年龄/button/div
/template完全一样只是把之前的.value换成 对象名.属性名 就行了,只要是对象即可哪怕是类似别表对象等也行样例如下 。 let games reactive([{id: 1, name: 我超原},{id: 2, name: 我超铲},{id: 3, name: 我超农}])function change_game(){games[0].name 原神启动}templatediv class style_testh1其他组件/h1h2姓名{{person.name}}/h2h2年龄: {{person.age}}/h2button clickshowTel查看电话/buttonbutton clickchangeage_test增加年龄/buttonulli v-forg in games :key g.id{{g.name}}/li /ulbutton clickchange_game修改第一个游戏/button/div
/template以上代码展示了用reactive响应式包裹一个对象列表操作是完全一样的。如果各位看不懂上面的结构我会实时更新一个HTML标签大全方便你理解结构。但是实际上上面的结构你多写自然就会了如果你没接触过可以直接望文生义比如这个v-for显然就是循环取出games中的元素。 注意reactive定义的对象不能再方法里给他分配新的对象而要使用Object.assign(car,new_car)
