一.Vue简介
二.Vue.js的安装
2.1.npm安装
2.1.1.node.js介绍及安装

简介：

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

安装：

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/。

验证是否安装成功

2.1.2.NPM 使用介绍

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。

允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

2.1.3.使用淘宝 NPM 镜像

大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]
三.使用npm构建vue项目

在用 Vue.js 构建大型应用时推荐使用 NPM 安装：

# 最新稳定版

$ cnpm install vue
2.1.5.命令行工具

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中的代码，刷新浏览器

2.1.6.vue项目目录结构

四.Vue初探
4.1MVVM模式

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。MVVM流程图如下：

4.2案例
4.2.1.HelloWorld

<%@ 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 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

4.2.2双向绑定的案例

<%@ 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的安装及简单使用的更多相关文章

  1. vue.js not detected 解决办法-vue.js devtools 安装

    国外网站:https://www.crx4chrome.com/ 国内网站:http://www.cnplugins.com/ http://chromecj.com/web-development/ ...

  2. VUE.js devtool 安装简易教程（转）

    最简便的方法是用FQ来通过google应用商店进行安装,但是大多数人还是处在非FQ的状态 尝试过安装Node的方法来安装,但是极其不建议用这个方法安装,非常麻烦,而且必须要有node的基础,非常不接地 ...

  3. （新手入门，学习笔记）通过NPM进行Vue.js的安装

    NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,本文只介绍如何通过NPM进行安装Vue.js NodeJS官方网站:http://nodejs.cn/downlo ...

  4. vue.js项目安装

    Vue.js 安装 NPM 方法安装vue.js项目 npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v 2.3.0 #升级 npm npm install np ...

  5. Win10中Vue.js的安装和项目搭建

    一. 提前准备工作 1.Node.js环境 2.Windows10 3.npm(前端包管理工具) 4.webpack(前端资源加载/打包工具) 二. 开始安装 1..下载并安装Node.js 下载地址 ...

  6. VSCode和VUE的初始安装及简单使用入门

    (版本1.0) npm run dev 运行工程 PS F:\SDN\VIMS--前端\vue> cnpm install PS F:\SDN\VIMS--前端\vue> cnpm reb ...

  7. 001——vue.js初始安装：

    windows下安装: 1.https://nodejs.org/en/  下载安装node.js. 在cmd窗口输入node -v检查node是否安装成功. npm也随着node安装了:npm -v ...

  8. Vue.js：安装

    ylbtech-Vue.js:安装 1.返回顶部 1. Vue.js 安装 1.独立版本 我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入 ...

  9. vue.js环境安装

    1.到官网(http://nodejs.cn/download/)下载Node.JS运行环境并安装(由于现在的Node中自带npm包管理器,所以就不需要额外下载npm了) 2.如果是新手,那么建议以引 ...

随机推荐

  1. C#中 将图片保存到Sql server 中

    private void Form1_Load(object sender, EventArgs e) { #region 保存数据库 string url = @"C:\Users\Adm ...

  2. 2018-2019-2 20165234 《网络对抗技术》 Exp3 免杀原理与实践

    实验三 免杀原理与实践 实验内容 1.正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用shellcode编程等免杀工具或技巧:(1.5分) 2.通过 ...

  3. java 日常学习记录-反射

    Hero类 package helloworld; public class Hero { public String name; //姓名 public float hp; //血量 public ...

  4. [Linux]标准IO全缓冲和行缓冲

    概述 标准IO中,标准错误是不带缓冲的.若是指向终端设备的流才是行缓冲的,否则是全缓冲的. 行缓冲也可以分配缓冲区,当遇到超大行(超过缓冲区的行),缓冲区内容也会优先刷出. 示例 #include & ...

  5. 初学python之路-day13

    一.函数的嵌套定义 # 概念:在一个函数的内部定义另一个函数 # 为什么要有函数的嵌套定义: # 1)函数fn2想直接使用fn1函数的局部变量,可以讲fn2直接定义到fn1的内部,这样fn2就可以直接 ...

  6. Navicat之MySQL连接（二）

    1.下载Navicat软件包及相应的破解补丁: 2.双击navicat120_premium_cs_x64.exe开始安装,修改安装位置,一般选择安装在非系统盘! 注意:安装完成后,解压破解补丁文件拷 ...

  7. python学习-抓取知乎图片

    #!/bin/usr/env python3 __author__ = 'nxz' """ 抓取知乎图片webdriver Chromedriver驱动需要安装,并指定d ...

  8. call(),apply()和bind()的区别

    javascript中的每一个Function对象都有一个apply()和一个call()方法,它们的语法分别是: /*apply()方法*/ function.apply(thisObj[, arg ...

  9. 将已经存在的异步请求callback转换为同步promise

    由于js是单线程执行,为防止阻塞,会有很多异步回调函数callback,嵌套层次多了,可读性就差了很多.随着社区的发展,出现了promise.我们来将一些常见的回调函数做修改,变成promise的链式 ...

  10. python--random库基本介绍

    random库是使用随机数的Python标准库 python中用于生成伪随机数的函数库是random 因为是标准库,使用时候只需要import random random库包含两类函数,常用的共9个 ...