JavaScript的Vue.js【简介基金会】

本文将简要介绍Vue.js，并在Node.js环境下构建一个简单的Demo

一.导言

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

与其他MVVM框架如React和Angular 2相比，它更轻、更高效，并且可以更好地与其他库集成。

它具有以下突出特点：

数据双向绑定指令模板组件的最新版本是2.1.4。演示将在以后的版本中演示。

二、环境准备

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

安装完NPM install bower-g NPM install express-generator-g后，进入项目目录(随意新建一个目录)，依次执行以下命令，创建一个名为vue-demo的项目：

express vue-demo-view=ejscdvue-demo NPM安装bower init bower install require js-save bower install vue-save所有命令成功执行后，手动添加一个名为。项目根目录中的bowerrc，内容如下

{ ' directory ' : ' public/plugins/' }引入了bootstrap，以使以后显示的演示页面看起来更好。这个步骤不是必须的

bower安装引导程序-保存

最终的目录结构如下

第三，你好世界

在学习一门新语言之前，习惯上要迎接我们美好的世界。修改view/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='样式表'/head body div id=' app ' class=' container '输入类型=' text ' v-model=' message '/p { { message } }/p/div！-require js main-script src=' http : plugins/require js/require . js ' data-main=' JavaScript/index.js '/script/body/html在public/javascrips目录中创建新的文件index . js，内容如下

///引用路径='./plugins/require js/require . js '/require . config({ baseurl : ' plugins '，path : { jquery : ' jquery/dist/jquery . min '，bootstrap : ' bootstrap/dist/js/bootstrap . min '，vue : ' vue/dist/vue . min ' })；需要(['jquery '，' bootstrap '，' vue']，函数($，bootstrap，Vue){ var VM=new Vue({ El : ' # app '，data : { message : ' Hello world！'} });});在命令行窗口的项目目录中执行命令npm start，并访问http://localhost33603000/

修改文本框中的内容，下面的文本将相应改变

这是双向数据绑定的一个简单示例。根实例由Vue类型构造，el属性被分配要绑定的页面元素ID，数据属性被分配要绑定的数据。在页面中，通过将指令v-model添加到输入元素，绑定到数据的消息属性。消息属性由p元素中的表达式{{message}}绑定。这样，页面可以直接显示绑定的数据内容，在改变输入的内容时，也可以同步改变下面的文本内容。

四.属性和方法

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

需要(['jquery '，' bootstrap '，' vue']，函数($，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的内容：

需要(['jquery '，' bootstrap '，' vue']，函数($，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 '))；//内置方法虚拟机。$ watch ('message '，function (oldval，new val){ console . log(' old val is : ' old val)；console . log(' NewVal is : ' NewVal)；});});刷新页面并查看控制台：

$ data:vue实例的数据对象。通过该属性，您可以访问原始数据对象。$ El:由vue实例装载的DOM元素对象。修改页面文本框的内容并查看控制台：

$ watch:监控vue实例属性变化的内置方法。当受监控的属性发生变化时，将触发此方法。

动词（verb的缩写）生命周期挂钩

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

需要(['jquery '，' bootstrap '，' vue']，函数($，bootstrap，Vue){ var d={ message : ' Hello world！'};var vm=new Vue({ el: '#app '，data: d，before create : function(){ console . log(' before create被触发'。)}，create d : function(){ console . log(' created '被触发。)}，beforeMount:函数(){ console.log('beforeMount被触发')}，mount ed : function(){ console . log(' mount '被触发。)}，beforeUpdate:函数(){ console.log('beforeUpdate被触发。')}，updated : function(){ console . log(' updated '被触发。)}，beforeDestroy:函数(){ console . log(' beforeddestroy被触发')}，declared : function(){ console . log(' explored '被触发。) } });});刷新页面并查看控制台：

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

BeforeCreate:初始化实例后，在配置数据观察器和事件/观察器事件之前调用它。已创建：在创建实例后调用。此时，数据观察器、属性和方法的操作以及watch/event事件的回调已经完成。BeforeMount:在挂载开始前调用：相关的render函数是第一次调用。已装载：el被新创建的虚拟机替换。$el，并且钩子在实例上装载后被调用。BeforeUpdate:在数据更新时调用，这发生在重新呈现和修补虚拟DOM之前。已更新：由于数据更改，虚拟DOM被重新呈现和修补，之后将调用钩子。此时，DOM已经更新。BeforeDestroy:在实例被销毁之前调用。在这一步，实例仍然完全可用。销毁：在vue实例销毁后调用。调用后，Vue实例指示的所有内容都将被解除绑定，所有事件侦听器都将被移除，所有子实例都将被销毁。以下是完整的生命周期图：

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流，希望多多支持我们！