在前端開發全面進入前端的時代 作為一個合格的前端開發工作者 框架是不可或缺的Vue React Anguar 作為前端小白,追隨大佬的腳步來到來到博客園,更新現在正在學習的Vue
注 : 相信學習Vue的都已經比較熟練的掌握了Js基礎 ES6 jquery 日常代碼調試 Node.js 環境 npm使用 不然學Vue可能比較吃力
推薦安裝Vue的Chrome拓展程序方便調試代碼(在谷歌商店搜索Vue 下載第一個)
vue官網指南 > https://cn.vuejs.org/v2/guide/index.html
vue在線庫
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue -- Hello word
HTML代碼:
<div id="app">
{{ message }}
</div>
js代碼:
var app = new Vue({
el: '#app', //el指定位置 css選擇器
data: {
message: 'Hello Vue!' //加載數據 app.message可以直接訪問
}
})
看到這一步,可以確認我們打印出了第一行Vue代碼,我們要怎么確認呢？打開你的瀏覽器的 JavaScript 控制台，並修改
app.message的值，你將看到上例相應地更新
- 注意!!!!!!! 剛開始會遇到這樣的錯誤
[Vue warn]: Cannot find element
為什么呢 ? 因為: 你的腳本是在目標dom元素被加載到dom之前執行
具體解釋: 你已經將你的腳本放置在頁面的頭部或放置在div元素之前的腳本標記。所以當腳本執行時，它將無法找到目標元素，從而出現錯誤。
我的解決辦法 將引用的Vue庫 和main.js 放在代碼的最后面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
</body>
<script src="vue.js"></script>
<script src="main.js"></script>
</html>
新手請勿踩坑
接下在就開始Vue學習了
參考 Vue官方文檔 書籍:Vue.js實戰 個人感覺文檔說說的很好 但是細節說的並不多 在博客中也對小細節進行補充
實例與數據
Vue.js 的創建非常簡單 ,使用構造函數Vue就可以創建Vue的根實例,並啟動Vue實例
var app = new Vue({
el:"#app",
data:{}
//選項
})
變量app代表這個實例
事實上幾乎 所有的代碼都是一個對象,寫入Vue的實例選項內
上面說的太正式了 說簡單點 吧,首先說一下 el 與data代表什么
- el : 用於指定一個頁面已經存在的DOM (就是 id class) 來掛載Vue實例 可以使用js的DOM原生代碼或者CSS選擇器
- data : 可以理解為Vue用到的數據值
var app = new Vue({
el:"#app",//document.getElementById("app") 當然推薦css選擇器寫法啦
data:{
data:1 //html 的{{ data }} 就是 1
}
//選項
})
Vue特性 雙向綁定
Vue.js很有特色的功能 不說太多 貼代碼
<div id="app1">
<input type="text" v-model="my"> //v-model 雙向綁定
{{ my }}
</div>
js:
new Vue({
el:"#app1",
data:{
my:"歡迎來到Vue"
}
})
在輸入框內輸入就是左邊的input就會實時變化
雖然
v-model雖然很像使用了雙向數據綁定的 Angular 的ng-model，但是 Vue 是單項數據流，v-model只是語法糖而已 不過這不影響初學者使用,了解一下
今天就寫這么多吧
2018-2-26 23:42