1、vue模板安裝
2、組件的使用
3、父子組件傳值
4、子組件對父組件添加事件
5、markdown編輯器
1、vue模板安裝
1.全局安裝vue
npm install vue-cli -g
2.到指定文件夾下,下載模板
vue init webpack-simple
3.下載生產環境依賴
npm install
npm -g install npm@3.0.0
#若是須要升級npm
#若是須要升級npm
4.運行
npm run dev
2、組件的使用
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>
3、父子組件傳值
1.父組件中拿到值
city:['河南','北京','上海']
2.綁定自定義屬性
<Vfooter :cityAdr='city'></Vfooter>
3.在子組件中驗證屬性
props:{
cityAdr: Array
}
4.渲染
<ul v-for='item in cityAdr'>
<li>{{item}}</li>
</ul>
4、子組件對父組件添加事件
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)
},
5、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>
6、路由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>