vue学习与实践——后端猿采坑记

本周帮助公司进行后台项目的前端改造,之前采用的是后端模板渲染页面的方式。该方式的优点是后端工程师开发简便,易于上手,前端开发成本低。但他同时也有着不小的局限,比如前后端无法分离,无法实现页面的局部刷新,无法进行对数据进行双向绑定等,所以本周我接下了这个有趣又有挑战的新任务。

之前的工作经历中有一段的前端开发经验,所以本次开发开始前没有太多的抵触心理,按套路先打开vue.js的文档,简单的通读一下便开始上手了。

下面附上官网链接

https://cn.vuejs.org/v2/guide/index.html

第一步,引入Vue。

官网提供了引入Vue的很多种方式,比如现在比较流行的npm包管理,webpack等,我这里因为是只做vue的使用所以,简单粗暴的使用了<script>的标签引入方式。 这个版本包含了Vue的报错与提示 。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

线上版本推荐使用Vue.min,这个版本更小,但是没有包含报错信息。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

引入js文件之后,我们就可以投入到vue.js的开发了。 根据官网的指引首先进行vue的声明,也就是实例化。

(更多…)

CSS样式小知识(一)

CSS全称为“层叠样式表 (Cascading Style Sheets)

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如下面代码:

<link href=”base.css” rel=”stylesheet” type=”text/css” />

更有趣的是伪类选择符,为什么叫做伪类选择符,它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

而如果三种样式同时出现它们的优先级又是怎样的呢?

内联式 > 嵌入式 > 外部式

(更多…)