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

前端、Vue.js和SVG的一些知识一、前端简介 1、什么是HTML（静态）（超文本标记语言 Hyper TextMarkup Language），HTML 是用来描述网页的一种语言。 2、CSS(层叠样式表 Cascading Style Sheets),样式定义如何显示 HTML 元素，语法为：selector {property：value} (选择符

~青萍之末~

7497人浏览 · 2017-07-16 16:01:30

~青萍之末~ · 2017-07-16 16:01:30 发布

前端、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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^