(精华2020年5月6日更新) vue教程篇 组件component的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义组件的方式</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <hello></hello>
        <my-world></my-world>
        <!-- <myWorld></myWorld> -->
    </div>
    <script>
        // 方式1:先创建组件构造器,然后由组件构造器创建组件
        // 1. Vue.extend创建组件构造器
        var mycom = Vue.extend({
     
            template: '

hello word

'
}); // 2. Vue.component(组件名,组件构造器) Vue.component('hello', mycom); // 方式2:直接创建组件 (推荐) Vue.component('my-world', { template: '

世界, 你好

'
}); var vm = new Vue({ //这里的vm也是一个组件,称为根组件Root el: '#app', data: { msg: '啦啦啦' } }); </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件的分类  全局组件、局部组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="itapp">
        <my-hello></my-hello>
        <my-world></my-world>
    </div>

    <div id="app">
        {
     {
     name}}
        <my-hello></my-hello>
        <!-- <my-world></my-world> -->
    </div>
    <script>
        //  全局组件 可以在所有的vue实例中使用
        Vue.component('my-hello',{
     
            template:'

我是全局组件

'
, data(){ //在组件中存储数据时,必须以函数形式,函数返回一个对象 return { name:'laney' } } }); /** * 局部组件,只能在当前vue实例中使用 */ var vm=new Vue({ //这里的vm也是一个组件,称为根组件Root el:'#itapp', data:{ msg:'软谋' }, components:{ 'my-world':{ template:'

世界, 你好 { {age}}

'
, data(){ return { age:'20' } } } } }); new Vue({ //这里的vm也是一个组件,称为根组件Root el:'#app', data:{ name:'tom' } }) </script> </body> </html>

动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="flag='my-hello'">显示hello组件</button>
        <button @click="flag='my-world'">显示world组件</button>
        
         <!-- 默认每次都会销毁非活动组件并重新创建
         缓存,避免重新渲染, -->
        <keep-alive>
            <component :is="flag"></component>
        </keep-alive>
        <!-- <my-world></my-world> -->
    </div>

    <template id="wbs">
        <div>
            <h3>{
     {
     msg}}</h3>
            {
     {
     time}}
            <ul>
                <li v-for="(item,index) in arr" :key="index">{
     {
     item}}</li>
            </ul>
        </div>
    </template>
    <script>

        var vm=new Vue({
      //这里的vm也是一个组件,称为根组件Root
			el:'#app',
			data:{
     
				msg:'软谋',
                flag:'my-hello'
			},
            components:{
     
                'my-world':{
     
                    name:'wbsx',
                    template:'#wbs',
                    data(){
       
                        return {
     
                            age:'20',
                            msg:'world',
                            arr:['tom','jack','laney'],
                            time:Math.random()
                        }
                    }
                },
                'my-hello':{
     
                    template:'

我是my hello { {time}}

'
, data(){ return { time:Math.random() } } } } }); </script> </body> </html>

你可能感兴趣的:((持续更新)vue基础篇,vue.js)