我的Vue笔记

Vue.js-上

用法案例参考《Vue官方教程》，根据官方文档整理。

1.Vue的特性

Vue是一套用于构建用户界面的渐进式框架,与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用,Vue拥有以下特性:

• 组件化思想

• 模板的使用和数据渲染非常灵活，层次结构鲜明

• 简单的语法并能够简单快速构建一个项目

• 轻量级，体积小渲染速度更快

• Vue采用的脚手架工具为vue-cli

• 初期是尤雨溪维护，现在有加入的团队组织个人提供技术一同维护迭代更新

• Vue中指令和组件分得更清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元,都拥有有自己的视图样式和数据逻辑

 

2.绑定Vue对象

Vue也是一个构造函数,通过new Vue()可以创建一个Vue对象,通过Vue对象进行对DOM元素以及内部的子孙元素的操作

<div id="div">
    {{msg}}<!--显示123-->
</div>
<script>
new Vue({
    el:"#div",
    /*
    在Vue中通过el属性来绑定一个DOM元素,从而让该DOM元素以及内部都绑定Vue的相关操作,一般是通过ID进行查找,因为这样才能够精确绑定
    */
    data:{//data属性中包含着在el中使用的使用的变量或属性
        msg:123
    }
    //也可以使用函数形式的
    data(){
    return{
        msg:123
    };
    //methods属性包含着需要使用的方法
    methods:{
        show(){
            console.log(this.msg);
        }
    }
}
})
</script>

注:在实例内部使用定义的属性或方法时不能直接使用,必须通过this来指定需要用的属性

2.1 vm.$mount

如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例

注意:这个方法返回实例自身,因而可以链式调用其它实例方法

var MyComponent = Vue.extend({
  template: '<div>Hello!</div>'
})

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')

// 同上
new MyComponent({ el: '#app' })

// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

 

3.基本指令

3.1 v-text

v-text,该指令的用法同原生JS中的innerText,更新绑定元素内部的文本内容

<div id="div">
<span v-text="msg"></span><!--不会有闪烁问题-->
<!-- 和下面的一样 -->
<span>{{msg}}</span>
</div>

 

3.3 v-html

v-html,该指令用法同原生JS的innerHTML,可以解析内部的HTML标签

3.3 v-cloak

v-cloak,该指令CSS一起使用,用于隐藏还没有开始编译的{{}}(插值表达式)直到编译完成,解决其闪烁问题

[v-cloak] {
  display: none;/*如果没有起作用可能是由于优先级不够导致的,可以加上!important提高优先级*/
}
<div v-cloak>
  {{ message }}
</div>

 

3.4 v-show

v-show,该指令用于显示和隐藏DOM元素,根据表达式之真假值,切换元素的display属性值

注意:

• 当条件变化时该指令触发过渡效果

• v-show指令不支持在< template>< /template>标签上写,也不支持v-else,一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好,如果在运行时条件很少改变,则使用 v-if 较好

 

3.5 v-if,v-else与v-else-if

• v-if,该指令用于是否渲染DOM元素,传入一个布尔值,通过该布尔值的条件改变实现对于DOM元素的删除和重建,该指令不同于v-show,而是会完全销毁这个DOM元素

  注意:当条件变化时该指令触发过渡效果

• v-else,该指令用于不需要任何表达式,但是在该指令的前一个兄弟元素必须有v-if或者v-else-if指令,该指令的用处是为v-if 或者 v-else-if添加else的选项

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>html

• v-else-if,该指令用于用于v-if的else if选项,前一个兄弟元素必须要v-if指令,并且该指令可以链式调用,也就是说可以调用多次v-else-if指令

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

 

3.6 v-for

v-for,该指令可以基于源数据多次渲染元素或模板块,用于循环遍历某个数组或对象,如果只用一个变量代表得到是数组或对象的value值

注意:在内部必须使用固定的item in/of items形式的特殊语法(下面的in都可以用of代替,并且更符合实际)

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }} <!--Foo Bar-->
  </li>
</ul>
<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
</script>

• 遍历数组时其实还支持第二个变量,代表的是遍历数组的索引值

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
    <!--
        Parent-0-Foo
        Parent-1-Bar
    -->
  </li>
</ul>
<script>
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
</script>

• 遍历对象时还可以接受第二三两个变量,分别代表了键名和索引值

<ul id="v-for-object" class="demo">
 <div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
  <!--
    0. firstName: John
    1. lastName: Doe
    2. age: 30
   -->
</div>
</ul>
<script>
    new Vue({
        el: '#v-for-object',
        data: {
            object: {
                firstName: 'John',
                lastName: 'Doe',
                age: 30
            }
        }
})
</script>

• 该指令还可以遍历一个整数,遍历的量会分别从1开始得到赋值直到到这个整数的值

<p v-for="count in 10">{{count}}</p>
//1 2 3 4 5 6 7 8 9 10

注意:当v-for和v-if处于同一节点时,v-for 的优先级比 v-if更高，这意味着 v-if将分别重复运行于每个 v-for循环中,当想为仅有的一些项渲染节点时,这种优先级的机制会十分有用

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>
<!--
官方并不建议v-for和v-if指令一起使用,如果要使用这种方式,就进行条件渲染
-->

<!--
如果想有条件才继续v-for指令,则可以将v-if置于外层元素(或<template>)上
-->
<ul v-if="todos.length">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
<p v-else>No todos left!</p>
<!--
条件渲染
v-if如果想只写一个而同时切换多个元素,可以在最外成包裹一层<template></template>标签,在这个标签上面
使用v-if,在渲染的时候并不会将<template>标签渲染出来
-->

 

3.7 v-bind

