Vue 簡單的總結二
阿新 • • 發佈：2018-11-29
ike rim 優先級 限制 urn method let 屬性 有一個
v-model 只能應用像在input textare select 標簽
v-model.lazy 懶監聽 不及時更改 當失焦的時候才更改
v-model.number 限制只能輸入數字
v-model.trim 取出兩邊空格
<body> <div id="app"> <label for="username">用戶名：</label> <input type="text" v-model="msg" id="username"> <p>{{ msg }}</p> <textarea placeholder="add multiple lines" v-model=‘msg‘></textarea> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <br> <!--多個復選框 使用列表保存--> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike"value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> <br> <select v-model="selected"> <option disabled value="">請選擇</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> <!--懶監聽--> <input v-model.lazy="msg" > <!--數字顯示--> <input v-model.number="age" type="number"> <!--清除前後空格--> <input v-model.trim="msg"> </div> <script src="vue.js"></script> <script> new Vue({ el: ‘#app‘, data() { return { msg: ‘alex‘, checked: false, checkedNames: [], selected:‘‘, age:0 } } }) </script> </body>
父子組件可以不使用template，但子組件最好還是有 註意：template中的標簽一定要用一個標簽包起來不然報這個錯
<body> <div id="app"> <App></App> </div> <script src="vue.js"></script> <script> //如果僅僅是實例化vue對象中 既有el 又有template，如果template中定義模板的內容 // 那麽template模板的優先級大於el //第一個參數是組件的名字，第二個參數 options參數 它是全局組件 // <slot></slot> slot是vue中提供的內容組件 它會去分發 內容 Vue.component(‘VBtn‘,{ data(){ return { } }, template:`<button> <slot></slot> </button>` }) // App header Vaside Vcontent // 1.聲子 Vue中 組件的名字 首字母要大寫 跟標簽區分 組件中的data必須是個函數 一定要有返回值 let Vheader = { data(){ return { } }, //template定義模板的內容 // Component template should contain exactly one root element template:` <div> <h2>日天</h2> <h2>日天</h2> <VBtn>登錄</VBtn> <VBtn>註冊</VBtn> <VBtn>按鈕</VBtn> <VBtn>提交</VBtn> </div> ` } let App = { data(){ return { text:"我是日天" } }, template:` <div id="a"> <h2>{{ text }}</h2> <Vheader></Vheader> <VBtn>刪除</VBtn> <br> </div> `, methods:{ }, components:{ Vheader } } new Vue({ el: ‘#app‘, data() { return { msg:‘alex‘ } }, template:`<App />`, components:{ //2.掛子 //如果key和value一樣 可以只寫一個 //App:App App } }) </script> </body>
1、聲明子
let App = { data(){ return { } }, template:`<div> </div>` }
components:{
# 鍵和值相同可簡寫 正常 App：App
App
Son
...
}
1 可在template 中使用 template:` <App /> 或者 <App></App> `, 2 沒有template 可以在引用部分直接用 <div id="app"> <App></App> </div>
父==》子
1.在子組件中 使用props聲明 可以直接在子組件中任意使用
2.父組件 要定義自定義的屬性
子==》父
1、子組件中 通過$emit()觸發父組件中自定義的事件
2、父組件中聲明自定義的事件介紹
使用$on()和$emit() 綁定的是同一個實例化對象
A===>B組件傳值
1、B組件中要使用$on(‘事件的名字’,function(){})
2、A組件中使用$emit(‘事件的名字‘,值)
Vue 簡單的總結二