1. 程式人生 > >vue中區域性元件的使用

vue中區域性元件的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{msg}}
</div>
<script src="vue.js"></script>
<script>
    //如果僅僅是例項化vue物件, 既有el又有template,如果template中定義模板內容
//那麼template模板的優先順序大於el // 首先是有一個 APP根元件, 下面有三個子元件:header, aside, content //第一步: 聲子 Vue中元件的首字母要大寫, 跟標籤區分 //元件中的data必須是個函式,一定要有返回值 let App = { //跟的是一個物件 這個物件裡 就是除了下面的Vue中,el以外的所有屬性 data() { return {text: "我是子元件"} }, //第四步: 給子元件裡寫內容. 當前模板裡的標籤,只用當前資料屬性跟下面的根元件Vue沒有關係
//在<h2>{{text}}</h2>中的{{text}}部分可以放頭部元件,內容元件和側邊欄元件 ************ template: ` <div id="a"> <h2>{{text}}</h2> </div> `, //給子元件定義方法 比如說a標籤的超連結 methods:{ }, } new Vue({ el: "#app",
//繫結的是上面的id="app" data() { return {msg: "alex"} }, //與生命週期有關 //用模板字串 //定義模板 // 第三步:用子 把<App />寫下面就是 用子 但是裡面的內容需要寫到上面子元件裡App裡 // template可以不用寫 但是要掛載到 el上去 template: ` <div class="app"> <App><App/> </div> `, components: { // 第二步: 掛子 父元件Vue裡不僅是可以掛載一個App,還可以掛載其他元件 App //如果key和value一樣,可以只寫App 替代App:App } }) </script> </body> </html>

區域性元件的使用更改 以及全域性元件的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <App></App>
</div>
<script src="vue.js"></script>
<script>
    //如果僅僅是例項化vue物件, 既有el又有template,如果template中定義模板內容
    //那麼template模板的優先順序大於el

    // 全域性元件 ***  第一個引數是元件的名字,第二個引數是options
    // 全域性元件宣告之後,可以再任意的元件裡使用, 放到別的元件之後,就成了別的元件的子元件了
    // 使用內建元件slot進行分發  讓讓別的元件中的Vbtn按鈕顯示不同的名稱  ******
    Vue.component("Vbtn",{
        data(){ return {}},
        template:`<button><slot>按鈕</slot></button> `,
    })


    // 首先是有一個 APP根元件, 下面有三個子元件:header, aside, content

    //子元件2
    //第一步:生子2  掛子往App裡掛, 不需要掛Vue裡
    let Vheader = {//物件
        data(){
            return {}
        },
        //template 是一個元件模板,一定要用一個根(父)元素包裹起來,所以一定要有一個div閉合****
        template:`
        <div>
        <h2>生子是在子元件中</h2>
        <h2 style="color:red">掛子和用子是在父元件中</h2>
        <Vbtn></Vbtn>
        </div>
        `,

    }


    //第一步:  聲子   Vue中元件的首字母要大寫, 跟標籤區分
    //元件中的data必須是個函式,一定要有返回值
    let App = { //跟的是一個物件  這個物件裡 就是除了下面的Vue中,el以外的所有屬性
        data() {
            return {text: "我是子元件"}
        },

        //第四步:  給子元件裡寫內容.  當前模板裡的標籤,只用當前資料屬性跟下面的根元件Vue沒有關係
        //在<h2>{{text}}</h2>中的{{text}}部分可以放頭部元件,內容元件和側邊欄元件 ************
        // 第三步:用子2   <Vheader></Vheader>,  下一步去對應模板Vheader的template裡寫內容
        template: `
        <div id="a">
            <h2>{{text}}</h2>
            <Vheader></Vheader>
            <Vbtn>登入</Vbtn>
            <Vbtn>註冊</Vbtn>
            <Vbtn>提交</Vbtn>
        </div>
        `,
        //給子元件定義方法  比如說a標籤的超連結
        methods:{
        },
        components:{
            // 第二步:掛子2
            Vheader
        },
    }

    new Vue({
        el: "#app",  //繫結根元素  是上面的id="app"
        data() {
            return {msg: "alex"}
        },

        //根元件中  可以把template刪除 直接在id = "app"的div中使用
        // 子元件中的template 不能刪除,因為子元件中的結構最終會渲染到id="app"的div裡面<App></App>

        components: {
            // 第二步:   掛子 父元件Vue裡不僅是可以掛載一個App,還可以掛載其他元件
            App   //如果key和value一樣,可以只寫App 替代App:App

        }
    })
</script>
</body>
</html>