vue笔记

 

new Vue({
        el: '#app-5',
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })

方法内的this指向vue实例。而且组件中上下文与vue实例是相互关联的,data和methods对象里的属性会被添加到vue实例上了:

常见指令

<div id="app">{{ message }}</div> :文本输出
<span v-bind:title="message">  :message单向绑定到title属性上(或其他任意名字的自定义属性)
<p v-if="seen">:移除或插入元素(和ng-if一样,不保留元素的状态)
<li v-for="todo in todos">{{ todo.text }}</li> :for循环
<button v-on:click="reverseMessage">绑定点击事件</button>
<input v-model="message">:双向绑定

其中bind和on有以下的简写形式

<a @click="doSomething"></a>
<a :href="url"></a>

一个实例对象类似ng中的scope对象,也有一样的watch方法。

vm.$watch('a', function (newValue, oldValue) {
  // 此回调函数将在 `vm.a` 改变后调用
})

但很不同的是,ng中允许动态添加属性,而往vue上动态添加属性,则没有双向绑定的性质。vue实例创建时就设置好了对应属性的动态性,后续再添加进去的没有这个性质,所以后续可能用到的属性,就先放一个空值上去占位

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

通过vm操作的属性,实际是操作data对象(如果字段字段匹配的话):

// data 对象
var data = { a: 1 }
// 此对象将会添加到 Vue 实例上
var vm = new Vue({
  data: data
})

vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3

可见,只要把data抽出来,可实现两个组件共用数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>123</title>
    <script src="https://unpkg.com/vue"></script>
<body>
<div id="c1">
    {{msg}} <br>
    <input type="text" v-model="msg">
</div>
<div id="c2">{{msg}}</div>

<script>
    var common = {
        msg:"",
    };
    new Vue({
        el: '#c1',
        data: common
    });
    new Vue({
        el: '#c2',
        data: common
    });
</script>
</body>
</html>

模板

<span>Message: {{ msg }}</span>
<span v-once>这里的值永远不会改变:{{ msg }}</span>

前者一直存在动态绑定的性质,而后者仅仅绑定一次,以节省消耗,这种思路对应ng中一个库bindonce,也是实现类似的功能。

 

和ng一样,html中的各种表达式都是可以正确执行的,都无法执行流程控制语句

{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

computed和method

如何时刻保持两个数据的关联?

1.使用表达式 ,如{{x*2+1}}

2.使用computed,可以改善第一种方法中导致html页面逻辑混乱的问题

3.通过函数调用,将表达式作为返回值返回。

2和3的区别是:

  3始终会导致表达式执行,不管表达式的值有没有发生变化。执行的时机是重新渲染的时候

  2仅在相关联的数据被修改时发生变化时才会被调用(别人通知他,他才去执行),否则读取上次缓存的值,而不去执行表达式

4.使用watch,watch有两种写法

watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
vm.$watch('a', function (newValue, oldValue) {
  // 此回调函数将在 `vm.a` 改变后调用
})

watch和computed相比

  watch只能监视一个值的变化,而computed可以监视多个值的变化,只要其中一个发生变化(有收到通知),表达式的结果就会不同;

  watch等待某个值发生变化后,执行某些异步操作,然后再修改数据。这是computed无法做到的

 

posted @ 2017-11-02 21:30  HelloHello233  阅读(147)  评论(0编辑  收藏  举报