1.vue初體驗
#1.1.vue簡介
#1.1.1.vue是什么？
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，什么叫做漸進式呢？通俗的講就是一層一層的，一步一步的來做事情的方式。什么又是框架呢？可以理解為一套完整的解決方案?？偨Y起來理解，vue是一個框架，提供了一套完整的解決方案，同時這個框架是漸進式的，你不必使用整個框架的所有內容，可以根據自身的應用場景只使用一部分
#1.1.2.框架和庫的區(qū)別？
框架：字面上理解為架子，會基于自身的特點為用戶提供一整套的解決方案，傾向于創(chuàng)造一套需要你來遵守的規(guī)則和范例，你可以基于這套架子快速實現(xiàn)應用，但前提是你必須按照它的規(guī)則來寫，例如：ThinkPHP框架，必須要求你按照它的命名規(guī)則、代碼組織結構來寫
庫：講代碼集合成的一個產品，供程序員調用，例如：jquery庫，只需要引入使用它的功能就可以了，至于你的應用怎樣架構，項目目錄怎樣組織它并不關心
本質上它們都是一樣的，框架可以理解為庫的超集，框架中可以引入各種庫
#1.1.3.vue漸進式使用場景理解
1.剛學完前端，進入公司，維護一個老系統(tǒng)，這個時候的應用場景就是收集表單信息，發(fā)送到后臺，這些事情jquery可以做，如果你想引入新技術，可以直接引入vuejs核心庫，把vue當作一個js庫來使用，主要做表單數(shù)據收集、驗證、提交
2.當你在上一步引入vue以后，發(fā)現(xiàn)用得越來越爽，團隊也開始接受了vue，領導也覺得效率得到了提升，于是你參與到了新項目，承擔起了常規(guī)的業(yè)務開發(fā)，在這個新項目中，你需要做到就是渲染商品列表和商品詳情頁，你開始把整個頁面的dom都交給vue來管理，原來jquery都只是不斷的找dom，然后操作dom，而使用vue以后你發(fā)現(xiàn)根本不需要再去操作dom元素了，只需要關注數(shù)據的變化，數(shù)據變化了dom就會變化，這個時候，你發(fā)現(xiàn)jquery并沒有什么用了，而且jquery用起來并沒有vue那么爽
3.接到新任務，完成一個移動站，于是你又去學習了webpack、vue-router，這樣你就開始了走上了前端工程化的道路
4.做完移動站后，又接到更大的項目，這個項目需要和后端接口頻繁溝通，大量數(shù)據在組件間共享，這個時候，你聽說了vuex可以很方便的做數(shù)據狀態(tài)管理，因此，你又用上了vuex
5.隨著公司用戶增長，你需要關注更多的性能和seo方面的問題，因此，你又用上了后端渲染 ssr
6.此時，你已經是10多人的前端leader了，為了保障團隊高質量輸出，你開始研究如何寫單元測試...
#1.2.安裝和使用
#1.2.1.安裝
首先創(chuàng)建一個項目目錄，我這里創(chuàng)建一個vue-demo的目錄，這個名字可以自定義，但是不要命名為vue 這樣會沖突
//我這里使用命令來創(chuàng)建，如果對命令不熟悉，可以直接在webstorm中創(chuàng)建
mkdir vue-demo
然后進入到vue-demo目錄,如果使用webstorm創(chuàng)建的話就直接在webstrom中打開teminal，這樣是默認進入vue-demo的
cd vue-demo
接下來初始化項目
npm init -y
最后使用npm 安裝vue
npm install vue@2.5.16
#1.2.2.使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data:{
message: 'hello world!!!'
}
})
</script>
</body>
</html>
#1.3.vue實例
可以通過new Vue函數(shù)創(chuàng)建出一個新的Vue實例
let vm = new Vue()
console.log(vm);
可以在創(chuàng)建Vue實例的時候傳入相應的選項
let vm = new Vue({
el: '#app' //id名為app的元素作為應用的根節(jié)點
})
console.log(vm.$el) //這里打印出相應的根節(jié)點
符號開頭的，用來和用戶自定義的屬性區(qū)分開
初始化時傳入的data選項，用來存放相關數(shù)據，并且這些數(shù)據是響應式的
let vm = new Vue({
el: '#app',
data: {
message: 'hello,nodeing',
username: 'xiaoqiang'
}
});
console.log(vm.$data.message) //hello,nodeing
console.log(vm.$data.username) //xiaoqiang
打開控制臺，然后輸入下面代碼，可以發(fā)現(xiàn)瀏覽器顯示也跟著變化
需要注意的是，只有初始化的時候，在選項data中存在的屬性才是響應式的
例如，初始化的時候是這樣的：
let vm = new Vue({
el: '#app',
data: {
message: 'hello,nodeing',
username: 'xiaoqiang'
}
});
其中，data里面并沒有password屬性，我們在瀏覽器中增加password屬性，是看不到變化的
