学习记录:2023.4.28

这篇具有很好参考价值的文章主要介绍了学习记录:2023.4.28。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue

1、SVG学习:

  • 百度百科:SVG是可缩放矢量图形,是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来观看。
  • 可以直接在HTML中使用
<body>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="cricle_my">
        <!-- cx、cy:图形中心所在位置;r:圆的半径;stroke:图形线的颜色;
            stroke-width:图形线的宽度;fill:封闭图形的填充色 -->
        <circle cx="250" cy="250" r="50" stroke="black" stroke-width="2" fill="red" />
    </svg>
</body>
<style>
    .cricle_my {
        height: 500px;
        width: 500px;
    }
</style>

学习记录:2023.4.28

xmlns是命名空间,不了解XML的可能不知道是什么意思,无所谓,这个参数是固定的,照着写就行了。

  • 可以单独建立SVG文件,HTML使用标签引入
    • 建立SVG文件:
      学习记录:2023.4.28
    • 在HTML通过标签引入
      学习记录:2023.4.28
    • 运行结果:
      学习记录:2023.4.28
  • 基础形状标签:
    • 矩形 :<rect width="300" height="100" fill=rgb(0,0,255) stroke-width=1 stroke=rgb(0,0,0)/>
      • 样式的设置也非常简单,和CSS的行内样式表一样,属性名也都基本和在HTML中使用CSS时相同,目前所用到的唯一不同的是矩形圆角用rx和ry这两个属性进行设置。
    • 圆形:<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
      • cx和cy定义圆心的位置,不设置的话就是(0,0),r是半径。
    • 椭圆:<ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>
      • 椭圆跟圆的区别是椭圆有长轴和短轴,所以有两个属性rx和ry分别表示水平轴和垂直轴的长度
    • 直线:<line x1="0" y1="0" x2="200" y2="200"/>
      • 直线很简单,用两组(x,y)坐标分别设置起点和终点即可。
    • 折线:<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"/>
      • 折线其实也不复杂,就比直线多定义几个点而已,注意每组点之间用空格隔开而不是分号。
    • 多边形:<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
      学习记录:2023.4.28
      • 多边形稍微复杂一点点,它跟折线很像,也是定义一些点,只不过最后一个点会和第一个点连起来,形成一个封闭图形。
      • 关键在于fill-rule属性,该属性用来如何判断画布上的某区域是否属于该图形“内部”(内部区域将被填充),当然,对三角形或矩形这种路径没有交叉的简单图形,不需要使用该属性,下面的例子是一个五角星。
        • fill-rule默认是nonzero,它的规则就是要判断一个点是否在图形内,从该点作任意方向的一条射线,然后检测射线与图形路径的交点情况。从0开始计数,路径从左向右穿过射线则计数加1,从右向左穿过射线则计数减1。得出计数结果后,如果结果是0,则认为点在图形外部,否则认为在内部。
        • fill-rule的另一个值是evenodd,也是做射线,但是做完之后数和图形路径的交点个数,奇数就认为是在内部,偶数就认为在外部。所以将上面代码中的fill-rule改成evenodd后就变成了下面的效果。
        • <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
          学习记录:2023.4.28
    • 路径:路径和折线的区别在于折线是用直线把点连起来,而路径可以通过参数绘制出光滑的曲线。路径可以实现折线的效果,但折线却并不能替代路径。
      <path d="M 0 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
      学习记录:2023.4.28
      • 参数如下:可以用小写字母,但是含义不一样,大写表示绝对绝对定位,而小写表示相对定位。
        • M = moveto 起始
        • L = lineto 连线
        • H = horizontal lineto 水平线
        • V = vertical lineto 垂直线
        • C = curveto 曲线,三次贝塞尔曲线
        • S = smooth curveto 也是曲线,三次贝塞尔曲线
        • Q = quadratic Bézier curve 二次贝塞尔曲线
        • T = smooth quadratic Bézier curveto 二次贝塞尔曲线
        • A = elliptical Arc 椭圆弧
        • Z = closepath 闭合(从最后一个点连直线到起始点)
  • 文本标签:基本用法很简单,和HTML一样在开始和结束标签中间写文本就行。
    • 子文本
<text x="10" y="20" style="fill:rgb(0, 174, 255);">兄弟:
    <tspan x="10" y="45">菜鸡程序员</tspan>
    <tspan x="10" y="70">正在努力中</tspan>
</text>

学习记录:2023.4.28
每个 和和 一样,单独占一行,而且可以有自己的样式。但是必须包在 标签内,不能单独用。

  • 旋转文字
<text x="10" y="20" style="fill:rgb(0, 174, 255);">兄弟:
    <tspan x="10" y="45">菜鸡程序员</tspan>
    <tspan x="10" y="70">正在努力中</tspan>
</text>
<text x="10" y="45" transform="rotate(90 20,40)" style="fill: red;">正在努力中</text>

学习记录:2023.4.28

rotate中的三个参数分别是顺时针旋转的度数、垂直、水平平移的距离(正值表示向上、向右)

  • 文字沿路径
    定义一条路径,然后通过textPath标签进行设置即可
<defs>
    <path id="path1" d="M 0 100 q 100 80 200 0" stroke="blue" stroke-width="5" fill="none" />
</defs>
<text x="10" y="100" style="fill:red;">
    <textPath xlink:href="#path1">祝你天天开心,都有好心情</textPath>
</text>

学习记录:2023.4.28文章来源地址https://www.toymoban.com/news/detail-430248.html

2、watch监听:

  • 几种方法:
    • 通过 watch 监听 data 数据的变化
