vue中區域性元件的使用
阿新 • • 發佈：2018-12-01
<!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>