博客主页 📖
标签

Vue

下的文章

Count:

计 1 篇
262
Vue3的学习 - Day 1&2
Vue3的学习 - Day 1&2
简介:当前状况因为大一上半学期学习JAVA SE,本来我也会一些前端知识,但也知识基础,正好用Vue的学习来完善一下我的前端的欠缺,后面再学习以下Springboot来作为后端,Android Studio来做移动端的开发,这样的搭配大概是比较适合现在的我的,下面是我这两天学习的笔记。Vue3 的构建Vue环境的部署方法有很多,我使用的是vite的方法,首先得安装比较新版本的nodejs,大概是在13以上,否则安装Vue的过程中会报错,我就遇到了。。完成后在bash中打开要安装Vue的目录,执行代码npm init vue@latest bash中就会出现一些Vue中的一些选项,可以自行选择进行配置构建。 构建好后依次执行以下代码就可以进入开发者模式了。 cd day2 npm install // 自动安装需要的模块,仅仅第一次运行时需要使用 npm run lint // 这个是用于修复错误的配置的 npm run dev // 以开发者模式运行 进入开发者模式后打开它给的连接,界面如下,这样就代表Vue3成功的构建了出来Vue常用语法<script> export default{ data() { return{ uName: "xuanSAMA", uAge: "19", msg: "<h2>这是v html的测试</h2>", Did: "awesome", poem: "鹏北海,凤朝阳", Datt: "id", target: "awesome" } }, methods: { ageIcrease:function(){ this.uAge++; } } } </script> <template> <! 双大括号是引入data里的属性 > <p>uName: {{ uName }}</p> <br /> <p>uAge: {{ uAge }}</p> <br /> <! @是Vue中的一个语法糖 代表的是v on 用于监听DOM事件 > <button v on:click="ageIcrease">Age +</button> <br /> <! 这是@的写法与上面的代码效果一样 > <button @click="ageIcrease">Age +</button> <br/> <! v once 这个指令代表只渲染一次 > <p v once>当前年龄: {{ uAge }}</p> <br/> <! v html 让内容以HTML的形式渲染 > <! 有被XSS攻击风险!慎用!! > <p v html="msg"></p> <br/> <! v bind 实现动态属性的指令 > <p v bind:id="Did">{{ poem }}</p> <br/> <! v bind 的语法糖是 : > <p :id="Did">又携书剑路茫茫。</p> <! 双大括号还可以在里面执行js代码 > <! 例如随便来个文字翻转 > {{ poem.split('').reverse().join('') }} <br/> <! []可以实现动态参数的效果 > <p :[Datt]='target'>测试</p> <button @click="Datt='class'">改变Datt</button> </template> <style scoped> #awesome { color: forestgreen; } .awesome { color: skyblue; } </style>Vue的计算属性与方法<script> export default{ data() { return{ testContent: 'We1c0me t0 Vue3', testNumber: 0, testObj:{ Num: 0 } } }, // computed的作用是可以将一个方法当作属性使用 // 只要依赖值不变,那么不会从新计算 computed:{ timeStamp(){ return Date.now(); // 响应式依赖,永不更新 }, // 每个computed都有getter和setter // 以上只是简写,仅仅写了getter // 以下为完整写法 reverseText: { get() { return this.testContent.split('').reverse().join(''); }, set(newValue) { //在设置或改变计算属性的时候会执行的代码 //不知道为啥,在这个代码中改变不会执行set....ma一下,后面再来看 console.log(newValue); } } }, // watch是监听器可以检测属性的变化 // 在watch中的函数名对应需要检测的属性名 watch:{ testContent(newData,oldData){// 这里代表要检测testcontent的变化 // 第一个形参表示变化后的值,第二个表示之前的值 console.log(oldData + " >" + newData); }, testNumber:{ immediate:true,// 是否初始化时就检测 handler:function(newData){ console.log("我现在是"+newData); } }, // 检测对象属性的变化 // 这貌似就是深度监听 "testObj.Num":function(newData){ console.log("我现在是"+newData); } } } </script> <template> <p>{{ timeStamp }}</p> <br> {{ reverseText }} <input type="text" v model="testContent" /> <button @click="testNumber++">{{ testNumber }}</button> <button @click="testObj.Num++">{{ testObj.Num }}</button> </template> <style> </style>条件渲染v if v show与列表渲染<script> export default { data(){ return { goods: ["农夫三拳","康帅夫","雷碧"] } } } </script> <template> <p v if="true">可以看见,并且渲染了</p> <br/> <p v if="false">看不见,并且没渲染</p> <br/> <p v show="true">可以看见,并且渲染了</p> <br/> <p v show="false">不可看见,但渲染了</p> <! 通过f12可知v show仅仅在标签上加了display为不可见的标识 > <! 但需要注意的是v if会增加性能负担适情况使用v if和v show是一个优化的点 > <! 以下是列表渲染 v for > <br/> 商品列表 <ul> <li v for="(item,key) of goods" :key="key">{{ item }}</li> </ul> <button @click="goods.push('可口可勒')">添加商品</button> <! key为什么要添加? > <! key是列表元素的唯一标识 > <! 也是Vue维护状态的参照物 > <ul> <li v for="(item,key) of goods" :key="key"><input type="checkbox" name="" id="">{{ item }}</li> </ul> </template> <style> </style>
博客主页 流光博客 欢迎来到我的博客,我会在这里分享我的学习笔记,纪录一些生活。 51统计
萌ICP备20220869号 本站已运行 1 年 148 天 5 小时 40 分 自豪地使用 Typecho 建站,并搭配 MyDiary 主题 Copyright © 2022 ~ 2024. 流光博客 All rights reserved.
打赏图
打赏博主
欢迎
搜 索
足 迹
分 类
  • 📚 学习生涯
  • 📔 日常纪录
  • 🖥️ 软件分享
  • 🗂️ 杂项
  • 🖼️ 相册