Vue.js的安裝及簡單使用

時間 2019-11-22

標籤 vue.js vue 安裝簡單使用欄目 JavaScript 简体版

原文原文鏈接

一.Vue簡介

二.Vue.js的安裝

2.1.npm安裝

2.1.1.node.js介紹及安裝

簡介：javascript

簡單的說 Node.js 就是運行在服務端的 JavaScript。html

Node.js 是一個基於Chrome JavaScript 運行時創建的一個平臺。vue

Node.js是一個事件驅動I/O服務端JavaScript環境，基於Google的V8引擎，V8引擎執行Javascript的速度很是快，性能很是好。java

安裝：node

Node.js 安裝包及源碼下載地址爲：https://nodejs.org/en/download/。webpack

驗證是否安裝成功web

2.1.2.NPM 使用介紹

NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題，常見的使用場景有如下幾種：vue-router

容許用戶從NPM服務器下載別人編寫的第三方包到本地使用。vue-cli

容許用戶從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>