VUE入门2-模板相关

最新推荐文章于 2024-08-08 08:32:28 发布

鲸鱼漫步

最新推荐文章于 2024-08-08 08:32:28 发布

阅读量90

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/weixin_42108319/article/details/105073336

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

	<div id="box">
		<h3>链接支持</h3>
	</div>



	<template id="temp">
		<dl>
			<dt></dt>
			<dd><a href=""></a></dd>
		</dl>
	</template>



<script>
    //这里通过content来判断浏览器是否支持template标签
    if ('content' in document.createElement('template')) {
          var temp = document.getElementById('temp');
          var box = document.getElementById("box");
          dt = temp.content.querySelector("dt");
          a = temp.content.querySelector("a");

          dt.textContent = "XXXX",
          a.textContent = "去学习",
          a.href = "http://ABC.com";
          var clone = document.importNode(temp.content, true);
          box.appendChild(clone);

          dt.textContent = "BBB";
          a.textContent = "去搜索";
          a.href = "http://BBC.com";
          var clone2 = document.importNode(temp.content, true);
          box.appendChild(clone2);
    }
</script>

<html>
<header>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</header>

<body>
    <div id="components-demo">
      <button-counter></button-counter>
      <button-counter></button-counter>
    </div>
</body>
<script>
    // 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
        data: function() {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })
    
    //创建的 Vue 根实例中，把这个组件作为自定义元素来使用
    //你可以将组件进行任意次数的复用
    //一个组件的 data 选项必须是一个函数
    new Vue({ el: '#components-demo' })
</script>

</html>

<html>
<header>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</header>

<body>
    <div id="components-demo">
        <blog-post title='My journery with you'></blog-post>
        <blog-post title='Why vue is so fun'></blog-post>
    </div>
    <div id='blog-post-demo'>
        <blog-post v-for='post in posts' :key='post.id' :title='post.title'></blog-post>
    </div>

</body>
<script>
    // 定义一个名为 blog-post 的新组件
    Vue.component('blog-post', {
        props: ['title'],
        template: '<h3>{{ title }}</h3>'
    })

    //创建的 Vue 根实例中，把这个组件作为自定义元素来使用
    new Vue({
        el: '#components-demo'
    })

    //可能在 data 里有一个博文的数组：
    new Vue({
        el: '#blog-post-demo',
        data: {
            posts: [{
                    id: 1,
                    title: 'My journey with Vue'
                },
                {
                    id: 2,
                    title: 'Blogging with Vue'
                },
                {
                    id: 3,
                    title: 'Why Vue is so fun'
                }
            ]
        }
    })

</script>

</html>

<html>
<header>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</header>

<body>
    <div id="blog-post-demo">
       <blog-post v-for="post in posts" :key='post.key' :post='post'></blog-post>
    </div>
</body>
<script>
    // 定义一个名为 blog-post 的新组件
    Vue.component('blog-post', {
        props: ['post'],
        template:'<div><h3>{{post.title}}</h3><div v-html="post.content"></div></div>'
    })
    //可能在 data 里有一个博文的数组：
    new Vue({
        el: '#blog-post-demo',
        data: {
            posts: [{
                    id: 1,
                    title: 'My journey with Vue',
                    content:'hello vue'
                },
                {
                    id: 2,
                    title: 'Blogging with Vue',
                    content:'hello Blogging'
                },
                {
                    id: 3,
                    title: 'Why Vue is so fun'
                }
            ]
        }
    })

</script>

</html>

<html>
<header>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</header>

<body>
    <div id="blog-post-demo">
        <div :style="{ fontSize: postFontSize + 'em' }">
            <blog-post v-for="post in posts" :key='post.key' :post='post' v-on:enlarge-text="postFontSize += 0.1"></blog-post>
        </div>
    </div>
    <template id='temp1'>
        <div>
            <h3>{{post.title}}</h3>
            <div v-html="post.content"></div><button @click="$emit('enlarge-text')">large</button>
        </div>
    </template>
</body>
<script>
    // 定义一个名为 blog-post 的新组件
    Vue.component('blog-post', {
        props: ['post'],
        template: '#temp1'
    })
    //可能在 data 里有一个博文的数组：
    new Vue({
        el: '#blog-post-demo',
        data: {
            posts: [{
                    id: 1,
                    title: 'My journey with Vue',
                    content: 'hello vue'
                },
                {
                    id: 2,
                    title: 'Blogging with Vue',
                    content: 'hello Blogging'
                },
                {
                    id: 3,
                    title: 'Why Vue is so fun'
                }
            ],
            postFontSize: 1
        }
    })

</script>

</html>

<html>
<header>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</header>

<body>
    <div id="blog-post-demo">
        <div :style="{ fontSize: postFontSize + 'em' }">
            <blog-post v-for="post in posts" :key='post.key' :post='post' v-on:enlarge-text="postFontSize += $event"></blog-post>
            <blog-post v-for="post in posts" :key='post.key' :post='post' v-on:enlarge-text="onEnlargeText"></blog-post>
        </div>
    </div>
    <template id='temp1'>
        <div>
            <h3>{{post.title}}</h3>
            <div v-html="post.content"></div><button @click="$emit('enlarge-text',0.1)">large</button>
        </div>
    </template>
</body>
<script>
    // 定义一个名为 blog-post 的新组件
    Vue.component('blog-post', {
        props: ['post'],
        template: '#temp1'
    })
    //可能在 data 里有一个博文的数组：
    new Vue({
        el: '#blog-post-demo',
        data: {
            posts: [{
                    id: 1,
                    title: 'My journey with Vue',
                    content: 'hello vue'
                },
                {
                    id: 2,
                    title: 'Blogging with Vue',
                    content: 'hello Blogging'
                },
                {
                    id: 3,
                    title: 'Why Vue is so fun'
                }
            ],
            postFontSize: 1
        },
        methods: {
            onEnlargeText: function(enlargeAmount) {
                this.postFontSize -= enlargeAmount
            }
        }
    })
</script>

</html>

<html>
<header>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</header>

<body>
    <div id="blog-post-demo">
        <input v-model='searchText'>
        <input v-bind:value="searchText" v-on:input="searchText = $event.target.value">
        <custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input>
        {{searchText}}
    </div>
</body>
<script>
    Vue.component('custom-input', {
        props: ['value'],
        template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
    })

    new Vue({
        el: '#blog-post-demo',
        data: {
            searchText: ''
        }
    })

</script>

</html>

<html>
<header>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</header>

<body>
    <div id="blog-post-demo">
        
        <alert-box>
            Something bad happened.
        </alert-box>
        <button @click='trtype="info-box"'>1</button>
        <button @click='trtype="alert-box"'>2</button>
        <table>
            <tr>
                <td :is='trtype'>hello</td>
            </tr>
        </table>
    </div>
    
    <template id='temp1'>
        <div class="demo-alert-box">
            <strong>Error!</strong>
            <slot></slot>
        </div>
    </template>
    
    <template id='temp2'>
        <div class="demo-alert-box">
            <strong>info:</strong>
            <slot></slot>
        </div>
    </template>
    
</body>
<script>
    Vue.component('alert-box', {
        template: '#temp1'
    })

    Vue.component('info-box', {
        template: '#temp2'
    })
   var app1= new Vue({
        el: '#blog-post-demo',
        data: {
            trtype:'info-box'
        }
    })
    
</script></html>