pack study header script his ray fault current -o

一、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>

VUE模板及組件的使用