Vue计算属性指令集补充v-bind:title='message'为该元素节点绑定title属性，数据是message

计算属性

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例   所以不能用箭头函数，因为箭头函数会绑定父级作用于的上下文
      return this.message.split('').reverse().join('')
    }
  }
})

指令集补充

v-bind:title='message' 为该元素节点绑定title属性，数据是message
v-for:todo in todos 遍历todos
v-if='seen' 根据seen来判断是否渲染节点
v-on:onClick='test' 为节点元素绑定相应的方法
v-model='message' 实现表单输入和应用之间的双向绑定
v-once 那么将不会再改变
v-html='rawHtml' 会输出真正的HTML

缩写

v-on @
v-bind :

v-if和v-show比较

v-show只是改变display属性
所以频繁切换用v-show，很少改变就用v-if

关于v-for中in和of

遍历对象时(value,key)key就是索引

修改数组和对象不能直接进行的操作

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

修改数组的办法

vm.data.splice()
Vue.set(vm.items,indexOfItem,newValue) === vm.$set(vm.items,indexOfItem,newValue)

修改对象的办法

Vue.set(object, key, value) === vm.$set(object, key, value) //有改无加的原则
vm.data = Object.assign({},vm.data,newObj)

侦听器

watch: {
        fullName: function(){
            console.log(1);
        }
    }

监听器就是监听属性变化的回调函数

组件化

全局组件

Vue.component('todoList',{
    props:['todo'],
    template:'<li>{{todo.text}}</li>'
})

局部组件

Vue({
    components: {
        'test-tem': {
            props: ['content','index'],
            template:'<li @click="handleClickComponent">{{content}}</li>',
            methods: {
                handleClickComponent: function(){
                    this.$emit('delete',this.index)
                }
            }
        }
    }
})

文末有个小例子

暴露的实例和属性

vm就是Vue创建的实例

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

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

一个总结的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <input v-model="message"/>
        <button @click="handleSubmit">提交</button>
        <ul>
            <test-tem 
                v-for="(item,index) of list"
                :key="index"
                :content="item"
                :index="index"
                @delete="handleDelete"
            >
            </test-tem>
        </ul>
    </div>
    <script>
        const component = {
            props: ['content','index'],
            template:'<li @click="handleClickComponent">{{content}}</li>',
            methods: {
                handleClickComponent: function(){
                    this.$emit('delete',this.index)
                }
            }
        }
        const vue = new Vue({
            el: '#root',
            data: {
                message: 'hello world',
                list: []
            },
            methods: {
                handleSubmit: function (){
                    this.list.push(this.message)
                    this.message = ''
                },
                handleDelete: function (index){
                    this.list.splice(index,1)
                }
            },
            components: {
                'test-tem': component
            },
            computed: { //计算属性来动态计算属性
                full: function(){
                    return this.list.join('-')
                }
            },
            watch: { // 监听器监听full的变化
                list: function(){
                    console.log(this.full);
                }
            }
        })
    </script>
</body>
</html>