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 THICKBOX弹出层插件
Aug 30 Javascript
jQuery bind事件使用详解
May 05 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
微信小程序 标签传入数据
May 08 Javascript
ionic实现底部分享功能
May 11 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 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创建动态图像
2006/10/09 PHP
php 静态变量的初始化
2009/11/15 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
web 页面分页打印的实现
2009/06/22 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
Python模拟百度登录实例详解
2016/01/20 Python
vscode 远程调试python的方法
2017/12/01 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
Python交互环境下实现输入代码
2018/06/22 Python
基于python实现聊天室程序
2018/07/27 Python
python多进程实现文件下载传输功能
2018/07/28 Python
用Python实现筛选文件脚本的方法
2018/10/27 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
Python之修改图片像素值的方法
2019/07/03 Python
浅谈python出错时traceback的解读
2020/07/15 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
HTML5微信播放全屏问题的解决方法
2017/03/09 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
美国旅游网站:Tours4Fun
2017/02/17 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
幼儿园中秋节活动反思
2014/02/16 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
独生子女证明范本
2015/06/19 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书