Vue.js详解(一)

  • 时间:
  • 来源:互联网
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/github_39106037/article/details/103262676

Vue.js详解

一、介绍

vue.js是什么

  • Vue是一套渐进式框架。

  • 它只关注视图层,便于与第三方库或既有项目整合。

  • 当与现代化工具链和各种类库结合时,Vue也能创建复杂的单页应用。

使用vue.js

​ 有三种使用vue.js的方式,具体如下:

  • cdn引入

    直接下载并引用标签引入时,Vue会被注册为全局变量。

    开发环境

    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    

    生产环境

    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
  • 命令行工具vue-cli

    ​ Vue官方提供了一个cli命令行构建工具,可以快速搭建SPA单页应用的脚手架,可以很快生成一个带有热更新的生产环境可用的构建版本。

  • NPM

    ​ 构建大型应用时最好使用NPM安装,因为NPM能够很好的整合webpack或Browserify等模块。提供配套工具开发单文件组件。

    #最新稳定版本
    npm install vue
    

声明式渲染

​ vue中使用一个简洁地模板语法将数据渲染进DOM系统,类似于渲染字符串模板。

​ 首先创建一个Vue的实例,并将dom元素与实例的el属性绑定起来。

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

​ 模板用{{}}表示,模板中的变量和Vue实例中的data绑定在一起。所有东西都是响应式的,当改变app.message时,页面视图中的文本也相应更新。

​ 绑定有三种形式:

  • 元素文本值 {{val}}
  • 元素属性 v-bind:attribute=“val”
  • 元素结构 v-if = “seen”

组件化

​ 组件(构件)相当于一个小功能模块,但是这个模块在浏览器中是可见的,例如一个导航栏可以抽象为一个组件,组件中即包含了视图,也包含了业务逻辑。一个大的组件由若干小组件组成,一个页面由很多不同的组件组成。组件具有高度的解耦性和可复用性。

​ 在Vue中,一个组件相当于预定义选项的Vue实例,要创建一个组件,首先需要注册组件(预定义):

// 定义名为 todo-item 的新组件,实际就是添加一个组件预定义选项用于创建此组件
Vue.component('todo-item', {
  // todo-item 组件现在接受一个"prop",类似于一个自定义特性
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app = new Vue(...)
<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

现在,可以将父组件中的值传入到子组件中,用于循环生成子组件。

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量,即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”,稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>
var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

​ 可以注意到,父子组件之间的唯一接口是prop,此时父子组件高度解耦,今后子组件逻辑的更改并不会影响到父组件。

二、Vue实例

创建实例

​ 每个Vue应用通过用Vue函数创建实例开始:

var vm = new Vue({
  // 选项
})

一个Vue应用由根实例以及可选的嵌套的组件树组成。如下:

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

数据与方法

实例数据

​ 当vue实例创建时,data对象被绑定进入Vue响应式系统中,data对象属性的改变会导致视图的更新。注意只有实例创建时data的属性才是响应式的,后加入data的属性不具有此特性。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

实例属性和方法

​ Vue实例暴露了一些有用的实例属性和方法,它们以前缀开头,如data、el,el,watch等。

生命周期钩子

​ 每个Vue的实例在创建时会经历一系列初始化的过程,如设置数据监听、编译模板、实例挂载dom、更新dom节点等操作,这些操作都有不同的发生时机,这就是生命周期钩子,利用钩子,可以在不同阶段添加和执行用户的代码,执行一定的逻辑。

生命周期钩子:

  • created
  • mounted
  • updated
  • destroyed

注:this上下文指向调用它的vue实例。箭头函数中没有this,所以不要使用箭头函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dqYnSENR-1574763894204)(C:\Users\舒琨博\Documents\学习笔记\vue生命周期.png)]

模板语法

​ Vue使用了基于原始html的模板语法,允许将dom绑定至vue实例的数据,因为vue会在背后做很多事,将模板编译成虚拟dom渲染函数,减少dom的操作次数。

插值

  • 文本插值

  • 原始HTML插值

  • 属性插值

    遇到需要绑定dom属性的情况,需要用到v-bind指令:

    <div v-bind:id="dynamicId"></div>
    

绑定的两种格式:

  • 数据

  • js表达式 (有返回值的)

    <div v-bind:id="'list-' + id"></div>
    <div{{ number + 1 }}div>
    

指令

​ 指令是dom上带有v-前缀的特殊特性,当表达式值改变时,产生一定的影响,响应作用于dom。

常用指令如下:

  • v-bind: attribute = “val
  • v-if =“val
  • v-on: event = “method

指令的三要素:

  • 参数

    一些指令可以接收参数,在指令名称后以冒号表示。

  • 动态参数

  • 修饰符modifier

    以半角句号.指明的特殊后缀,指出指令的特殊方式绑定。如.prevent表示阻止默认提交表单事件。

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

计算属性

​ 模板内的表达式可以用于简单运算,当当运算逻辑变复杂时,应该考虑更加优雅的计算属性。

计算属性

#臃肿的计算逻辑
<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

​ 计算属性通过computed特性来实现:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter,当message变化时,reversedMessage也会变化
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

​ 有一点需要明白,计算属性会进行缓存操作,即会对计算出的值进行缓存,只要响应依赖message没有发生变化,就不会重新执行函数计算值,直接返回缓存的值,这有助于减少大量的方法计算。

​ 计算属性可以设置setter来反过来更新响应依赖的值。

侦听器

​ 当数据变化时要执行异步或开销较大的操作时,使用vue提供的自定义监听器watch更好。

参考文献:
Vue.js官方文档: https://cn.vuejs.org/index.html

本文链接http://element-ui.cn/news/show-150.aspx