Giters

ramwin / html-reference

veni vidi vici; master everything I had met in developing

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

htmlbootstrapcssvuevuejscheet-sheetreferencetutorial

Xiang Wang @ 2016-08-24 14:30:23

README

flex布局

bootstrap

Components 组件

其他插件

vue框架

Element

参考

模板语法

插值

  • 文本 使用Mustache的语法
<span> Message: {{ msg }}</span>
<span v-once>这个将不会发生改变: {{ msg }}</span>
  • 原始HTML
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
这样后面的rawHtml的内容会直接替换这个span
  • 特性 Mustache不能用于HTML特性上，这种情况应该使用v-bind, 如果value是null, undefined或者false就不会渲染到html特性上
<div v-bind:id="dynamicId"></div>
  • 使用JavaScript表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

缩写

  • v-bind:
    v-bind:href="url" => :ref="url"
  • v-on:
    v-on:click="doSomething" => @click="doSomething"

to be continued

  • 指令

基础

  • Vue实例

  • 侦听器

  • bind class and style

    • 绑定HTML Class

      • 对象语法 可以绑定多个，并且和原有的class属性共存
      <div v-bind:class="{active: isActive}"></div>
<div class="static"
   v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
      • 数组
      <div v-bind:class="[activeClass, errorClass]"></div>
data: {
    activeClass: 'active',
    errorClass: 'text-danger',
}
      • 绑定在组件上
      Vue.component('my-component', {
    template: '<p class="foo bar">hi</p>'
})
<my-component class="baz boo"></my-component>

    • 绑定内联样式

      • 对象语法
      <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
// 绑定到一个对象更好
<div v-bind:style="styleObject"></div>
      • 数组语法
      <div v-bind:style="[baseStyles, overridingStyles]"></div>
      • 自动添加前缀
        当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
      • 多重值
        <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>只会渲染数组中最后一个被浏览器支持的值

  • List Rendering 列表渲染

  • 事件处理

    • v-on:keyup: 用户输入文字后触发，此时v-model的数值已经变化了

  • 表单输入绑定

  • Components Basics 组件基础

    • 基础示例
      Vue.component('button-counter', {
    data: function () {
      return {
        count: 0
      }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  })
    • [ ]
    • props 
      props: ['title', 'content', 'id']
props: {
    'title': Number,
    'id': {
        type: Number, required: true,
    }
}

API

### Lifecycle Hooks 生命周期钩子
    * beforeCreate: data 和 eventwatcher 没被配置
    * created: data oberver，属性和方法运算，watch/event 回调已经配置

其他包

Elements 基础元素

Forms

Image and multimedia

  • audo
  • video

HTTP协议

CSS 样式

功能

jquery

other framework or useful repository 其他有用的框架

slidev

文档 把markdown做成PPT

npm init slidev@latest

amap api 高德地图api

Baidu Map API

Fontawesome 字体页面

测试

  • 直接使用
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<i class="fas fa-camera-retro"></i>
  • find your icons
    • delete: <i class="fas fa-minus-circle"></i>
    • plus: <i class="fas fa-plus"></i>
  • 下载到本地后使用 教程

flatpickr 没有依赖的时间选择器

not very good use daterangepicker instead

About

veni vidi vici; master everything I had met in developing

htmlbootstrapcssvuevuejscheet-sheetreferencetutorial

Languages

Language:JavaScript 92.9%Language:HTML 5.0%Language:CSS 2.0%Language:Vue 0.1%Language:Less 0.0%Language:TypeScript 0.0%Language:Shell 0.0%