博客主页 📖
标签

前端

下的文章

Count:

计 2 篇
274
Vue3的学习 day3&day4
Vue3的学习 day3&day4
简介:kali系统的安装和使用在体验了两个多周的Linux系统之后感觉体验还不错,于是我在电脑上装了第三个系统,kali,正好这也是Debian的分支,下载下来后我发现里面集成许多渗透常用分析工具 Burp、wireshark、sqlmap还有一些我没见过的工具,这可能就是那些网络安全的大佬喜欢kali的原因吧。Vue3学习 DAY3&4模块化的使用因为Vue的模块化是目前前端的主流,所以以后的笔记都会用模块化进行。模块的引用,App.vue是vue的入口文件,和html和php中的index起着一样的效果,所以就从这里开始引入模块。Part1<script> import { RouterLink, RouterView } from 'vue router'; import Index from './components/Index.vue';//引入模块 export default { data(){ return { WebSiteName: "Home", Arr: [1,2,3] } }, components:{ Index },//这里代表元素的注册 methods:{ recChild(value){ console.log(value); } // 需要创建一个函数来接受子组件传过来的变量 } } </script> <template> <Index></Index> <! 完成上面两个步骤就可以在任意位置插入元素了 > <! 元素可以重复插入 > <Index :theName="WebSiteName" :Arr="Arr"></Index> <! 这里用v bind来绑定动态属性theName是他在子组件中的标签名字 > <index @message="recChild"></index> <! 利用v on来监听子组件传来的参数 > </template> <style> </style> 以上为App.vue部分<script> export default { data(){ return { greet: "hello", } }, // props:['theName'] // props 用于接收父组件传递过来的数据 // 以上是props用数组接受的写法 // 下面是用对象的写法 props:{ // theName:Sring // 可以用以上写法接收theName并且指定他的数据类型 // 也可以用下面的方法来设置theName的默认值 // required可以要求必须传值 theName:{ type:String, default:"Loading", required:false }, Arr:{ type:Array, default(){ return [1,1,1]; }//数组或对象设置默认值必须用函数来返回一个默认值 } }, methods:{ transportParent(){ this.$emit("message",this.greet); // $emit这个关键词可以向父组件传递参数 } } } </script> <template> <p>Hello template!</p> <! 它与 app.vue虽然是父子组件的关系,但并不能获取App.vue中的变量 > <br/> <p>{{ greet }}</p> <br/> <button @click="greet = '你好!'">Go</button> <! 这里点击Go后即可发现每个组件之间的属性是互相独立的 > <! 点击按钮只有对应的 元素的属性发生了变化 > <! vue3这样的设计可以有效的防止数据污染 > <br/> <p>{{ theName }}</p> <! 通过props传递的数据就可以直接使用了 > <! 并且这样的数据是拥有响应式的了 > <br/> <p>{{ Arr }}</p> <br/> <button @click="transportParent">Transport</button> <! 向父组件传递参数 > <br/> </template> 以上为Index文件部分插槽的使用这里分p是因为一直下去会很乱App.vue<script> import slotTest from './components/slotTest.vue' export default{ data(){ return { name:"xuanSAMA", greet: "夜深了,早些休息吧!" } }, components:{ slotTest } } </script> <template> <! <slotTest>XuanSAMA</slotTest> > <! 在插槽中可以随意添加html元素 > <slotTest> <template v slot:userName>{{ name }}</template> <template v slot:greet>{{ greet }}</template> <! 这里只能用template > </slotTest> </template> slotTest.vue<script> export default{ data(){ return{ } }, } </script> <template> <! <p>欢迎您 <slot></slot>,<br/>夜深了,早些休息吧!</p> > <! 以上示例用slot标签即可达成最简单slot效果 > <! 以下为具名插槽的使用 > <p>欢迎您 <slot name="userName">User</slot>,<br/><slot name="greet">Welcome</slot></p> <! 可将默认值写在slot中间 > </template> 组件之间的跨域传递App.vue<script> import injectionTest from "./components/injectionTest.vue" export default{ data(){ return{ testData:"this is a demo", obj:{ msg:"Hello" } } }, provide(){ return { trans:this.testData, objMsg:this.obj } }, components:{ injectionTest } } </script> <template> <! 组件之间的跨域传递 > <! 只支持向后代传递数据 > <! VUe3新增写法 > <injectionTest></injectionTest> <button @click="testData='Changed!'">responseTest</button> <! 这里可以发现发送过去的数据并不是响应式的 > <! 如果要让它支持响应式那么就需要传递一个对象 > <! 因为学过JAVA和php这样的面对对象的编程语言就知道 > <! 只有传递对象是传递的地址,因此可以达到响应式 > <button @click="obj.msg='Changed!'">objChange</button> </template> injectionTest.vue<script> export default{ data(){ return{ recData:this.trans, theMsg:this.obj } }, inject:['trans','obj'] } </script> <template> <p>{{ recData }}</p><br /> <p>{{ theMsg.msg }}</p> </template>
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 天 6 小时 25 分 自豪地使用 Typecho 建站,并搭配 MyDiary 主题 Copyright © 2022 ~ 2024. 流光博客 All rights reserved.
打赏图
打赏博主
欢迎
搜 索
足 迹
分 类
  • 📚 学习生涯
  • 📔 日常纪录
  • 🖥️ 软件分享
  • 🗂️ 杂项
  • 🖼️ 相册