watch: {
    data(val, value) {
        
    }
}
  • 通过 watch 监听 list 数据的变化(使用深度监听)
data() {
    return {
        list: {
            'id': 1,
            'type': 0
        },
        number: 0
    }
},
watch: {
    list: {
        handler(newVal) {
            this.number++
        },
        deep: true
    }
}
  • 通过 watch 监听 data 数据的变化
watch: {
    data: 'change' // 值可以为methods的方法名
},
methods: {
    change(curVal,oldVal){
   
  }
}
  • watch中的immediate、handler和deep属性:
    • immediate 和 handler:
      • 使用watch时有一个特点,就是当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
    • deep
      • 当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听。
      • 设置deep:true则可以监听到 list.id 的变化,此时会给 list 的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行 handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性
data() {
    return {
        list: {
            'id': 1,
            'type': 0
        }
    }
},
watch: {
    'list.id': {  //只会给对象的某个特定的属性加监听器
        handler(newVal, oldVal) {
             ......
        },
    deep: true
    }    
}

3、< g>标签:

  • 容器标签
  • 分组标签
    详解

到了这里,关于学习记录:2023.4.28的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 创建个人百度百科需要什么条件?

    互联网时代,创建百度百科词条可以给个人带来更多的曝光和展现,相当于一个镀金的网络名片,人人都想上百度百科,但并不是人人都能创建上去的。 个人百度百科词条的创建需要满足一定的条件,今天 伯乐网络传媒 就来给大家聊聊这个话题,看你到底能不能上百度百科

    2024年04月16日
    浏览(40)
  • 公司创建百度百科需要哪些内容?

    一个公司或是一个品牌想要让自己更有身份,更有知名度,更有含金量,百度百科词条是必不可少的。通过百度百科展示公司的详细信息,有助于增强用户对公司的信任感,提高企业形象。通过百度百科展示公司的发展历程、领导团队、企业荣誉等,可以彰显公司的实力和行

    2024年02月03日
    浏览(36)
  • (学习日记)2023.04.28

    写在前面: 由于时间的不足与学习的碎片化,写博客变得有些奢侈。 但是对于记录学习(忘了以后能快速复习)的渴望一天天变得强烈。 既然如此 不如以天为单位,以时间为顺序,仅仅将博客当做一个知识学习的目录,记录笔者认为最通俗、最有帮助的资料,并尽量总结几

    2024年02月07日
    浏览(40)
  • 创建一个简易百度百科词条的方法!

    百度百科作为中国最大的中文百科全书,拥有着广泛的用户群体和权威性。对于许多人来说,创建一个百度百科词条是一种展示自己和宣传自己的有效方式。所以越来越多的人都想要上百度百科,百度百科词条的创建是一大难关,今天伯乐网络传媒就来给大家分享创建一个简

    2024年02月21日
    浏览(45)
  • 明星艺人类的百度百科怎么创建 ?

    明星艺人们的知名度对于其事业的成功至关重要,而作为国内最大的中文百科全书网站,百度百科成为了人们获取信息的重要来源。一线明星当然百科不用自己操心,平台和网友就给维护了,但是刚刚走红的明星艺人应提早布局百科词条,让粉丝搜索可以找到自己的百科,全

    2024年02月08日
    浏览(56)
  • 什么原因导致百度百科建立一直审核不通过?

    百科词条对网络营销实在是太重要了,不管是个人还是企业想在网上开展业务,都必要建立百科词条。自己动手编辑百科词条,搞个几十次也审核不过的情况比比皆是。 为什么百度百科总是审核不通过?百度官方发表过声明表示百度百科词条是人人都可以编辑的,并且都是免

    2024年02月19日
    浏览(41)
  • 小马识途分享百度百科收录词条的规则

    百度百科词条是人人都可以编辑的,并且都是免费创建,但是自己创建百科词条往往审核不通过,一般企业会把这项任务委托给有经验的营销团队。这里小马识途营销顾问分享一下百度百科收录词条的规则。 百度百科收录规则主要分为:规范词条名、客观真实、来源可查证、

    2024年02月16日
    浏览(41)
  • QGIS3.28的二次开发九:添加矢量要素

    对矢量要素的编辑是 GIS 软件很重要的功能点之一,也是最难实现的功能点之一。编辑矢量要素涉及到很多方面的考虑,包括且不限于矢量要素的几何类型,拓扑关系,构成要素的节点的增删改,编辑会话 (session) 的启动、回溯和提交,要素属性的增删改等。本文不会也不可能

    2024年02月12日
    浏览(44)
  • Selenium获取百度百科旅游景点的InfoBox消息盒

      前面我讲述过如何通过BeautifulSoup获取维基百科的消息盒,同样可以通过Spider获取网站内容,最近学习了Selenium+Phantomjs后,准备利用它们获取百度百科的旅游景点消息盒(InfoBox),这也是毕业设计实体对齐和属性的对齐的语料库前期准备工作。希望文章对你有所帮助~ ​​​

    2024年02月08日
    浏览(41)
  • Cadence Allegro 17.4学习记录开始28-PCB Editor 17.4软件PCB中蛇形等长规则添加和设置

    Allegro中设置等长有三种方法: 直接等长法,模型添加法,pin Pair添加法 只能用于点对点等长 第一、选择命令 第二,进入设置界面 需要点对点等长的线,需要创建一个Group, 然后选择需要等长的线,点击右键,直接创建,Match Group 第三、设置一个名称,方便记住,看懂,点

    2024年02月16日
    浏览(56)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包