之前上課也學過vue.js，但是一遍過下來，實話，沒有記住什么，所以決定自己在對照著文檔過一遍，所以之后會弄一些基礎的東西，還請大神們莫噴~~~~今天先給平臺打一個預防針，Young C 要來啦~~ 吼吼，基礎中的基礎。那這里，不能全是大白話，咱們先說點干的吧，比如說 如何安裝Vue.js。。。。哈哈 ~~ 是不是被簡單的驚到了， 慢慢來。。。。。所以要淡定，淡定。。。。。
復制代碼安裝Vue.js 方法
- 直接引用 vue.js 文件<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
-NPM安裝# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm run dev
復制代碼初識vue很多還屢不清，所以按照文檔，敲了下，留下來理解.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>index</title><script src="../../node_modules/vue/dist/vue.js"></script></head><body><!--app--><div class="app"><p style="color: brown">app</p>{{message}}</div><!--app2--><div class="app2"><p style="color: brown">app2</p><span :title="message">鼠標懸停幾秒鐘查看此處動態綁定的提示信息！</span></div><!--app3--><div class="app3"><p style="color: brown">app3</p><p v-if="start">現在看到我了</p></div><!--app4--><div class="app4"><p style="color: brown">app4</p><ul><li v-for="item in list">{{item.text}}</li></ul></div><!--app5--><div class="app5"><p style="color: brown">app5</p><p>{{message}}</p><button @click="fanzhuan">點擊翻轉</button></div><!--app6--><div class="app6"><p style="color: brown">app6</p><p>{{message}}</p><input v-model="message"></div><!--app7--><div class="app7"><p style="color: brown">app7</p><ol><todo-itemv-for="item in app7List":todo="item":key="item.id"></todo-item></ol></div><script>let app = new Vue({el:'.app',data:{message:'hello,word'}});//-----------------------app2let app2 = new Vue({el:'.app2',data:{message:'頁面加載于' + new Date().toLocaleString()}});//--------------------app3let app3 = new Vue({el:'.app3',data:{start:true}});//--------------------app4let app4 = new Vue({el:'.app4',data:{list:[{text:'從頭'},{text:'再來'},{text:'一遍'}]}});app4.list.push({text:'測試'});//--------------------app5let app5 = new Vue({el:'.app5',data:{message:'hello,js.vue'},methods:{fanzhuan(){this.message = this.message.split('').reverse().join('');}}});//-------------------app6let app6 = new Vue({el:'.app6',data:{message:'hello,js.vue'}});//-------------------app7Vue.component('todo-item',{props:['todo'],template:'<li>{{todo.text}}</li>'});let app7 = new Vue({el:'.app7',data:{app7List:[{id:1,text:'蔬菜'},{id:2,text:'水果'},{id:3,text:'主食'}]}})</script></body></html>復制代碼以上是根據官方文檔敲出來的，可忽略。
)
)
)
