huangmengke

从零开始的vue学习笔记(二)

数据与方法

  • 当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。data的数据和视图同步更新。
  • 实例创建后添加一个新的属性,对这个属性的的改动将不会触发任何视图的更新。
  • 如果需要一个属性,但是一开始它为空或不存在,仅需要设置一些初始值。
  • Object.freeze()方法可以阻止修改现有的属性
  • 除了数据属性,Vue 实例还包含实例属性与方法,前缀为$,例如:vm.$data,vm.$el,vm.$watch()(这里假设vm是某个实例名),详情可以参考API

实例生命周期钩子

Vue实例有自己的生命周期,提供了一些钩子函数给我们写自己的逻辑代码:

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated

ps:不要在选项属性或回调上使用箭头函数,即这些钩子函数不要用箭头函数的写法,因为他们没有this
生命周期图

模板语法

  1. 文本
    数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

    <span>Message: {{ msg }}</span>

    v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新

    <span v-once>这个将不会改变: {{ msg }}</span>
  2. 原始 HTML
    v-html 指令输出真正的html,而不是字符串

    <p>Using mustaches: {{ rawHtml }}</p> 输出字符串
    <p>Using v-html directive: <span v-html="rawHtml"></span></p> 输出rawHtml变量代表的HTML
  3. 使用 JavaScript 表达式
    所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持

    {{ number + 1 }}
    
    {{ ok ? 'YES' : 'NO' }}
    
    {{ message.split('').reverse().join('') }}
    
    <div v-bind:id="'list-' + id"></div>
  4. 指令
    常见有v-if,v-on,v-bind,v-for。
    参数:

    <a v-bind:href="url">...</a>

    在这里 href 是参数,告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定
    动态参数:

    <a v-bind:[attributeName]="url"> ... </a>

    这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值,求得的值将会作为最终的参数来使用
    修饰符:

    <form v-on:submit.prevent="onSubmit">...</form>

    修饰符 (modifier) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定,例子的.prevent就是修饰符
    缩写:

    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>
    <!-- 缩写 -->
    <a :href="url">...</a>
    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>
    <!-- 缩写 -->
    <a @click="doSomething">...</a>

计算属性和侦听器

模板一般不要加入过多的逻辑,只是用来渲染会职责分明一些,把逻辑处理防盗计算属性,会更加合理;

  <p>Computed reversed message: "{{ reversedMessage }}"</p>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

这里的reversedMessage就是计算属性,可以逆序一个字符串。
定义一个方法,能够达到同样的效果:

  <p>Reversed message: "{{ reversedMessage() }}"</p>
<p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

两者区别:计算属性是基于它们的响应式依赖进行缓存的,方法总会再次执行函数;在不同场景下选择不同的方式吧~
tips:使用计算属性,而不是侦听属性(watch里定义的方法);计算属性默认只有 getter ,不过在需要时你也可以提供一个 setter;自定义的侦听器watch在数据变化时执行异步或开销较大的操作时是最有用的

Class 与 Style 绑定

v-bind 用于 class 和 style,表达式结果的类型除了字符串之外,还可以是对象数组
先介绍Class绑定

  • 绑定对象

    <div
    class="static"
    v-bind:class="{ active: isActive, 'text-danger': hasError }">
    </div>
    data: {
    isActive: true,
    hasError: false
    }

    当 isActive 或者 hasError 变化时,class 列表将相应地更新,也可以让绑定对象不内联定义在模板里,结果也是一致的:

    <div v-bind:class="classObject"></div>
    data: {
    classObject: {
      active: true,
      'text-danger': false
      }
    }
    绑定计算属性也可以更灵活的展现(不举例子了)
  • 绑定数组

    <div v-bind:class="[activeClass, errorClass]"></div>
    data: {
      activeClass: 'active',
      errorClass: 'text-danger'
    }
  • 绑定组件(语法和前面完全类似)

Style绑定
v-bind:style 的对象语法

  • 绑定对象

    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
    data: {
      activeColor: 'red',
      fontSize: 30
    }

    或者直接写

    <div v-bind:style="styleObject"></div>
    data: {
    styleObject: {
        color: 'red',
        fontSize: '13px'
      }
    }
  • 绑定数组

    <div v-bind:style="[baseStyles, overridingStyles]"></div>

条件渲染

v-if、v-else-if、v-else可以配合使用:

    <div v-if="type == 'A'">
      A
    </div>
    <div v-else-if="type == 'B'">
        B
    </div>
    <div v-else="type == 'C'">
        C
    </div>
    data : {
        type : "B"
    }

<template> 元素上使用 v-if 条件渲染分组,显示多个元素

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

用key管理重复元素

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

使用key标示元素后,Vue不会采用偷懒的复用,而会重新渲染元素
v-show:只有显示和不显示两种

<h1 v-show="ok">Hello!</h1>

v-if vs v-show:需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好

列表渲染

