vue小白快速入門

2021-09-28 23:21:52 字數 2302 閱讀 6707

一、vue是什麼

vue 是一套用於構建使用者介面的漸進式框架

壓縮後僅有17kb

二、vue環境搭建

標籤引入,
vue
會被註冊為乙個全域性變數。

但在用 vue 構建大型應用時推薦使用 npm 安裝。

這裡推薦一下是用**的cnpm,非常的快

npm install -g cnpm --registry=
然後進行安裝

# 全域性安裝 vue-cli

npm install --g vue-cli

# 建立乙個基於 webpack 模板的新專案

vue init webpack my-project

# 安裝依賴,走你

cd my-project

npm run dev

三、第乙個vue應用

doctype html

>

<

html

>

<

head

lang

="en"

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

head

>

<

body

>

<

div

id>

<

div>}

div>

<

button

@click

="say()"

>單擊事件

button

>

br>

<

div>今年}

div>

<

input

v-model

="age"

>

div>

body

>

html

>

<

script

src="lib/vue.js"

>

script

>

<

script

src="js/hello.js"

>

script

>

通過建構函式vue就可以建立乙個vue的根例項,並啟動vue應用

指定頁面上乙個已經存在的dom元素來掛載vue例項

data: }繫結

age: 22 //

通過v-model進行雙向資料繫結

四、vue生命週期

每個vue 例項建立時,都會經歷一系列的初始化過程,同時也會呼叫相應的生命週期鉤子,我們可以利用這些鉤子,在合適的時機執行我們的業務邏輯。

大體上的生命週期就是:建立(created)---掛載(mounted)---銷毀(destroy)

vue 的生命週期鉤子比較常用的有:

• created 例項建立完成後呼叫,此階段完成了資料的觀測等,但尚未掛載, $el 還不可用。需要初始化處理一些資料時會比較有用.

• mountedel 掛載到例項上後呼叫,一般我們的第乙個業務邏輯會在這裡開始。

• beforedestroy例項銷毀之前呼叫。主要解綁一些使用addeventlistener 監聽的事件等。

vue( ,

created:

function

() ,

mounted:

function

() });

完整的乙個生命週期圖:

更多專業前端知識,請上

【猿2048】www.mk2048.com

vue小白快速入門

一 vue是什麼 vue 是一套用於構建使用者介面的漸進式框架。壓縮後僅有17kb 二 vue環境搭建 但在用 vue 構建大型應用時推薦使用 npm 安裝。這裡推薦一下是用 的cnpm,非常的快 npm install g cnpm registry 然後進行安裝 全域性安裝 vue cli np...

vue快速入門

一 什麼是 vue vue 是乙個用於構建使用者介面的漸進式的js框架,vue 的核心是mvvm雙向資料繫結模式及元件化開發,它使得開發前端不僅易於上手,還便於與vue的優良生態或既有專案整合。二 快速開始 1.在頁面引入vue的js檔案即可。注意 cdn是一種加速策略,能夠快速的提供js檔案 2....

vue快速入門

一 什麼是 vue vue 是乙個用於構建使用者介面的漸進式的js框架,vue 的核心是mvvm雙向資料繫結模式及元件化開發,它使得開發前端不僅易於上手,還便於與vue的優良生態或既有專案整合。二 快速開始 1.在頁面引入vue的js檔案即可。注意 cdn是一種加速策略,能夠快速的提供js檔案 2....