vue.js学习总结

1. 创建Vue实例

var vm = new Vue({
    // options

})

1. data 对象

var student ={"name":"mifeng"}
var vm = new Vue({
    data: student,

})

// vm equivalent to the following:

var vm = new Vue({
    // define data object
    data: {
        "name":"mifeng"
    },
})

1) 定义vm 这个实例后，Vue的响应系统中加入了data 对象中所有的属性, vm.name = “jjf” 及 student.name= “jjf”都会导致视图重新渲染

2) Vue 实例还暴露了一些有用的实例属性与方法

1. $data
   
   1. $el
   2. $ watch

var student ={"name":"mifeng"}
var vm = new Vue({
    el: '#example',

    // define data object
    data: {
        "name":"mifeng"
    },

})

　vm.$el = document.getElemetById(‘example’) //true

vm.$data === student // => true

// $watch 是一个实例方法 vm.$watch(‘a’, function (newValue, oldValue) {
// 这个回调将在 vm.a 改变后调用
})

1. 实例生命周期钩子

var app5 = new Vue({
        el: '#app-5',
        data: {
            message: 'Hello Vue.js!',
            selected: "",
            items: [1,2,3],
            name: "mifeng"
        },
        created: function(){
            alert(" vue instance created"+ this.name+ new Date());
        },
        mounted: function () {
            alert("mouted time:"+ new Date());
        },
        watch: {
            items : function(){
                alert("alert changing items");
            },
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            },
            getTablesByDb: function(e){ alert("alert")},
            info:function($event){alert("info is working")}
        }
    })

1. 模版

   1） 文本插值-“Mustache”语法 (双大括号) 的文本插值

<span>Message: {{ msg }}</span>

2）指令

1. 指令 (Directives) 是带有 v- 前缀的特殊特性

<p v-if="seen">现在你看到我了</p>

3）. 带参数的指令

<a v-bind:href="url">...</a>
v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

4） 用 JavaScript 表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

1. 计算属性computed

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

1). 当改变message ,然后再vm.reversedMessage ,发现已经执行了split 和reverse 这两个操作

1. 过滤器

用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：（见下）

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

可以定义多个filter：

{{ message | filterA | filterB }}

1. DOM 渲染

1) v-for

(1). 一段取值范围的 v-for

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

(2) v-for on a

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>