vue note 01

数据绑定方式：

1.普通的文本 可以使用 “Mustache”语法 (双大括号) {{data}} 插在标签内部eg:<p>{{}}</p>

//js:
data{
   msg:'welcome to vuejs!',
   ok:true,
   number:0
}

//html:
<p>{{msg}}</p>

javascript表达式:每个绑定都只能包含单个表达式

<p>{{ok?'Yes':'No'}}</p>
<p>{{ number + 1 }}</p>
<p>{{ msg.split('').reverse().join('') }}</p>

2.v-once <p v-once>{{msg}}</p> 只会添加一次msg,当再次修改msg时，不会触发update 机制

3.v-text 插入文本(较少使用) v-html 插入html(不推荐使用)

    data{
       msg:'welcome to vuejs!',
       rawHtml:'<p>pppp</p>'
    }
    <p v-text="msg"></p>
    <p v-html="rawHtml"></p>

4.v-bind <=> ： v-on<=> @

v-bind:id='mask'
      :id='mask'

v-on:click ='showDialog'
    @click ='showDialog'

计算属性

基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。

computed: {
  now: function () {
    return Date.now()
  }
}

计算属性默认只有 getter ，也可以自定义setter属性

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也相应地会被更新。

Class 与 Style 绑定。

对象语法：

data{
    isActive:true,
    hasError:false
}

<p :class="{ active:isActive,'text-danger':hasError }" >some message</p>

---

数组语法：

//数组执行分支判断
<p :class="[isActive?activeClass:'',errorClass]"> some message </p>
//or
//数组语法中使用对象语法
<p :class="[{activeClass:isActive},errorClass]"> some message </p>

条件渲染 v-if & v-show
不能2个一起用在同一个标签
最多是 在v-if 条件里面加一个
如

<p v-if="isActive&&isShow" > some message </p>

列表渲染 v-for

items是源数据 item 是数组元素迭代别名

js:
data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
//html:
<li v-for="item in items">
{{ item[key] }}
</li>

(item, index)中的 index 是索引

<li v-for="(item, index) in items">
  {{ parentMessage }} - {{ index }} - {{ item.message }}
</li>

v-for on a <template>

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

v-for with v-if

//在循环体内判断
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

一个组件的v-for,这里么的:key是必须的。

<my-component v-for="item in items" :key="item.id"></my-component>

//为了传递迭代数据到组件里，我们要用 props
//*不自动注入 item 到组件里的原因是，因为这使得组件会与 v-for 的运作紧密耦合。在一些情况下，明确数据的来源可以使组件可重用*
<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index"
  v-bind:key="item.id"
></my-component>

! 还有一个要注意的是 当你用 的是ul ol标签的时候，通常里面允许放<li>，可以用 is="todo-item" 指向说明

<ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>

当源数据为json 格式对象时

//js:  
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
//html: (也可以提供第二个的参数为键名 key）：
<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>

要修改 vue $data里面的 源数据 检查注意事项

??修改数组方法有

#变异方法

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

vm.items.push({ message: 'Baz' });

---

#替换数组

• filter()
• concat()
• slice()

vm.items = vm.items.filter(function (item) {
  return item.message.match(/Foo/)
})
vm.items = vm.items.concat([~]);
~~

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
1.直接赋值来设置一个项或者数组长度
如：

vm.items[indexOfItem] = newValue
vm.items.length = newLength

解决方法：
使用vue 对象的set方法 或者 数组内置 方法splice

//设置一个项
// Vue.set 
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

//改变数组的长度
vm.items.splice(newLength)

??修改对象

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的

那么怎么解决? 这里Vue 对象的set方法又可以帮到我们
eg: Vue.set(object, key, value)

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

向以上 data中添加一个项 如下：

Vue.set(vm.userProfile, 'age', 27)

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：
=>

this.$set(this.userProfile, 'age', 27)

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika',
      age:27
    }
  }
})