Vue初体验

vue

---

用法

1.页面上需要有一个div元素，并且给他定义id属性，是用于承载vue的内容的 2.通过双花括号将 data里面的数据给渲染(可以使用插值表达式) 3.挂载点之外的将不会被解析 4.defineProperty事件监听

object.defineProperty(target,'attr',{
   get:function(){
   },
   set:function(){
   )
}

模板语法

1. v-once 只默认绑定数据一次，后续数据有更新，不会重新改变页面

<p v-once>{{msg}}</p>

2. v-html 将文档解析出来并输出为html标签元素
3. v-bind 可以绑定属性，将属性值解析

 <p v-bind:title="msg + 'world'">我是一个屁</p>
 <button v-bind:disabled="!isOk" onclick="fn1()">登录</button>
 
 var vm = new Vue({
      el: '#app', // 设置挂载点
      data: {
        msg: 'hello',
        isOk: false, 
      }
    })

4. 可以使用 vm.$mount() 这个实例方法去挂载,相当于el

    setTimeout(() => {
        vm.$mount('#app')
     }, 5000)

5. v-cloak vue定义的属性，能解决页面加载不过来时跳动的效果

<style>
   [v-cloak] {
      display: none;
    }
  </style>
  
  <div id="app" v-cloak>

指令

都是以v-开头，用在元素的标签上面，它是借鉴angluar

v-cloak v-html v-bind ":" v-on @ v-if v-for v-model v-else v-else-if

修饰符"."

v-model.number v-model.tirm

简写

1. v-bind:href="url" 简写 :href="url"

    v-bind:herf.abc="msg"   
    v-bind:[attrname]="msg"  

2. v-on:click="fn1" 简写 @click="fn1"

列表维护

1. 使用唯一标识
   :key="item.id",最好不要用index
2. 如果在v-for的时候没有给循环的每一项设置一个唯一的标识符的话，那么后续这个数据发生变化，页面重新渲染，是完全的将之前的列表项给删掉然后重新渲染的。

数组更新

1. 以下两个方法数组变了，但是不会对页面有影响

a.直接根据下标来修改 vm.list[0]=10, b.直接修改数组长度 vm.list.length=9

2. 可以用以下方法修改

vue.set(target,index,value); vm.$set(target,index,value);

vue 不能检测对象属性的添加或删除

解决办法：

1. vue.set(target,key,value)/vm.$set(target,key,value);
2. 重新赋值