VUE模板及組件的使用

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

 

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>