v-bind,该指令用于动态绑定一个或多个特性,该方法绑定的特性与普通的属性效果一致,只是其内部会被解析为JS表达式,而不是普通特性一样会是一个字符串

修辞符:

• .prop - 被用于绑定 DOM 属性(property)

• .camel - 将短横线命名法特性名转换为驼峰命名法

• .sync - 会扩展成一个更新父组件绑定值的 v-on 侦听器

注意:

• 该指令有其简写写法,通过:来代替v-bind:

• 该指令可以动态对绑定的参数进行改变,参数用[]括起来

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">

<!-- 动态特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态特性名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div><!--对象通过布尔值确定是否传入class中-->
<div :class="[classA, classB]"></div><!--数组会直接将类名传入到class中-->
<div :class="[classA, { classB: isB, classC: isC }]"><!--对象和数组可以混用-->

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div><!--通过对象写入每个属性-->
<div :style="[styleObjectA, styleObjectB]"></div><!--数组的成员中实际是一个个对象-->

<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

 

3.8 v-on

v-on,该指令用于绑定监听事件,表达式可以是一个方法的名字或一个内联语句(也就是说在传入事件的时候可以选择加()可以选择不加(),推荐在传入参数的时候添加,在不传参的时候写事件名)

参数:该指令的参数为原生JS中的事件名,只不过没有on

修饰符

• .stop - 调用 event.stopPropagation(),会阻止本元素上的事件进行冒泡传播

• .prevent - 调用 event.preventDefault(),不能和.passive一起使用

• .capture - 添加事件侦听器时使用 capture 模式,父元素会执行在子元素上进行的同名事件

• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调,只会真正自己触发的事件才会进行,和.stop是有区别的,这个只会阻止自己的冒泡,但不会阻止该元素的父元素事件的冒泡进行

• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调,可以是表示键盘字符的数字或者表示特效事件的按键修饰符

• .native - 监听组件根元素的原生事件,一个Vue实例内部通过v-on只能绑定自己内部的方法,不能绑定原生DOM事件的方法,通过该修饰符就可以使用原生JS的事件方法了

• .once - 只触发一次回调

• .left - 只当点击鼠标左键时触发

• .right - 只当点击鼠标右键时触发

• .middle - 只当点击鼠标中键时触发

• .passive - 不用查找是否阻止默认事件的请求直接进行操作。如在滚动页面时的onscroll事件,每次触发事件时浏览器都会查看是否有阻止默认滚动事件的操作,但是如果本来就没有进行这个操作,在滚动的时候就会出现卡的的情况,因为在触发滚动条滚动时总会先查找请求,这个修饰符就是告诉浏览器不用进行查找直接进行滚动操作。因为作用的冲突,所以不能和.prevent一起使用

注意:

• 该指令有简写形式,通过@来代替v-on:

• 该指令可以动态对绑定的参数进行改变,参数用[]括起来

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

<!-- 组件中的自定义事件 -->
<my-component @my-event="handleThis"></my-component>

<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>

<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

 

3.9 v-model

v-model,该指令用于表单内的标签进行双向的数据绑定

注意:v-model只能绑定给input,textarea,select等表单元素和自定义的组件,除此之外不能在其他标签上绑定

修辞符:

• .lazy - 取代 input监听 change 事件,默认在用户写入值时是使用的input事件,也就是当值输入完成后才会触发事件,而change是一些有输入法的语言在值还没有输入时就时刻监听改变

• .number- 输入字符串转为有效的数字

• .trim - 输入首尾空格过滤

用法:

• 如果是对input文本框和textarea绑定的,绑定的值会根据输入的内容,就是将内部的变量的值改为value中的值

• 如果是对复选框绑定的

  • 如果绑定的变量不是数组,会根据复选框是否被选中而改变为false或true,即使原来不是布尔值也会被强制转换为布尔值,这是因为双向的数据绑定,如果是有多个复选框,那么则会一起被选中或不选中

  • 如果变量是数组则会将value属性中的值(没有写value属性会传入null)传入该数组作为其中的一个成员,Vue会根据数组内部的值来判断是否选中该复选框(内部其实就是这样运作的),如果value值一样会有多个复选框被选中,再次点击就会将该值删去然后取消复选框的选中

<div id='example'>
  <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>

<!--也可以在被选中和没被选择直接设置不同的值-->
<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>
<!--
 当选中时
vm.toggle === 'yes'
 当没有选中时
vm.toggle === 'no'
注意:点击了才会改变值,如果没有点击过而变量本身有值的话就不会是fasle-value的值
-->

• 如果是对单选按钮进行绑定的,变量值会随着选中单选框的value值而变化,如果变量的值刚开始就是一个单选框的value值,那么就会自动选中这个单选框
• 注意:

1.   　单选框和复选框即使不写相同的name而只绑定了相同的modle也会认做是一类单选框的,但是最好还是将name写上
2.      单选框和复选框都可以通过v-bind:value绑定的value值来设置值自身的value值

• 如果是对选择框select进行绑定的,绑定的变量的值会随着选中的option选项内部的内容而发生变化,如果option没有写value属性,该变量会变成< option>< /option>内部的值,如果有value属性,变量会变成value值而不是option的内容

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

注意:在多选时要绑定一个数组,将上方的selected的值改为空数组[]，这样在选入的时候就能将每个选择的选项的值加到变量中去,还可以是一个对象,但是要通过v-bind:value绑定

<select v-model="selected">
    <!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

 

3.10 v-pre

该指令不接受任何表达式,使用了该指令的元素Vue在编译时跳过这个元素和它的子元素的编译过程,可以用来显示原始的模板{{}}标签,跳过大量没有指令的节点会加快编译

 

3.11 v-once

该指令不需要表达式,只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能