Vue.js起步学习笔记

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fareise/article/details/52911733

先来一个小分享:

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

大家可以关注一下博主新建的微信公众平台或者加入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中必须是一个函数,函数返回值,而不能是一个简单的数据或者对象


微信二维码:

                     

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

展开阅读全文

没有更多推荐了,返回首页