Vue笔记

• v-cloak可以解决插值表达式得闪烁问题

• v-text没有闪烁问题，但是会覆盖

• v-text 与 插值表达式

• v-text和 插值表达式 都会把data的值解析成 文本格式

• v-html则会解析调用值得 html 格式

  <div v-text='data'></div>
  <div v-html='data'></div>
  

• v-bind是 Vue 中提供用于绑定属性的指令

  <input type="button" value="button" v-bind:title='txt'>
  

• 由于v-bind把后面的属性当作是一个变量，所以可以进行变量的JS变量操作

  <input type="button" value="button" v-bind:title="txt + '123'">
  <input type="button" value="button" :title="txt + '123'"> <!-- v-on 的缩写：:(冒号) -->
  

• v-on 是Vue中提供用于绑定事件的指令

  • 需要在 Vue 实例中新建一个 methods，是与 el 还有 data 同级的一个对象（字典）

  • 会在 methods 中定义当前 Vue 实例中所有可用的方法；

    methods: {
        show:function(){
            alert('Hello Vue');
        }
    }
    

• v-on 的使用方法

  <input type="button" value="点击按钮" v-on:click='show'>
  <input type="button" value="点击按钮" @click='show'> <!-- v-on 的缩写：@ -->
  

• 在实例中使用 data内的数据，需要使用 this ＋ 数据变量名

• 解决嵌套函数的 this 的指向问题

  var _this = this
  mm = function(){
      _this........
  }
  // 替换方法
  mm = () => {
      this.......
  }
  

• v-on 的事件修饰符

  • .stop 阻止冒泡----冒泡事件是由内而外，阻止的话需要在子元素阻止
  • .prevent 阻止默认事件----e.g. 阻止 a 标签的跳转（默认）事件
  • .capture 添加事件侦听器时使用事件捕获模式----从外向里触发事件
  • .self 只在事件在该元素本身（比如不是子元素）触发时触发回调

• v-model

  • v-bind 只能实现数据的单向绑定

  • v-model 可实现数据的双向绑定

    <div id="app">
        <p>{{ msg }}</p>
        <input type="text" v-model='msg'>
    </div>
    

  • v-model 只能运用在 表单 元素中

    • input、select、checkbox、textarea

• 在 Vue 中使用样式

  • 使用 class样式

    1. 数组
    2. 数组中使用三元表达式
    3. 数组中嵌套对象
    4. 直接使用对象

  • 使用内联样式

    1. 直接在元素上通过 :style 的形式，书写样式对象
    2. 将样式对象，定义到 data 中，并直接引用到 :style中
       • 在 data 上定义样式
       • 在元素中，通过属性绑定的形式，将样式对象应用到元素中
    3. 在:style中通过数组，引用多个data上的样式对象
       • 在data上定义样式
       • 在元素中，通过属性绑定的形式，将样式对象应用到元素中

• v-for

  <p v-for='word in words'>{{ word }}</p>
  <p v-for='(word, i) in words'>{{ i }} : {{ word }}</p>
  <p v-for='user in users'>{{ user.id }}---{{ user.name }}</p>
  <p v-for='(val, key, i) in user'>{{ val }}{{ key }}{{ i }}</p>
  <!--迭代数字-->
  <p v-for='count in 10'>{{ count }}</p>  <!--从1开始一直到10-->
  

2.2.0+ 的版本中，当在组件中使用 v-for 时，key 是必须的
需要用 v-bind:key 的方式去绑定 id 值 即 key 值

• v-bind 绑定 key 值

  <p v-for='word in words' :key="word.id">{{ word }}</p>
  

• v-if与v-show

• v-if 是添加和删除元素----较高的性能消耗

  • v-show 是设置元素的 display 的属性是否为 none----较高的初始渲染消耗

• 如果频繁切换元素显示状态，推荐使用v-show

  • 如果元素永远不会被显示出来，推荐使用v-if