Vue例項方法和內部元件
阿新 • • 發佈：2021-01-19
Vue內建元件slot
<body> <h3>Vue內建元件slot</h3> <p>任務:實現在自定義元件標籤中新增內容輸出到模板</p> <ul> <li>建立一個元件</li> <li>在元件中宣告slot屬性並輸入內容</li> <li>在模板中使用slot標籤並輸出內容</li> </ul> <hr/> <div id='sample'> <madetag> <span slot='where'>2021/1/19</span> <span slot='which'>6</span> <span slot='how'>good</span> </madetag> </div> <template id='tem'> <div> <p>Date: <slot name='where'></slot></p> <p>Floor: <slot name='which'></slot></p> <p>Mood: <slot name='how'></slot></p> </div> </template> <script> let outMade={ template:'#tem' } let sample=new Vue({ el:'#sample', components:{ 'madetag':outMade } }) </script> </body>
在構造器外部呼叫構造器內部的事件
<body> <div id='sample'> <div v-text='count'></div> <div><button @click='addCount'>加分</button></div> </div> <div><button onclick="redCount()">減分</button></div> <div><button onclick="onceredCount()">只減一次</button></div> <div><button onclick="offCount()">關閉減分</button></div> <script> let outData={ count:1 } let sample = new Vue({ el: '#sample', data:outData, methods:{ addCount:function(){ this.count++ } } }) function redCount() { sample.$emit('redCount') } sample.$on('redCount', function () { this.count-- }) function onceredCount() { sample.$emit('onceredCount') } sample.$once('onceredCount', function () { this.count-- }) function offCount(){ sample.$off('redCount') } </script> </body>
mount && destroy && forceUpdate
<body> <h3>Vue例項方法</h3> <ol> <li>$mount 掛載</li> <li>$destroy 銷燬</li> <li>$foreUpdate 重新整理方法</li> </ol> <hr/> <div> <back></back> <div><button onclick='loseTrick()'>銷燬</button></div> <div><button onclick='upTrick()'>重新整理</button></div> </div> <script> let makextend=Vue.extend({ template:`<p>這是一個例項的擴充套件,然後通過{{option}}來掛載</p>`, data:function(){ return { option:'VUE' } }, mounted:function(){ console.log('掛載完成了！') }, destroyed:function(){ console.log('銷燬完成了！') }, updated:function(){ console.log('更新完成了！') } }) let trick= new makextend().$mount('back'); function loseTrick(){ trick.$destroy() } function upTrick(){ console.log('重新整理完成') trick.$forceUpdate() } </script> </body>
vue和jQuery的合用
<body>
<div id='sample'>
<div v-text='infor'></div>
</div>
<script>
let outData={
infor:'make different!'
}
let sample=new Vue({
el:'#sample',
data:outData,
mounted:function(){
$('#sample').html('sometime , someday ,')
},
methods:{
path:function(){
console.log('呼叫方法')
}
}
})
sample.path()
</script>
</body>