一、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....