VUE模板及组件的使用

时间:2021-07-12 22:05:41
一、vue模板安装
二、组件的使用
三、父子组件传值
四、子组件对父组件添加事件
五、markdown编辑器
 
一、vue模板安装
1.全局安装vue
npm install vue-cli -g
 
2.到指定文件夹下,下载模板
vue init webpack-simple
 
3.下载生产环境依赖
npm install
npm -g install npm@3.0.0 
#如果需要升级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>