JavaScript之Vue.js【入门基础】

2024-09-27 10:43:18

本篇将简单介绍一下Vue.js，并在Node.js环境下搭建一个简单的Demo。

一、简介

我个人理解，Vue.js是一套前端视图层的框架，它只关心视图展示和数据绑定，它的一些语法与Angular 1非常相似，如果有Angular 1相关的使用经验，上手会非常快。

相比较其他的React、Angular 2等MVVM框架，它更加的轻量，效率也更高，也能更好的与其他库集成。

它拥有以下几个出色的特性：

数据双向绑定
指令
模板
组件

当前最新的版本为2.1.4。后续也会在这个版本下演示Demo。

二、环境准备

下载安装Node.js环境，安装成功后在命令行窗口依次执行以下命令：

> npm install bower -g
> npm install express-generator -g

安装完成后进入工程目录（随意新建一个目录），依次执行以下命令，创建一个名为vue-demo的项目：

 > express vue-demo --view=ejs
 > cd vue-demo
 > npm install
 > bower init
 > bower install requirejs --save
 > bower install vue --save

所有命令执行成功后，在项目根目录手动增加一个名为.bowerrc文件，内容如下

 {
  "directory": "public/plugins/"
}

为了后面显示的demo页面好看一点，再引入bootstrap。这步不是必须的

> bower install bootstrap --save

最终的目录结构如下

三、Hello World

按照惯例，学习一个新的语言，都要先问候一下我们这个精彩的世界。修改 views/index.ejs 文件内容

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Index</title>
 <!-- Bootstrap -->
 <link href="plugins/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
 <div id="app" class="container">
  <input type="text" v-model="message" />
  <p>{{message}}</p>
 </div>
 <!-- requirejs main -->
 <script src="plugins/requirejs/require.js" data-main="javascripts/index.js"></script>
</body>
</html>

在 public/javascrips 目录里新建一个文件 index.js ，内容如下

/// <reference path="../plugins/requirejs/require.js" />
require.config({
  baseUrl: "plugins",
  paths: {
    jquery: "jquery/dist/jquery.min",
    bootstrap: "bootstrap/dist/js/bootstrap.min",
    vue: "vue/dist/vue.min"
  }
});
require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) {
  var vm = new Vue({
    el: "#app",
    data: {
      message: "Hello world!"
    }
  });
});

在命令行窗口的项目目录下执行命令 npm start ，访问 http://localhost:3000/

修改文本框里的内容，下方文字也会跟着变化

这是一个简单的双向数据绑定的例子。通过Vue类型构造了一个根实例，分别给 el 属性赋值需要绑定的页面元素ID，给 data 属性赋值需要绑定的数据。在页面里，通过给 input 元素添加指令 v-model ，绑定到数据的message属性。在 p 元素里通过表达式 {{message}} 绑定message属性。这样页面就能直接展示绑定的数据内容，在改变 input 的内容时，也能同步改变下方文本内容。

四、属性、方法

通过Vue实例可以直接访问绑定的数据的属性。修改 index.js 文件内容：

require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) {
  var d = {
    message: "Hello world!"
  };
  var vm = new Vue({
    el: "#app",
    data: d
  });
  // 属性代理
  console.log('vm.message = ' + vm.message);
  console.log('vm.message === d.message? ' + (vm.message === d.message));
});

访问页面，查看浏览器控制台显示如下：

从上面的例子可以看到， vm 实例“代理”了绑定的数据对象，通过实例可以直接访问数据对象里的属性。

除了能“代理”数据对象， vm 实例也有一些内置属性和方法，这些属性和方法都有 $ 前缀。再修改 index.js 内容：

require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) {
  var d = {
    message: "Hello world!"
  };
  var vm = new Vue({
    el: "#app",
    data: d
  });
  // 属性代理
  console.log('vm.message = ' + vm.message);
  console.log('vm.message === d.message? ' + (vm.message === d.message));
  console.log('vm.$data = ' + JSON.stringify(vm.$data));
  console.log('vm.$data === d? ' + (vm.$data === d));
  console.log('vm.$el = ' + vm.$el);
  console.log('vm.$el === div.#app? ' + (vm.$el === document.getElementById('app')));
  // 内置方法
  vm.$watch('message', function (oldVal, newVal) {
    console.log('oldVal is: ' + oldVal);
    console.log('newVal is: ' + newVal);
  });
});

刷新页面，查看控制台：

$data：Vue实例的数据对象。通过这个属性可以访问到原始数据对象。
$el：Vue实例挂载的DOM元素对象。

修改页面文本框的内容，查看控制台：

$watch：Vue实例监视属性变化的内置方法。当被监视的属性改变时，将会触发这个方法。

五、生命周期钩子

