Published on

Vue

Authors

Hello world

  1. import: <script src="https://unpkg.com/vue"></script>
  2. HTML
{{ message }}
  1. javascript
var app = new Vue({
  el: '#app',
  data: {
    message: 'hello, world',
  },
})

HTML 中用一个 mount point <div id="app"> , 在 javascript 创建一个 Vue 示例。

HTML 渲染

  1. 文本插值: {{Message}}
  2. v-bind: :title e.g. <span v-bind:title="message">
  3. v-on: @ 事件处理 <button v-on:click="reverseMessage">逆转消息</button>
  4. 条件: v-if
  5. 循环: v-for
  6. 用户输入: v-model <input v-model="message">

component

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>',
})

Vue class / instance

var vm = new Vue({})

Options/*

  1. el: 锚点
  2. data: 要绑定的数据
  3. computed: 复杂属性
  4. props: 对外的属性接口,类似 C# /Android 中 view 等属性。
  5. methods: 方法

API

global config

  • silent
  • optionMergeStrategies
  • devtools
  • errorHandler
  • warnHandler
  • ignoredElements
  • keyCodes
  • performance
  • productionTip

Global API

  • Vue.extend(options)
  • Vue.nextTick([callback, context])
  • Vue.set(target, key, value)
  • Vue.delete(target, key)
  • Vue.directive(id, [definition])
  • Vue.filter(id, [definition])
  • Vue.component(id, [definition])
  • Vue.use(plugin)
  • Vue.mixin(mixin)
  • Vue.compile(template)
  • Vue.version

Options/data

  • data
  • props: A list/hash of attributes that are exposed to accept data from the parent component.
  • propsData: initial / default data for props
  • computed:

Questions

  1. what is javascript prototype?

    fdf

  2. what is javascript context this?

    The answer is short and simple: Scope pertains to the visibility of variables, and context refers to the object within which a function is executed.

javascript context/ scope/ this

  • context/ this: function

context means this keyword

Context is most often determined by how a function is invoked. When a function is called as a method of an object, this is set to the object the method is called on:

So for a global function, this refers to 'window' in browser

  • scope: variable

    • local

    • Global

    • block: let/ const

    Understanding Scope and Context in JavaScript

  • Execution Context

  • Execution stack

    The answer is short and simple: Scope pertains to the visibility of variables, and context refers to the object within which a function is executed.