JavaScript之Vue.js【入门基础】


Posted in Javascript onDecember 06, 2016

本篇将简单介绍一下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

最终的目录结构如下

JavaScript之Vue.js【入门基础】

三、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/

JavaScript之Vue.js【入门基础】

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

JavaScript之Vue.js【入门基础】

这是一个简单的双向数据绑定的例子。通过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));
});

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

JavaScript之Vue.js【入门基础】

从上面的例子可以看到, 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);
  });
});

刷新页面,查看控制台:

JavaScript之Vue.js【入门基础】

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

修改页面文本框的内容,查看控制台:

JavaScript之Vue.js【入门基础】

$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.')
    }
  });
});

刷新页面,查看控制台:

JavaScript之Vue.js【入门基础】

修改文本框内容,查看控制台:

JavaScript之Vue.js【入门基础】

  • 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 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

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

JavaScript之Vue.js【入门基础】

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

Javascript 相关文章推荐
jQuery 改变CSS样式基础代码
Feb 11 Javascript
json格式的时间显示为正常年月日的方法
Sep 08 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
jquery中EasyUI使用技巧小结
Feb 10 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 #Javascript
利用JS轻松实现获取表单数据
Dec 06 #Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 #Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 #Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 #Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 #Javascript
详解ECharts使用心得总结
Dec 06 #Javascript
You might like
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
2016/12/12 Javascript
requireJS模块化实现返回顶部功能的方法详解
2017/10/16 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
vue实现购物车案例
2020/05/30 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
windows下ipython的安装与使用详解
2016/10/20 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
python多线程分块读取文件
2019/08/29 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
python连接mysql有哪些方法
2020/06/24 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
物业管理毕业生个人的求职信
2013/11/30 职场文书
教师队伍管理制度
2014/01/14 职场文书
简历里的自我评价
2014/01/31 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
公司员工辞职信范文
2015/05/12 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
对Keras自带Loss Function的深入研究
2021/05/25 Python