v-for用于列表渲染

  • 迭代数组

    <ul id="example-2">
    <li v-for="(item, index) in items">
      {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
    </ul>
    var example2 = new Vue({
    el: '#example-2',
    data: {
      parentMessage: 'Parent',
      items: [
        { message: 'Foo' },
        { message: 'Bar' }
      ]
    }
    })
    ps:index从0开始,in可以替换为of
  • 迭代对象

    <div v-for="(value, name, index) in object">
      {{ index }}. {{ name }}: {{ value }}
    </div>
    new Vue({
      el: '#v-for-object',
      data: {
          object: {
              title: 'How to do lists in Vue',
              author: 'Jane Doe',
              publishedAt: '2016-04-10'
          }
      }
    })
  • 使用唯一key配合v-for保证渲染正确(删除、排序、过滤等场景用得到)

    <div v-for="item in items" v-bind:key="item.id">
    <!-- 内容 -->
    </div>
  • 数组变异方法 (mutation method)
    push()、pop()、shift()、unshift()、splice()、sort()、reverse(),例子:

    example1.items.push({ message: 'Baz' })
    这些方法会直接改变数组本身
  • 非变异 (non-mutating method) 方法
    filter()、concat()、slice()

    example1.items = example1.items.filter(function (item) {
    return item.message.match(/Foo/)
    })
    这些方法不会改变传入的数组本身,但是方法的返回值是一个新数组,可以把这个数组赋值给原来的数组达到同样的效果
  • 注意事项
    数组的一些错误写法:

      var vm = new Vue({
      data: {
          items: ['a', 'b', 'c']
      }
      })
      vm.items[1] = 'x' // 不是响应性的
      vm.items.length = 2 // 不是响应性的

    正确写法:

    //第一个问题
    // Vue.set
    Vue.set(vm.items, indexOfItem, newValue)
    // Array.prototype.splice
    vm.items.splice(indexOfItem, 1, newValue)
    //实例写法
    vm.$set(vm.items, indexOfItem, newValue)
    //第二个问题
    vm.items.splice(newLength)

    对象的一些错误写法:

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

    对于已经创建的实例,Vue 不允许动态添加根级别的响应式属性,但是,可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性:

    var vm = new Vue({
    data: {
      userProfile: {
        name: 'Anika'
      }
    }
    })
    Vue.set(vm.userProfile, 'age', 27)
    //或者
    vm.$set(vm.userProfile, 'age', 27)

表单输入绑定

v-model指令在表单 <input><textarea><select> 元素上创建双向数据绑定,本质上是语法糖。

  • 文本

    <input v-model="message" placeholder="edit me">
    <p>Message is: {{ message }}</p>
  • 多行文本

    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ message }}</p>
    <br>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
    tips: (<textarea>{{text}}</textarea>) 并不会生效,应用 v-model 来代替。
  • 复选框
    多个复选框,绑定到同一个数组,例子:

      <div id='example-3'>
      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      <label for="jack">Jack</label>
      <input type="checkbox" id="john" value="John" v-model="checkedNames">
      <label for="john">John</label>
      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      <label for="mike">Mike</label>
      <br>
      <span>Checked names: {{ checkedNames }}</span>
    </div>
    new Vue({
      el: '#example-3',
      data: {
          checkedNames: ['Jack']
      }
    })
  • 单选按钮

      <div id="example-4">
      <input type="radio" id="one" value="One" v-model="picked">
      <label for="one">One</label>
      <br>
      <input type="radio" id="two" value="Two" v-model="picked">
      <label for="two">Two</label>
      <br>
      <span>Picked: {{ picked }}</span>
    </div>
    new Vue({
      el: '#example-4',
      data: {
          picked: 'Two'
      }
    })
  • 选择框
    单选:

    <div id="example-5">
      <select v-model="selected">
          <option disabled value="">请选择</option>
          <option>A</option>
          <option>B</option>
          <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
    new Vue({
      el: '...',
      data: {
          selected: 'A'
      }
    })

    多选时 (绑定到一个数组):

      <div id="example-6">
      <select v-model="selected" multiple style="width: 50px;">
          <option>A</option>
          <option>B</option>
          <option>C</option>
      </select>
      <br>
      <span>Selected: {{ selected }}</span>
      </div>
      new Vue({
      el: '#example-6',
      data: {
          selected: ['A','B']
      }
      })

    v-for显示下拉框例子:

      <select v-model="selected">
      <option v-for="option in options" v-bind:value="option.value">
      {{ option.text }}
      </option>
    </select>
    <span>Selected: {{ selected }}</span>
    new Vue({
      el: '...',
      data: {
          selected: 'A',
          options: [
          { text: 'One', value: 'A' },
          { text: 'Two', value: 'B' },
          { text: 'Three', value: 'C' }
          ]
      }
      })
  • 值绑定
    单选按钮,复选框及选择框的选项,v-model 绑定的值通常是静态字符串,有时我们可能想把值绑定到 Vue 实例的一个动态属性上,这时可以用 v-bind 实现,并且这个属性的值可以不是字符串(不举例子了)
  • 修饰符
    • .lazy
      在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步,你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步
      <!-- 在“change”时而非“input”时更新 -->
      <input v-model.lazy="msg" >
    • .number
      如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符
    <input v-model.number="age" type="number">
    • .trim
      如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:
    <input v-model.trim="msg">

分类:

技术点:

相关文章: