vue升华—组件化

时间  2019-11-29
标签 vue 升华 组件 繁體版
原文   原文链接

1 template 模板html

不建议用vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue1</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        
    </div>
    <script>
        // template 模板，能够将里面的内容渲染到绑定的div里
   new Vue({
            el : "#app",
            template : '<div>王振玲</div>',
            // template : '<div>{{ msg }}</div>'
            data :{
                msg : "liuluwei"
            } 
        })
    </script>
</body>
</html>

2 建立组件app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue1</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-component></my-component>
    </div>
    <script>
        // 建立组件："my-component"自定义组件名称templete后用反引号
        Vue.component("my-component",{
            template : `
            // 多个节点，须要用一个根节点包裹
            <div>
            <h1>联系方式</h1>
            <p>联系方式：{{ msg }}</p>
            </div>`,
            // 组件化里面的data必须写成函数，而后return返回值
            data:function(){
                return{
                    msg:12344567554
                }
            }
        })
          
        new Vue({
            el:"#app"
        })
    </script>
</body>
</html>

3 组件中的data函数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue1</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <my-conponent></my-conponent>
        <my-conponent></my-conponent>  
    </div>
    <script>
        Vue.component("my-conponent", {
            template: `<div>
          <button @click = 'clickMe'>{{ count }}</button>
          </div>`,
          //组件中data必须是一个函数
            data: function() {
                return {
                    count: 0
                }
            },
            methods:{
                clickMe:function(){
                    this.count++
                }
            }
        })
        new Vue({
            el: "#app"
        })
    </script>
</body>

</html>

4 全局组件组件化

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue1</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>

<body>
    <div id="app1">
        <my-conponent></my-conponent>
    </div>
    <div id="app2">
        <my-conponent></my-conponent>          
    </div>
    <script>
        Vue.component("my-conponent", {
            template: `<div>
                <h1>联系方式</h1>
                <p>联系我：{{ msg }}</p>
          </div>`,
            data: function() {
                return {
                    msg:123455688
                }
            }
        })
        //建立一个vue实例，控制id=app1的div
        new Vue({
            el: "#app1"
        })
        //建立一个vue实例，控制id=app2的div
        new Vue({
            el: "#app2"
        })
    </script>
</body>

</html>

5 全局组件的另外一种写法ui

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue1</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>

<body>
    <div id="app1">
        <my-conponent></my-conponent>
    </div>
    <div id="app2">
        <my-conponent></my-conponent>          
    </div>
    <script>
        var component = {
            template: `<div>
                <h1>联系方式</h1>
                <p>联系我：{{ msg }}</p>
          </div>`,
            data: function() {
                return {
                    msg:123455688
                }
            }
        }
        Vue.component("my-conponent", component)
        //建立一个vue实例，控制id=app1的div
        new Vue({
            el: "#app1"
        })
        //建立一个vue实例，控制id=app2的div
        new Vue({
            el: "#app2"
        })
    </script>
</body>

</html>

6 局部组件this

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue1</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>

<body>
    <div id="app1">
        <my-conponent></my-conponent>
    </div>
    <div id="app2">
        <my-conponent></my-conponent>          
    </div>
    <script>
        var component = {
            template: `<div>
                <h1>联系方式</h1>
                <p>联系我：{{ msg }}</p>
          </div>`,
            data: function() {
                return {
                    msg:123455688
                }
            }
        }
        //组件只在app1里面好使
        new Vue({
            el: "#app1",
            components:{
                "my-conponent" :component
            }
        })
        new Vue({
            el: "#app2"
        })
    </script>
</body>

</html>
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程