banmao8461
banmao8461

Vue笔记

参考网站：

  • 《VUE 官网教程》
  • 《VUE 官网API》
  • 《菜鸟教程》
  • 《Vue.js——60分钟快速入门》

1 Vue.js 及其实例

Vue.js是一个JavaScript MVVM{（Model-View-ViewModel）库，Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定。
ViewModel是Vue.js的核心，它是一个Vue实例。使用Vue的过程就是定义MVVM的各个模块的过程：

  • 定义View
  • 定义Model
  • 定义ViewModel（Vue实例），用于连接Model与View

通常一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

具体实现如下：


<html>
<head>
    <title>testtitle>
    
    <script type="text/javascript" src="vue2.1.8.js">script>
head>
<body>

<div id="app">
    
    <p v-text="message">p>
div>
body>
<script type="text/javascript">
    /* 编写Model，是一个对象 */
    var model = {message:'abc'}
    /* 编写ViewModel */
    var vm = new Vue({
        el:'#app',//el属性指向View
        data:model//data属性指向Model，常直接使用对象表示
    });
    alert(vm.message);//每个 Vue 实例都会代理其 data 对象里所有的属性
script>
html>

1.1 实例数据 data

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
值得注意的是只有当实例被创建时 data 中存在的属性是响应式的。也就是说如果你添加一个新的属性，像：

vm.b = 'hi'

那么对 b 的改动将不会触发任何视图的更新。

1.2 计算属性 computed 和观察者 watch

虽然 Vue.js 都提供了完全的 JavaScript 表达式支持，模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
所以，对于任何复杂逻辑，你都应当使用 计算属性。

1.2.1 计算属性缓存 vs 方法属性 methods

当然，通过在表达式中调用方法 methods 也可以达到同样的效果，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
即多次访问计算属性会立即返回之前的计算结果，而不必像是用方法属性那样再次执行函数。
这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
  now: function () {
    return Date.now()
  }
}

1.2.2 计算属性 vs 侦听属性 watch

使用侦听属性 watch 同样可以达到使用计算属性的效果，只不过使用的代码量会加大，而且也不容易理解，如：

<div id="demo">{{ fullName }}div>
// 使用 watch 属性
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

1.2.3 计算属性的 setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

1.2.4 侦查器 watch

同样的上述代码的实现功能使用 watch 侦查属性来做，就能更好的理解，代码量也会更少

1.3 实例的生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，给予用户机会在一些特定的场景下添加他们自己的代码。
以下是来自官网的实例的生命周期介绍图，钩子函数的 this 指向 Vue 实例：

生命周期介绍图

2 Vue.js的常用指令

Vue指令是以“v-”开头，作用于HTML元素，指令会为绑定目标添加一些特殊行为。
对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持 , 实际上，指令属性的值 预期是单个 JavaScript 表达式 （v-for 是例外）情况如：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id">div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。


{{ var a = 1 }}


{{ if (ok) { return message } }}

2.1 关于插入文本或HTML

2.1.1 v-text , v-html , v-once 指令

Vue 文本插值常用一对双花括号 {{ }} 表示，但在有些情况使用花括号会有冲突（如应用使用了 Jinja2 模板），此时可以使用v-text指令，使用方法如下述代码。
v-html指令用于插入HTML代码：

<div id="app" v-html="message">
div>
<script type="text/javascript">
    var vm = new vue({
        el:'#app',
        data:{message:'
123
'}
    })
script>

此时绑定的数据，会随着 message 属性的变化而变化，如果想要执行一次性地插值，当数据改变时，插值处的内容不会更新。可以使用 v-once 指令：

<span v-once>这个将不会改变: {{ msg }}span>

2.1.2 v-if指令与v-show指令

v-if指令会根据表达式的真假来决定删除或插入元素，它的语法是v-if="expression"，其中expression返回布尔值

<div id="app">
    <p v-if="yes">123p>
    
    <p v-if="10>9">123p>
div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{yes:true}
    })
script>

v-show指令与v-if指令类似，都是根据其expression的布尔值来执行相应的动作，区别在于v-show指令仅仅改变的是HTML元素的display属性。

2.1.3 v-else指令

v-else指令必须要跟在v-if或v-show元素后面，否则自身并不能识别：

<div id="app">
    <p v-if="9>12">123p>
    <p v-else>456p>
