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

Logo

前往低代码交流专区

更多推荐