Vue.js起步学习笔记

先来一个小分享：

不知道大家是不是有很多人都有这样的体验：很想读书，很想多学习一下书里的知识，但是平常太忙根本没时间。

大家可以关注一下博主新建的微信公众平台或者加入QQ群，主要目的是定期更新一些我们大家的读书笔记和感悟，互相交流，这样就能短时间内汲取更多书的精华知识了～群号303238741，或者扫描文章最下方的二维码，在微信号中给我发一下QQ号～

安装

安装：npm install vue

安装命令行工具：npm install -g vue-cli（需要soda）

创建一个基于webpack的项目模版：vue init webpack test-project，会进行一系列的提示

进入目录安装依赖包：cd test-project;  npm install

运行项目：npm run dev

起步

见easy-test代码

概述

视图由数据驱动

指令：v-开头；如v-if/v-for/v-bind等

Vue实例

var vm = new Vue({})：创建一个基本的Vue实例

var MyComponent = Vue.extend({})：创建一个类似于抽象类的可扩展类，可以进行实例化，实例化的组件包涵该类的内容：var myComponentInstance = new MyComponent()

Vue实例内置的预定义属性和方法：以$开头，如$el<=>document.getElementById(‘’)

$watch方法的使用：

vm.$watch('a', function (newVal, oldVal) {

  // 这个回调将在 `vm.a`  改变后调用，起到一个监听器的作用

})

钩子：在一个Vue实例的生命周期的不同时期调用的方法，比如created方法内部的函数就会在实例创建后调用

各个阶段：created/beforeCompile/compiled/ready/beforeDestroy/destroyed

数据绑定语法

v-bind可以将标签特性进行绑定：<a v-bind:href="url"></a>等价于href="{{url}}"

计算属性

在Vue实例中的computed字段中定义

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // 一个计算属性的 getter
    b: function () {
      // `this` 指向 vm 实例
      return this.a + 1
    }
  }
})

这其中b的值取决于a的值，是计算后得出的，a的改变也会引起b的改变，导致同步的视图渲染，这种同步的刷新是比较重要的，适用于当一个变量有多个值组成时使用。这时改变其中一个变量，computed中的计算属性也会随之更新

class与style绑定

使用v-bind:class可以动态切换样式，如：

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

data: {

  isA: true,

  isB: false

}

渲染为：

<div class="static class-a"></div>

——————————————————————————

传入数组：

<div v-bind:class="[classA, classB]">

data: {

  classA: 'class-a',

  classB: 'class-b'

}

渲染为：

<div class="class-a class-b"></div>

——————————————————————————

v-bind:style：绑定直观的style

<div v-bind:style="styleObject"></div>

data: {

  styleObject: {

    color: 'red',

    fontSize: '13px'

  }

}

条件渲染

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

<h1 v-if="ok">Yes</h1>

<h1 v-else>No</h1>

如果v-if中需要多个元素，可以使用<template v-if></template>，内部放置其他条件渲染的内容

v-show用法和v-if蕾类似，不同的是v-show只切换display，元素一直在dom中

列表渲染

与v-if类似，可以将v-for运用在template标签中

Vue.js将数组的方法都封装成了变化可能新视图的，比如push()操作之后数组内容发生变化，就会更新视图

也可以使用v-for遍历对象，遍历对象时除了$index表示索引，还有$key表示当前元素的对象名

v-for还可以接受一个整数n，这样会将模版重复n次

方法与事件处理器 

使用内联语句：<button v-on:click="say('hello!', $event)">Submit</button>

内联语句可以使用$event，将$event传回函做为参数，表示当前事件

事件修饰：

阻止单击事件冒泡，功能同stopPropogation：<a v-on:click.stop="doThis"></a>

提交事件不再重载页面，功能同preventDefault：<form v-on:submit.prevent="onSubmit"></form>

按键修饰符，如<input v-on:keyup.13="submit">表示在按键的key code是13的时候触发事件

常用别名：enter/up/down/left/right/space/esc/delete/tab

表单控件绑定

选择框逻辑值数据绑定：

<input type="checkbox" id="checkbox" v-model="checked">

<label for="checkbox">{{ checked }}</label>

当checkbox单选框被选中时，checked为true，对应更新{{checked}}

多选框多个勾选：

<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>

<span>Checked names: {{ checkedNames | json }}</span>

//js代码

new Vue({

  el: '...',

  data: {

    checkedNames: []

  }

})

单选框：

<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>

下拉框：

<select v-model="selected">

  <option selected>A</option>

  <option>B</option>

  <option>C</option>

</select>

<span>Selected: {{ selected }}</span>

注意：以上这种选择框的数据绑定方式都是vue中定义的，不用理解其逻辑

Vue特殊的表单参数：

number：将用户的输入转化为数字类型；debounce：设置一个数据更新渲染的延迟

使用实例：<input v-model="msg" debounce="500">

过度

步骤

1.为要过度的部分添加transition属性：

<div v-if="show" transition="expand">hello</div>，其中expand是自己定义的名称

2.针对定义的名称expand，定义三种css样式：

.expand-transition定义元素始终不变的样式以及设置transition；

.expand-enter和.enpand-leave分别定义元素开始和结束的独特样式

3.Vue为transition定义了各个钩子，分别在transition不同阶段执行

此外，还可以使用v-bind来使得元素执行不同的transition：

<div v-if="show" :transition="transitionName">hello</div>

new Vue({

  el: '...',

  data: {

    show: false,

    transitionName: 'fade'

  }

})

配合CSS动画animation使用的例子：

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // 一个计算属性的 getter
    b: function () {
      // `this` 指向 vm 实例
      return this.a + 1
    }
  }
})

组件

创建构造器：var MyComponent = Vue.extend({

template: '<div>A custom component!</div>'

    })

注册，将构造器对应于一个标签：Vue.component(‘my-component’, MyComponent)

注册后可以如下使用：<my-component></my-component>，以上这种是全局注册

局部注册：在父组件内部注册组件，这时该组件只能用在父组件内

var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
  template: '...',
  components: {
    // <my-component> 只能用在父组件模板内
    'my-component': Child  //在组件的components字段中注册子组件
  }
})

注意：el和data如果使用在vue.extend中必须是一个函数，函数返回值，而不能是一个简单的数据或者对象

微信二维码：

                     

欢迎志同道合的小伙伴加入哦～