Vue.js的安装及简单使用
简介：
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
安装：
Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/。
验证是否安装成功
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
|
$ npm install -g cnpm --registry=https://registry.npm.taobao.org |
这样就可以使用 cnpm 命令来安装模块了：
|
$ cnpm install [name] |
在用 Vue.js 构建大型应用时推荐使用 NPM 安装：
|
# 最新稳定版 $ cnpm install vue |
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
|
# 全局安装 vue-cli $ cnpm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置，默认回车即可 This will install Vue 2.x version of the template. Project name（工程名）:回车 Project description（工程介绍）：回车 Author：作者名 Vue build（是否安装编译器）:回车 Install vue-router（是否安装Vue路由）：回车 Use ESLint to lint your code（是否使用ESLint检查代码）：y Set up unit tests（安装测试工具）：y Setup e2e tests with Nightwatch（也是测试相关）：y Should we run `npm install` for you after the project has been created? (recommended)：回车 |
进入项目，安装并运行：
|
$ cd my-project $ cnpm install $ cnpm run dev DONE Compiled successfully in 4388ms > Listening at http://localhost:8080 |
将生成好的项目使用IDE（idea，eclipse）的工作目录中
这里使用的idea，安装vue.js的插件。
在Terminnal中启动项目
修改HelloWorld.vue中的代码，刷新浏览器
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。MVVM流程图如下：
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>初探vue</title> </head> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <body> <div id="vue_det"> <h3>username : {{username}}</h3> <h3>address : {{address}}</h3> <h3>{{userinfo()}}</h3> </div> <!--这是我们的View--> <div id="app"> {{ message }} </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { username: "happy", address: "北京市海淀区" }, methods: { userinfo: function() { return "用户名："+this.username + "-----地址："+this.address; } } }); // 这是我们的Model var exampleData = { message: 'Hello World!' } // 创建一个 Vue 实例或 "ViewModel" // 它连接 View 与 Model var test2= new Vue({ el: '#app', data: exampleData }) </script> </body> </html> |
data:定义所需的属性
methods:定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <body> <!--这是我们的View--> <div id="app"> <p>{{ message }}</p> <input type="text" v-model="message"/> </div> <script> // 这是我们的Model var exampleData = { message: 'Hello World!' } // 创建一个 Vue 实例或 "ViewModel" // 它连接 View 与 Model new Vue({ el: '#app', data: exampleData }) </script> </body> </html> |
将message绑定到文本框，当更改文本框的值时，<p>{{ message }}</p> 中的内容也会被更新。
反过来，如果改变message的值，文本框的值也会被更新，我们可以在Chrome控制台进行尝试。
Vue.js的安装及简单使用的更多相关文章
- vue.js not detected 解决办法-vue.js devtools 安装
国外网站:https://www.crx4chrome.com/ 国内网站:http://www.cnplugins.com/ http://chromecj.com/web-development/ ...
- VUE.js devtool 安装简易教程（转）
最简便的方法是用FQ来通过google应用商店进行安装,但是大多数人还是处在非FQ的状态 尝试过安装Node的方法来安装,但是极其不建议用这个方法安装,非常麻烦,而且必须要有node的基础,非常不接地 ...
- （新手入门，学习笔记）通过NPM进行Vue.js的安装
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,本文只介绍如何通过NPM进行安装Vue.js NodeJS官方网站:http://nodejs.cn/downlo ...
- vue.js项目安装
Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...
- Win10中Vue.js的安装和项目搭建
一. 提前准备工作 1.Node.js环境 2.Windows10 3.npm(前端包管理工具) 4.webpack(前端资源加载/打包工具) 二. 开始安装 1..下载并安装Node.js 下载地址 ...
- VSCode和VUE的初始安装及简单使用入门
(版本1.0) npm run dev 运行工程 PS F:\SDN\VIMS--前端\vue> cnpm install PS F:\SDN\VIMS--前端\vue> cnpm reb ...
- 001——vue.js初始安装：
windows下安装: 1.https://nodejs.org/en/ 下载安装node.js. 在cmd窗口输入node -v检查node是否安装成功. npm也随着node安装了:npm -v ...
- Vue.js：安装
ylbtech-Vue.js:安装 1.返回顶部 1. Vue.js 安装 1.独立版本 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入 ...
- vue.js环境安装
1.到官网(http://nodejs.cn/download/)下载Node.JS运行环境并安装(由于现在的Node中自带npm包管理器,所以就不需要额外下载npm了) 2.如果是新手,那么建议以引 ...
随机推荐
- 如何参与flink开源项目
参与flink开源项目 https://flink.apache.org/how-to-contribute.html 1.回答社区问题 2.撰写bug报告 3.对于改进建议或新的特征 4.帮助别人并 ...
- grep sed awk 3个Linux中对文件内容操作的命令
在学习Linux命令中,发现3个有关于文件内容操作的命令grep,sed和awk,在这里简单汇总这3个命令主要作用,在实际中找到最合适的情景应用,详细用法可以参考其他文章. 1.grep命令 主要作用 ...
- linux文件常用命令
文件管理不外乎文件或目录的创建.删除.查询.移动,有mkdir/rm/mv 2.1. 创建和删除 创建:mkdir 删除:rm 删除非空目录:rm -rf file目录 删除日志 rm *log (等 ...
- QQ小橙团队排表机器人使用方法
版权声明 别瞎JB玩坏了...一个群一个群导入很累的 联系QQ: 986859110 目录 网页版使用说明 登录和权限操作 团队和模板选择操作 模板使用案例 团队面板操作 老板管理 人员管理 QQ群机 ...
- 014_IP专项研究监控
一.数据demo cat /proc/net/snmp Ip: Forwarding DefaultTTL InReceives InHdrErrors InAddrErrors ForwDatagr ...
- 【easy】189. Rotate Array
题目标签:Array 题目给了我们一个数组 和 k. 让我们 旋转数组 k 次. 方法一: 这里有一个很巧妙的方法: 利用数组的length - k 把数组 分为两半: reverse 左边和右边的数 ...
- C# 登陆验证码工具类VerifyCode
using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging; ...
- C++入门篇十三
常对象: const Person p1; 不可以调用普通成员函数,除非前面加了函数前面加了const可以调用常函数在对象之前加入const修饰 const Person p1; 常函数:void ...
- python正则表达式--split、sub、escape方法
1.re.split 语法: re.split(pattern, string[, maxsplit=0, flags=0]) 参数: pattern 匹配的正则表达式 string ...
- GitLab CI/CD 进行持续集成
简介 从 GitLab 8.0 开始,GitLab CI 就已经集成在 GitLab 中,我们只要在项目中添加一个 .gitlab-ci.yml 文件,然后添加一个 Runner,即可进行持续集成. ...