1 環境準備
完成後通過cmd開啟控制台輸入node -v 可以看到版本資訊
nrm ls 檢視映象倉庫 nrm use taobao 使用taobao這個映象倉庫 nrm test taobao 測試連線速度
3. 安裝完成後重啟電腦
4.1 開啟idea 建立乙個static web 專案 hello-vue
2 開啟terminal控制台進入 專案目錄 cd hello-vue 然後進行初始化 命令 npm init -y
成功後的專案目錄:hello.html是我建立的
2 測試練習:
1新建乙個html 例如 hello.html
}頁面效果://vue渲染需要放在html語句後面 先有需要渲染的元素然後才能繫結元素
el:"#div", //繫結需要渲染的元素
data:
})
2 建立 test2.html 測試 雙向繫結和事件處理
1效果input 與 num繫結 input 的value 值變化 導致 data的num值變化doctype html
>
2<
html
lang
="en"
xmlns:v-on
="">
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>雙向繫結
title
>
6<
script
src="node_modules/vue/dist/vue.js"
>
script
>78
head
>
9<
body
>
10<
div
id="div"
>
11<
h1>這只是個標題
h1>
12 你有幾隻羊?<
input
type
="text"
v-model
="num"
placeholder
="請誠實哦"
>
13<
button
v-on:click
="add"
>+
button
><
br />
14我有}隻羊。
15div
>
16<
script
>
17let div
=new
vue(,
22methods:26}
27})
28script
>
29body
>
30html
>
頁面}與資料num繫結 num變化 頁面效果變化
(通俗講 就是你把輸入框裡的2 改變 下一句的我有2隻羊的2也會改變)
其它事件就是 v-on:事件名
好了入門就這些吧
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....
vue快速入門 4
每個 vue 應用都是通過用vue函式建立乙個新的vue 例項開始的 var vm new vue 在建構函式中傳入乙個物件,並且在物件中宣告各種vue需要的資料和方法,包括 等等 接下來我們一 一介紹。每個vue例項都需要關聯一段html模板,vue會基於此模板進行檢視渲染。我們可以通過el屬性來...