前端、Vue.js和SVG的一些知识

来源：互联网发布：荆州网络电视垄上行编辑：程序博客网时间：2024/06/05 22:42

前端、Vue.js和SVG的一些知识

一、前端简介

1、什么是HTML（静态）（超文本标记语言 Hyper Text Markup Language），HTML 是用来描述网页的一种语言。

2、CSS(层叠样式表 Cascading StyleSheets),样式定义如何显示 HTML 元素，语法为：selector {property：value} (选择符 {属性：值})
3、JavaScript（动态）是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript设置网页的行为。一个很经典的例子是说HTML就像一个人的骨骼、器官，而CSS就是人的皮肤，有了这两样也就构成了一个植物人了，加上javascript这个植物人就可以对外界刺激做出反应，可以思考、运动、可以给自己整容化妆（改变CSS）等等，成为一个活生生的人。

如果说HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+CSS是植物人，没Javascript、CSS是个毁容的植物人。如果说HTML是建筑师，CSS就是干装修的，Javascript是魔术师。

怎么把这三者联系在一起呢，当然得通过网页的肉身HTML,HTML是一直描述语言，它是对着浏览器描述自己的，那么它通常怎么描述具体的这个网页呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>网页标题</title><link rel="stylesheet" type="text/css" href="mycss.css" /><script type="text/javascript" src="myjs.js"></script></head><body><p>这是一个段落</p></body></html>

这是一个最简单的HTML文档，文档说的是，浏览器啊，我是遵循W3C标准XHTML1.0过渡版本规范（文件类型声明），我采用的编码是utf-8,我的标题是“网页标题”，描述我的模样的样式表是我同目录的mycss.css文件，与我有关的javascript代码在我同级的myks.js文件中，我的内容有一个段落，段落的内容是“这是一个段落”。

二、前端的一些学习资料

1、W3Cschool在线教程：http://www.w3school.com.cn/index.html
2、html+css+js基础学习:http://blog.csdn.net/huangxiaominglipeng/article/details/52190119
3、JavaScript之快速入门:http://blog.csdn.net/fu_zk/article/details/23375093
4、HTML+CSS+JS学习总结:http://www.cnblogs.com/ysw-go/p/5491990.html

三、Vue.js简介

Vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

四、使用Vue.js中遇到的一些问题

1、生成一个 Vue 应用

<div id="app">  {{ message }}</div>var app = new Vue({  el: '#app',  data: {    message: 'Hello Vue!'  }  methods:{/*声明一些方法*/  },})

2、显示中文，加上一句：

<meta charset="utf-8">

3、显示文字：

在html中显示：

<div style="left":100px;position:absolute;top:100px>文字</div>

在SVG部分显示：

    <text id="ab" stroke="0" transform="matrix(0.4776078672464506,0,0,0.6652687171939449,44.486038340323056,

72.79056143030316) " xml:space="preserve" text-anchor="middle" font-family="SimHei" font-size="56" y="140"

x="1250" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="0">文字</text>

4、随意放置button等控件:

 <button @click="click" style="position:absolute; left:500; top:800;">move</button>

5、在HTML中嵌入SVG，模板，方法，点击事件和定时器的运用:

<script type="text/x-template" id="abc">  <g>/*嵌入SVG代码*/  ...  </g></script><div id="demo"><svg>/*引用SVG代码，可重复引用，只需改变某些参数，可以简化程序*/  <abc v-bind:x='posx' :y='posy'></abc></svg>  <button @click="click" style="position:absolute; left:500; top:800;">move</button></div><script>Vue.component('abc', {/*定义组件*/  props:{    x:Number,    y:Number  },  template: '#abc',/*运用模板*/})</script>var app=new Vue({  el: '#demo',  data: {    posx:1950,    posy:400,  },  methods:{    click:function(e){/*点击事件*/    var timesRun = 0;    this.posx=50;    var interval = setInterval(function(){/*设置定时器*/      timesRun += 1;      var num1 = Math.random()*2000;/*产生随机数*/      var num2 = Math.random()*2000;      app.posx=num1;      app.posy=num2;      if(app.timesRun == 60){/*使用变量时加类型名*/        clearInterval(interval);/*计数完成后清除定时器*/      }    }, 1000);    },  }})

6、查看输出信息:

console.log("this.value");

五、Vue.js的一些学习资料

1、Vue.js入门：http://aicoder.com/vue/preview/all.html#906

2、Vue.js官网：https://cn.vuejs.org/

3、VsCode新建VueJs项目：http://blog.csdn.net/Marian96/article/details/73603844
4、Vue.js-SVG组件：https://github.com/cenkai88/vue-svg-icon

六、HTML与SVG

SVG是Scalable Vector Graphics的缩写,即缩放式矢量图形;
优点:
1、使用编辑器即可编辑图形（可以用Inkscape编辑器打开）;
2、基于XML,SVG图形可以被很容易的搜索,脚本化和压缩;
3、缩放不影响图形质量;
4、支持随意打印成需要的尺寸;
5、SVG开源标准;

劣势:
1、比正常格式图片体积大;
2、即使小图片也可能很大;

一些学习资料：

HTML--SVG基础：http://www.cnblogs.com/yizihan/p/4585396.html
SVG 在 HTML 页面：http://www.runoob.com/svg/svg-inhtml.html

阅读全文

0 0