tantela-2021-07-28

Code Guide

Code Guide 前端html css 规范
html属性推荐顺序：

• class
• id, name
• data-
• src, for, type, href,value
• title, alt
• role, aria-

javascript
JavaScript 生成的标记
在 JavaScript 文件中编写标记会使内容更难找到、更难编辑和性能下降。尽可能避免它。

css
1）不要在 rgb(), rgba(), hsl(), hsla(), 或rect()values 中的逗号后包含空格。
这有助于区分多个颜色值（逗号，无空格）与多个属性值（逗号带空格）。

2）不要使用前导零作为属性值或颜色参数的前缀（例如，.5代替0.5和-.5px代替-0.5px）。

3）Declaration order

• Positioning
• Box model
• Typographic 版式
• Visual 视觉
• Misc 杂项

4）不要使用 @import
与< link >s相比，@import速度较慢，增加了额外的页面请求，并可能导致其他不可预见的问题。

5）尽可能将媒体查询置于其相关规则集附近。不要将它们全部捆绑在单独的样式表中或文档末尾。

6）Shorthand notation 速记属性

• padding
• margin
• font
• background
• border
• border-radius

7）类名称
保持类小写并使用破折号（不是下划线或驼峰式）。
破折号用作相关类中的自然中断（例如，.btn和.btn-danger）

8）选择器
保持选择器简短并努力将每个选择器中的元素数量限制为三个。

.tweet-header .username { ... }

Made with all the love in the world by @mdo.
Open sourced under MIT. Copyright 2021 @mdo.

Vue 2.x

Vue.js
菜鸟vue2

1 模板语法

v-html="..."
v-bind:class="{...}"
v-bind:href="url"
v-if="..."

<a v-on:click="doSomething"> 监听DOM事件

双向绑定
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

字符翻转
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

过滤器
<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

缩写
v-bind 缩写
<a v-bind:href="url"></a>
<a :href="url"></a>
v-on 缩写
<a v-on:click="doSomething"></a>
<a @click="doSomething"></a>

2 其他

条件、循环、计算、监听、样式绑定、事件处理器、表单、组件、自定义事件、自定义指令、
路由、过渡和动画、混入、响应接口、

3 Vue.js Ajax

v2.0 推荐使用axios
异步加载vue-resource库

Element UI 一套基于 Vue的组件库

Element UI 基于Vue

Ruby 一种面向对象程序设计脚本语言

Ruby

Rails 一个更符合实际需要而且更高效的Web开发框架

Rails

Jekyll 个简单的免费的Blog生成工具

Jekyll
配置失败，转gohugo吧

Octopress

时间停留在 1月15日，2015年，不维护了

WordPress 一款能让您建立出色网站、博客或应用程序的开源软件

太贵了，要钱

Webpack 一个前端资源加载/打包工具

webpack ./runoob.js -o ./dist