Vue也提供了在实例化时各个状态变化过程中触发的事件方法。修改 index.js 内容：

require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) {
  var d = {
    message: "Hello world!"
  };
  var vm = new Vue({
    el: "#app",
    data: d,
    beforeCreate: function () {
      console.log('beforeCreate is triggered.')
    },
    created: function () {
      console.log('created is triggered.')
    },
    beforeMount: function () {
      console.log('beforeMount is triggered.')
    },
    mounted: function () {
      console.log('mounted is triggered.')
    },
    beforeUpdate: function () {
      console.log('beforeUpdate is triggered.')
    },
    updated: function () {
      console.log('updated is triggered.')
    },
    beforeDestroy: function () {
      console.log('beforeDestroy is triggered.')
    },
    destroyed: function () {
      console.log('destroyed is triggered.')
    }
  });
});

刷新页面，查看控制台：

修改文本框内容，查看控制台：

beforeCreate：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created：实例已经创建完成之后被调用。这个时候数据观测(data observer)，属性和方法的运算，watch/event 事件回调已经完成。
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted： el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。这个时候DOM已经更新完成。
beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

下面是完整的生命周期图示：

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，同时也希望多多支持我们！

详解vue-router 2.0 常用基础知识点之router-link

前端采用前后端分离的方式进行开发,我们使用vue2.0框架,做单页面应用难免会用到vue-router,今天把项目中的用到router-link摘出来,一是想整理一下这些用法,方便下次快速查找,二是重新再过一下vue-router,增加熟悉度.也希望下面这些例子能帮到其他使用vue-router的朋友. 1,$route.params 类型: Object 一个 key/value 对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象. path: '/detail/:id'
vue.js入门教程之基础语法小结

前言 Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb. 以下代码是Vue.js最简单的例子, 当 input 中的内容变化时,p 节点的内容会跟着变化.  <div id="demo"> <p>{{message}}</p> <input v-model="message"> </div> new
Vue.js 2.0学习教程之从基础到组件详解

前言最近这段时间里不停的做着Vue的技术分享,虽然不是什么深层次的代码底能架构,如果底层架构真说出来,我就不会做Vue.js 2.0从基础到组件了,就会分享Vue从底层到还是到底层.我相信能来看我这次分享的朋友都是在工作开发层面上面临着一些问题.此次分享我们先抛开Vue - router和Vuex,很多朋友都觉得Vuex和router比较难,大错特错! 对Vue 2.0的介绍我对Vue 2.0认知,能it前端框架的认知,在我们不算底层原理的情况下,什么才是精髓,那就是基础的方法和一些api介
VUEJS实战之构建基础并渲染出列表（1）

前言我的JavaScript水平比较一般.好吧,是相当的一般.因此,对于最新的前端框架技术,实在是有点困难,但现实让我必须面对.因此,学习是唯一的出路. 纵向比较了N款前端框架,最终选择了VUE,为什么呢?理由如下: 1.angular 前途不明,1.x学习曲线高,并且好像被放弃了,而2则还没有正式推出. 2.react 比较厉害,但是没接触. 3.VUE简单,通过上手,比较适合我的思维和水平. 4.vue有中文文档,我看起来比较舒服. 既然决定学习vue,那么最好的学习方法就是实战.
最细致的vue.js基础语法值得收藏!

介绍前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍. Vue读音/vju:/,和view类似.是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb. 可以去这里下载 .自己整理了一个Vue.js的demo, https://github.com/chenhao-ch/demo-vue 快速入门以下代码是Vue.js最简单的例子, 当input中的内容变化时,p节点的内容会跟着变化. <!-- html
详解vue-router 2.0 常用基础知识点之router.push()

除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location) 想要导航到不同的 URL,则使用 router.push 方法.这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL. 当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="...&
Vue.js基础指令实例讲解（各种数据绑定、表单渲染大总结）

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.
vue双花括号的使用方法附练习题

本文实例为大家分享了vue双花括号的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>{{}}的使用</title> <script src="js/vue.js"></script> </head> <body> <div id=&qu
详解vue-router 2.0 常用基础知识点之导航钩子

导航钩子 vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的. 全局钩子 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // do something next(); }); router.afterEach((to, from, next) => { console.log(to.
Vue.js基础知识汇总

介绍 vue.js 是用来构建web应用接口的一个库技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式.实际的DOM操作和输出格式被抽象的方式到指令(Directives)和过滤器(Filters) 在哲学领域内,尽量让MVVM数据绑定API尽可能简单.模块化和可组合性也是重要的设计考虑.vue不是一个全面的框架,它被设计成简单的和灵活的.你可以用它快速原型,或混合和匹配与其他库定义前端堆栈. Vue.js的API是参考了AngularJS

JavaScript之Vue.js【入门基础】

相关推荐

随机推荐