一、vue模板安裝 二、元件的使用 三、父子元件傳值 四、子元件對父元件新增事件 五、markdown編輯器   一、vue模板安裝 1.全域性安裝vue npm install vue-cli -g   2.到指定資料夾下,下載模板 vue init webpack-simple   3.下載生產環境依賴 npm install npm -g install [email protected] 
#如果需要升級npm   4.執行 npm run dev   二、元件的使用   1.所有的操作都是src資料夾中 2.新建一個components的資料夾，用來放我們自己寫的元件 3.在compoents檔案下建立Vheader.vue檔案 <template> <div id="app">       <h1>我是頭部</h1> </div>     </template>   <script> export default {     name: 'Vheader',     data(){         return {                      }         } }   </script>   <style></style>   4.重寫App.vue 5. <template>   <div>     <p>{{msg}}</p>     <ul v-for='item in stars'>         <li>{{item}}</li>     </ul>     <Vheader></Vheader>     <Vcontent></Vcontent>     <Vfooter></Vfooter>     </div>     </template>   <script>     import Vheader from "./components/Vheader"     import Vcontent from "./components/Vcontent"     import Vfooter from "./components/Vfooter"     export default {           data(){             return {                 msg: 'vue study',                 stars: ['tom', 'jory', 'mick'],               }         },         methods:{           },         computed:{           },         components:{                 Vheader:Vheader,                 Vcontent:Vcontent,                 Vfooter:Vfooter,         }     } </script>   <style>     </style>   6.先匯入元件 import Vheader from "./components/Vheader"   7.在components中掛載元件         components:{                 Vheader:Vheader,         }   8.在模板中渲染 <Vheader></Vheader>   三、父子元件傳值 1.父元件中拿到值 city:['河南','北京','上海']   2.繫結自定義屬性 <Vfooter :cityAdr='city'></Vfooter>   3.在子元件中驗證屬性     props:{         cityAdr: Array     }   4.渲染     <ul v-for='item in cityAdr'>         <li>{{item}}</li>     </ul>   四、子元件對父元件新增事件 1.子元件繫結事件 <button @click='addcity'>新增一個城市</button>   2.傳遞     methods:{         addcity(){             this.$emit('addappcity', '商丘')         },   3.父元件繫結事件接受 <Vcontent v-on:addappcity='addhander'></Vcontent>   4.新增事件             addhander(str){               this.city.push(str)             },     五、markdown編輯器 1.下載 npm install marked --save  # 下載   2.匯入 import Marked from 'marked'   3.基本頁面 <div id="app">     <h1>woshi content</h1>     <button @click='addcity'>新增一個城市</button>     <div class="mark">         <textarea name="" id="" cols="10" rows="30" class="eidter" v-model='markValue'></textarea>         <div class="viewer" v-html='currentValue'></div>     </div> </div>     4.  <script> import Marked from 'marked' export default {     name: "Vcontent",     data(){         return {             markValue:''           }     },     methods:{         addcity(){             this.$emit('addappcity', '商丘')         },     },     computed:{         currentValue(){             return Marked(this.markValue)         }     }, }   </script>   六、路由vue-router的使用 1.下載vue-router npm install vue-router --save   2.在main.js中引入 import VueRouter from 'vue-router' Vue.use(VueRouter)   3.寫一個home.vue元件 4.匯入元件 import Vmain from './components/home'   5.新增路由 const routes = [   { path: '/main', component: Vmain },   ]   const router = new VueRouter({     mode:'history',     routes })   6.掛載 new Vue({   el: '#app',   router,   render: h => h(App) })   7.在頁面使用     <ul>         <li>             <router-link to="/main">首頁</router-link>         </li>     </ul>       <router-view></router-view>