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教程