Vue

InstanceVue 2
参考 Vue Doc
Vue CLI
精细化运营规则编辑
精细化运营规则增加
light postman
script引用 <script src="https://vuejs.org/js/vue.min.js"></script>
npm script构建 $npm install vue
import Vue from 'vue'
实例 var vm = new Vue({
  el: '#app',
  data: obj
})

var vm = new Vue().$mount("#app") // 挂载到一个元素上
数据属性 var data = { a: 1 }

var vm = new Vue({
  data: data
})

// 引用同一个地址
vm.a == data.a // => true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
实例属性/方法
它们都有前缀 $
vm.$data === data // => true
vm.$el === document.getElementById('app') // => true
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})
vm.$listeners v-on="$listeners"
vm.$attrs v-bind="$attrs"
vm.$refs
vm.$parent
vm.$options
初始化勾子,一个实例被创建之后执行代码 new Vue({
...
  created: function () {
  }
})
$nextTick ?
TemplateVue 2
插文本值 <span>Message: {{ msg }}</span>
<span v-text="'Message: '+msg"></span>
JavaScript 表达式 {{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
{{ option.text }}
{{ dimensionOptions[+d_k+1]["text"] }}
<span v-if="packSize" v-html="'('+packSize+')'"><span>
插Raw HTML值 <span>Message: <span v-html="rawHtml"></span></span>
XSS警告:绝不要对用户提供的内容使用HTML插值
var rawHtml="</script><script>alert(1);</script><script>";
插Attribute值指令 v-bind:attr 可简写成 :attr
v-bind:id="dynamicId"
v-bind:class="'level'+dv_level"
v-bind:disabled="isButtonDisabled"// 如果 isButtonDisabled 的值是 null/undefined/false,则 disabled 不会被包含在渲染出来的button元素中
其它Directives(指令) v-once:一次性地插值,当数据改变时,插值处的内容不会更新
自定义指令 -
Filters 过滤器 {{ message | filterA | filterB }}

filters: {
  capitalize: function (value) {
  }
}
计算属性computed
模板内的表达式放入太多的逻辑会让模板过重且难以维护
Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({
  ...
  computed: {
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter
computed: {
  fullName: {
    get: function () { // getter
      return this.firstName + ' ' + this.lastName
    },
    set: function (newValue) { // setter
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
方法method
我们可以通过在表达式中调用方法来达到上面同样的效果,
不同的是计算属性是基于它们的依赖进行缓存的, 只在相关依赖发生改变时它们才会重新求值, 而方法会在每次重渲染时重新计算
Computed reversed message: "{{ reversedMessage() }}"

var vm = new Vue({
  ...
  methods: {
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
侦听属性watch
观察和响应 Vue 实例上的数据变动,并执行回调函数
watch: {
  firstName: function (val) {
    this.fullName = val + ' ' + this.lastName
  },
  lastName: function (val) {
    this.fullName = this.firstName + ' ' + val
  }
}
效果不如computed属性
computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}
更适合侦听数据变化时执行异步或开销较大的操作,双向绑定的数据
?
EventVue 2
事件监听 v-on:eventType 可简写为@eventType
v-on:click="download()"
$event mousedown="startWrite($event)"
事件修饰符 <form v-on:submit.prevent="onSubmit"> .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
@click.once 点击事件只触发一次
@click.stop.prevent 阻止冒泡并阻止默认事件
按键事件修饰符 .alt/.13(keyCode` 是 13)/.enter/.space/.up/.delete/.esc/.tab/.ctrl
<input @keyup.enter="submit">
@keyup.alt.enter 输入后按alt+enter 触发
双向绑定 <p>{{ message }}</p> <input v-model="message">
你改变input中的值,vue对象中message值改变,那么p中的message值改变
表单修饰符 v-model.lazy: 在“change”时而非“input”时更新
v-model.number: 将用户输入转为数值
v-model.trim: 过滤首尾空白字符
?
Control flowVue 2
条件渲染 <h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
v-else-if
v-show // 元素必会渲染, 只是改变CSS的display, 如需频繁切换用v-show, 一次性用v-if, v-show对设置display:none的元素不起作用
列表渲染 <li v-for="(item,index) in items"> {{ item.message }} </li>
v-for="(value, key, index) in object"
ComPonentVue 2
注册组件
大型应用中,有必要将整个应用程序划分为组件,以使开发更易管理
Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
一个组件的data选项必须是一个函数
使用组件 <ol> <todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id">
</todo-item>
</ol>
现在我们为每个 todo-item 提供 todo 对象 我们也需要为每个组件提供一个“key”
组件传值: :{attr}
组件收值: props
Built-in 组件 component动态组件
transitions组件
transitions-group组件
keep-alive组件
动态组件 <component :is="card.component" :type="card.type" />
v-slot 插槽 -
$emit 父组件监听
<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1"></blog-post>
子组件触发
<button v-on:click="$emit('enlarge-text')">Enlarge Text<button>
CLIVue 2
文档
Install $npm install -g @vue/cli
$vue -V
基于webpack
创建一个项目 $vue create vueapp
路由 Doc
$npm install vue-router
状态维护 Doc
API请求 Doc
$npm install axios
element UI Doc
$npm i element-ui -S
$npm install babel-plugin-component -D # 按需引入

Error:

IE 9 v-for 错误: vue论坛 Vue2.5.16存在纯IE9下v-for的兼容问题(在兼容模式IE9下是没问题的),升级到最新稳定版本2.5.21就没事

SINCE 2018