前端、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基础学习: 3、JavaScript之快速入门: 4、HTML+CSS+JS学习总结:
三、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项目：
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基础 ：
SVG 在 HTML 页面：http://www.runoob.com/svg/svg-inhtml.html