vue学习笔记1

新公司需要用vue开发，花点时间学习一下，顺手记点笔记,从基础开始。

1 、语法

插值

{{ data}} 将数据渲染进dom系统

属性绑定

v-bind:title="data" ---- 绑定dom 属性

:title="data" 简化语法

条件与循环

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

  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>

区分 v-show

v-if 为false，节点不生成；切换成本高，适合条件较少改变。

v-show一定会生成节点，只是结果为false时候，设置display：false. 适合频繁切换。

事件绑定

<button v-on:click="reverseMessage">逆转消息</button>

简化：<button @click="reverseMessage">逆转消息</button>

表单输入和状态的双向绑定

  <input v-model="message">

2、组件化应用

<div id="app-7">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

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

3、 vue实例和生命周期

1 、实例化参数data中属性会被挂到实例上，并保持联动。

2、实例化参数data中不包含的属性不是响应式的。

3、实例会暴露出一些属性和方法，以$为前缀。

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` 改变后调用
})

生命周期跟react还是很像的，哈哈 compile template into render function 说白了就是生成了react 的render函数，

所以两者相似性不言而喻了，具体后面再好好研究，先看基础

猜你喜欢