vue簡介
1.1.vue是什么?
Vue官網
- 英文官網: https://vuejs.org/
- 中文官網: https://cn.vuejs.org/
?
vue是一套構建用戶界面的漸進式javascript框架
- 構建用戶界面:將我們手里拿到的數據通過某種辦法變成用戶可以看見的界面
- 前端工程師的職責:就是在合適的時候發出合適的請求,然后將數據展現在合適位置
- vue關注的就是你把數據給我,我怎么把它變成界面
漸進式:vue可以自底向上逐層的應用
- 接地氣點說,如果你是一個簡單的應用,那么只需要引入一個輕量小的核心庫即可(這個庫壓縮完只有100多kb);如果你的應用是一個復雜的應用,可以引入各式各樣的vue插件。也就是從一個輕量小巧的核心庫逐漸遞進到使用各式各樣的vue插件庫。?
后起之秀,指的是vue之前有react,react之前有Angluer,尤雨溪也是參考了react寫的好的部分。?
Vue的特點
- 1.采用組件化模式，提高代碼復用率、且讓代碼更好維護。
組件化：一個.vue文件就是一個組件,.vue文件是Vue打造的一個全新的文件格式,.vue文件中
寫的就是HTML結構、css樣式、js交互
- 2.聲明式編碼，讓編碼人員無需直接操作DOM，提高開發效率。?
- ?3.使用虛擬DOM+優秀的Di?算法,盡量復用DOM節點。
Vue官網使用指南?
學習vue之前,先來看一下Vue官網頂部的導航區,vue團隊為了讓vue更好用,所以說寫了些文檔并且進行了分類形成了官網上方這個導航區。
教程、API最重要，學習過程中總要打開看的東西
- 教程：vue入門的文檔，先不打開，下一節點vue小案例時打開看
- API：在編碼過程中遇到不會的可以查看API，不會就找API
- 風格指南：教你如何寫出更優雅的vue代碼，目前先不用通讀，得等vue全部學完而且學的過程中也已經在慢慢滲透如何更好的編寫vue代碼
- 示例：官網給出的一些案例
- Cookbook:編寫vue代碼的技巧
生態系統?
工具和核心插件尤為重要
工具--->Vue CLI :最一開始學習時需要在HTML中引入vue.js才能編寫vue代碼,但是后續公司
中干活得借助于一個高端的平臺來開發叫腳手架
搭建vue的開發環境
1.下載開發版本的vue
1. script 引入
- 引入本地文件 (初學者選擇這種)
- CDN引入線上文件 (CDN加速的意思)
?
2. npm 安裝 指令 (后續使用這種)
- 借助于 node.js
- 安裝 nodejs、Vue的腳手架、搭建 vue項目
2.安裝開發者調試工具?
3.關閉瀏覽器F12的警告提示
?初識Vue
<body><!-- 1：準備好一個容器 --><div id="app"><!-- 3:使用數據 插值表達式 --><p>Hello,歡迎來到{{name}}</p></div>
</body>
<!-- 引入了vue的 構造方法 -- 創建對象 -->
<script src="../js/vue.js"></script>
<script >// 2:創建vue 實例// vue實例 管控 id#app 所有的屬性、數據var vm = new Vue({el:"#app", // el用于指定當前vue實例為哪個容器服務,值通常為css選擇器字符串data:{ //data中用于存儲數據,數據供el所指定的容器去使用。name:"齊魯師范大學"}})
</script>總結
?數據綁定理解
Vue中有兩種數據綁定方式:
- 1.單向數據綁定(v-bind):數據只能從data流向頁面。
- 2.雙向數據綁定(v-model):數據不僅能從data中流向頁面,還可以從頁面流向data中。
備注：
- 1) 雙向綁定一般都應用在表單類元素上(如:input、select等)
- 2) v-model:value 可以簡寫為 v-model,因為v-model默認收集的就是value值。
el與data的2種寫法?
el的2種寫法:
- new Vue時候配置el屬性
- 先創建Vue實例,隨后通過vm.$mount('#app')指定el的值。
var vm = new Vue({
el:"#app", // el的第一種寫法
data:{ //data中用于存儲數據,數據供el所指定的容器去使用。name:"高數"
}
})
vm.$mount('#app');//el的第二種寫法data的兩種寫法:
- 對象式
- 函數式
var vm = new Vue({
el:"#app",
data:{ //data的第一種寫法:對象式。name:"高數"
}
data:function(){//data的第二種寫法:函數式
return{name:"高數"}
}
data(){//簡化函數式return{name:"高數"} ?
}
})?如何選擇:目前哪種寫法都可以,以后學到組件時,data必須使用函數式,否則會報錯。
一個重要原則：
由vue管理的函數，一定不要寫箭頭函數，一旦寫了箭頭函數，this就不再是vue實例了，而是表示window。
MVVM模型?
1. M：模型(Model) ：對應 data 中的數據
2. V：視圖(View) ：模板
3. VM：視圖模型(ViewModel) ： Vue 實例對象
?
?觀察發現:
- 1.data中所有的屬性,最后都出現在了vm身上。
- 2.vm身上所有的屬性及vue原型上所有的屬性,在Vue模板中都可以直接使用。
?內置指令
?
)
