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>
