VUE模板及组件的使用
Posted changwoo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE模板及组件的使用相关的知识，希望对你有一定的参考价值。
一、vue模板安装
二、组件的使用
三、父子组件传值
四、子组件对父组件添加事件
五、markdown编辑器
一、vue模板安装
1.全局安装vue
npm install vue-cli -g
2.到指定文件夹下,下载模板
vue init webpack-simple
3.下载生产环境依赖
npm install
npm -g install [email protected]
#如果需要升级npm
#如果需要升级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模板及组件的使用的主要内容，如果未能解决你的问题，请参考以下文章