div>
<script type="text/javascript">
var vm = new Vue({
    el:'#app',
})
script>

2.1.4 v-for指令

v-for指令基于一个数组渲染，循环可以为数组，对象属性以及整数。语法为v-for="item in items"

  • 数组（使用数组，还可以 支持一个可选参数作为当前项的索引）：
<div id='app'>
    <ul>
        <li v-for="item in items" v-text="item.name">li>
    ul>
div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            items:[{name:1},{name:2},{name:3},{name:4},{name:5}]
        }
    })
script>
  • 对象属性（循环对象，如果设定了循环出三个参数，那么依次为对象 属性，键名，索引）：
<div id='app'>
    <ul>
        <li v-for="value,item,index in items">{{value}} {{item}} {{index}}li>
    ul>
div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            items:{name:'Seiei',sex:'man',age:'18'}
        }
    })
script>
  • 整数：
<div id='app'>
    <ul>
        
        <li v-for="value in 10">{{value}}li>
    ul>
div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app'
    })
script>

2.2 关于插入元素属性及事件属性

2.2.1 v-bind 指令

使用v-bind指令还可以缩写，v-bind:缩写成:，如v-bind:class可以缩写成:class。

v-bind指令用于绑定HTML元素的属性，语法为：v-bind:argument="expression"：

<style type="text/css">
    .red{color: red}
style>
<div id='app'>
    <p v-bind:class="class1">123p>
div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            class1:'red'
        }
    })
script>

2.2.1.1 绑定 Class

v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

注意：对象语法 引用的classname是真类名，并不是Model中的变量

a. 对象语法

<style type="text/css">
    .red{color: red}
style>
<div id='app'>
    
    <p v-bind:class="{red:isred}">123p>
div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            isred:false
        }
    })
script>

b. 数组语法

语法v-bind:class="[classname1,classname2]"，此时若想像传入对象那样动态切换类名，则可以使用 三元表达式，或直接引入一个 对象语法

<style type="text/css">
    .red{color: red}
    .blue{background-color: blue}
style>
<div id='app'>
    
    <p v-bind:class="[isActive ? activeClass : '',class2,{active: isactive}]">123p>
div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{class1:'red',class2:'blue',isactive:true}
    })
script>

2.2.1.1 绑定 Style

a. 对象语法

绑定 style 时，建议只使用 对象语法，CSS 属性名可以用 驼峰式 (camelCase) 或 短横线分隔 (kebab-case，记得用单引号括起来) 来命名，如：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">div>
data: {
  activeColor: 'red',
  fontSize: 30
}
  • 当然直接绑定到一个 样式对象 通常更好，这会让模板更清晰
  • Vue.js 会自动侦测并添加 浏览器引擎前缀 的 CSS 属性

2.2.2 v-on 指令

v-on指令用于绑定事件属性，如：

<div id='app'>
    <button v-on:click="func">123button>
    
    <button v-on:click="func2('seiei')">456button>
div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{message:'helloworld'},
        
        methods:{
            
            func:function(){alert(this.message)},
            func2:function(x){alert(x)}
        }
    })
script>

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法

2.2.3 修饰符

修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

  • .stop
  • .prevent
  • .capture
  • .self
  • .once

<a v-on:click.stop="doThis">a>


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


<a v-on:click.stop.prevent="doThat">a>


<form v-on:submit.prevent>form>



<div v-on:click.capture="doThis">...div>



<div v-on:click.self="doThat">...div>

v-on也能缩写，如v-on:click可以缩写成@click，且在建立Vue对象下不能使用普通语法来绑定事件

2.3 表单指令v-model

v-model指令在表单控件元素上创建View与Model的双向数据绑定。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
因此，

2.4 组件component

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

2.4.1 使用组件

2.4.1.1 全局注册

要注册一个全局组件，可以使用 Vue.component(tagName, options)，组件在注册之后，便可以作为自定义元素在一个实例的模板中使用，注意确保在初始化根实例之前注册组件。

2.4.1.2 局部注册

你不必把每个组件都注册到全局。你可以通过某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件，如：

var Child = {
  template: '
A custom component!
'
}

new Vue({
  // ...
  components: {
    //  将只在父组件模板中可用
    'my-component': Child
  }
})

2.4.1.3 DOM 模板解析注意事项

因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意，像

    、
      、、