vue2 学习笔记

> 慢慢增加，慢慢从有道迁过来 #### 绑定和渲染 1. 数据绑定 > { {message}}

只绑定一次 { {*message}} 2. 双向绑定 > { {message}} 3. 绑定表达式 > { {message?message:”init data”}} 4. 绑定HTML标签 >

5. v-show(操作的是样式，不支持template) >

hello

6. v-if(操作的是DOM) >

world

7. v-else(跟在v-if或v-else后面) 8. v-for >

• { {item}}
• { {index}}{ {item}}
• { { index }}. { { key }} : { { value }}
  1. v-bind
     

     link

  实例方法

  1. 在实例创建后，挂载以前不存在的属性，是不会刷新视图的
  2. vm.$el–>是一个HTML元素节点，即vm的el属性
  3. vm.$data–>可以直接更改对象数据
  4. vm.$watch()–>监听数据变化

  生命周期属性

  1. created -> 先实例化，在实例化后(检测el)
  2. vm.$mount('#app') -> 手动挂载实例
  3. beforeCompile -> 开始编译之前
  4. compiled -> 编译完成之后
  5. ready -> 插入文档后
  6. vm.$destroy() -> 手动销毁实例
  7. beforeDestroy -> 将要销毁
  8. destroyed -> 销毁实例

  计算属性

  computed:{
      sum:function(){
       
          return this.price*this.count
      }
  }

  双向绑定，在一个input里面写count，最终价格实时更新在视图

  computed:{
      sum:{
          get(){
              return this.price*this.count
          },
          set(val){
              this.price = val
          }
      }
  }

  解决闪烁

  1. <div v-text="message"></div>
  2. 推荐用 ↓

  [v-cloak]{
      display:none;
  }
  
  <div v-cloak>
      {
       {
       message}}
  </div>

  事件绑定

  1. <div v-on:click="add"></div> <div @click="add"></div>
  2. 需要传参的时候 add后面要跟()，即add(1,$event,2)

  methods:{
      add:function(e){
          console.log(e)
      }
  }

  1. 删除数组元素

  remove:function(book){
       
      this.books.$remove(book)
  }

  1. 阻止冒泡
     <div @click.stop="child">child</div>
  2. 阻止默认动作
     <div @click.prevent="child">child</div>
  3. 事件只绑定在自己身上
     <div @click.self="child">child</div>
  4. 键盘事件
     @keyup.enter="method"
  5. 延迟事件
     @keyup="make | debounce 1000" 单位是毫秒
  6. 限制条数和从第几条开始显示
     v-for="arr in arr1 | limitBy 3 2"
  7. 过滤数据

      v-for="arr in arr1 | filterBy 'zfpx1'" //默认是从所有属性中筛选
      v-for="arr in arr1 | filterBy 'zfpx1' in 'name' " //指定从哪个属性中进行筛选

  1. 排序

  v-for="arr in arr1 | orderBy 'name' -1" -> 倒序

  样式绑定

  1. 优雅绑定 :class->动态绑定
     
     • 普通,样式名 <div :class="class1">123</div>
     • 对象语法 <div :class="{class1:true,class2:false}">123</div>或者直接放个对象进去:class="classObject"(classObject:{‘bg-danger’:true,’text-primary’:true})
     • 数组绑定 <div :class="[class1,class2]">123</div> 数组里面的元素渲染到页页上去的字符串
     • 
       
       • -

  watch

  用于监测数据变化

   watch:{
      'name':function(val,oldVal){
       
          alert('新值是：'+val+' 旧值是：'+oldVal)
      }
  }

  V-model

  1. v-model.trim -> 清除前后空格
  2. v-model.number -> 把输入内容转成数字
  3. v-model.lazy -> 把同步输入框的值与数据转变为在change事件中同步
  4. 复选框 -> model里面是一个数组
     
<input type="checkbox" id="jack" value=