<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) ? 即阻止冒泡也阻止默認(rèn)事件 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

<!-- 只有在 `keyCode` 是 13 時調(diào)用 `vm.submit()` -->
<input v-on:keyup.13="submit">
<!-- -當(dāng)點(diǎn)擊enter 時調(diào)用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<!--當(dāng)點(diǎn)擊enter或者space時 ?時調(diào)用 `vm.alertMe()` ? -->
<input type="text" v-on:keyup.enter.space="alertMe" >

<script>
?? ?var vm = new Vue({
? ? ? ? el:"#app",
? ? ? ? methods: {
? ? ? ? ? ? ? submit:function(){},
? ? ? ? ? ? ? alertMe:function(){},
? ? ? ? }
? ? })
</script>

<div id="app">
? ? 預(yù)先定義了keycode 116（即F5）的別名為f5，因此在文字輸入框中按下F5，會觸發(fā)prompt方法
? ? <input type="text" v-on:keydown.f5="prompt()">
</div>

<script>
?? ?
? ? Vue.config.keyCodes.f5 = 116;
? ? let app = new Vue({
? ? ? ? el: '#app',
? ? ? ? methods: {
? ? ? ? ? ? prompt: function() {
? ? ? ? ? ? ? ? alert('我是 F5！');
? ? ? ? ? ? }
? ? ? ? }
? ? });
</script>

?<div v-bind:style="styleObject">綁定樣式對象</div>'
?
<!-- CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號括起來) ? ?-->
?<div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">內(nèi)聯(lián)樣式</div>
<!--組語法可以將多個樣式對象應(yīng)用到同一個元素 -->
<div v-bind:style="[styleObj1, styleObj2]"></div>

<script>
?? ?new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ? styleObject: {
? ? ? ? ? color: 'green',
? ? ? ? ? fontSize: '30px',
? ? ? ? ? background:'red'
? ? ? ? }，
? ? ? ? activeColor: 'green',
? ??? ??? ?fontSize: "30px"
? ? ? },
? ? ? styleObj1: {
? ? ? ? ? ? ?color: 'red'
? ? ? ?},
? ? ? ?styleObj2: {
? ? ? ? ? ? fontSize: '30px'
? ? ? ?}
</script>

<template v-for="(user,index) in users">
? ?<h1></h2>
</template>
//代替
<div>
? ?<h1></h2>
</div>

<div id="example">
? <!-- 2、 組件使用 組件名稱 是以HTML標(biāo)簽的形式使用 ?--> ?
? <my-component></my-component>
</div>

<script>
? ? // ? 注冊組件?
? ? // 1、 my-component 就是組件中自定義的標(biāo)簽名
?? ?Vue.component('my-component', {
? ? ? template: '<div>A custom component!</div>'
? ? })
? ? // 創(chuàng)建根實(shí)例
? ? new Vue({
? ? ? el: '#example'
? ? })
</script>

? <div id="app">
? ? ?<!--?
?? ??? ?4、 ?組件可以重復(fù)使用多次?
?? ? ? ? ?因?yàn)閐ata中返回的是一個對象所以每個組件中的數(shù)據(jù)是私有的
?? ??? ? ?即每個實(shí)例可以維護(hù)一份被返回對象的獨(dú)立的拷貝 ??
?? ?-->?
? ? <button-counter></button-counter>
? ? <button-counter></button-counter>
? ? <button-counter></button-counter>
? ? ? <!-- 8、必須使用短橫線的方式使用組件 -->
? ? ?<hello-world></hello-world>
? </div>

<script type="text/javascript">
?? ?//5 ?如果使用駝峰式命名組件，那么在使用組件的時候，只能在字符串模板中用駝峰的方式使用組件，
? ? // 7、但是在普通的標(biāo)簽?zāi)０逯?，必須使用短橫線的方式使用組件
? ? ?Vue.component('HelloWorld', {
? ? ? data: function(){
? ? ? ? return {
? ? ? ? ? msg: 'HelloWorld'
? ? ? ? }
? ? ? },
? ? ? template: '<div>{{msg}}</div>'
? ? });
? ??
? ? Vue.component('button-counter', {
? ? ? // 1、組件參數(shù)的data值必須是函數(shù)?
? ? ? // 同時這個函數(shù)要求返回一個對象 ?
? ? ? data: function(){
? ? ? ? return {
? ? ? ? ? count: 0
? ? ? ? }
? ? ? },
? ? ? // ?2、組件模板必須是單個根元素
? ? ? // ?3、組件模板的內(nèi)容可以是模板字符串 ?
? ? ? template: `
? ? ? ? <div>
? ? ? ? ? <button @click="handle">點(diǎn)擊了{(lán){count}}次</button>
? ? ? ? ? <button>測試123</button>
?? ??? ??? ?# ?6 在字符串模板中可以使用駝峰的方式使用組件?? ?
?? ??? ? ? <HelloWorld></HelloWorld>
? ? ? ? </div>
? ? ? `,
? ? ? methods: {
? ? ? ? handle: function(){
? ? ? ? ? this.count += 2;
? ? ? ? }
? ? ? }
? ? })
? ? var vm = new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ??
? ? ? }
? ? });
? </script>

? <div id="app">
? ? ? <my-component></my-component>
? </div>

<script>
? ? // 定義組件的模板
? ? var Child = {
? ? ? template: '<div>A custom component!</div>'
? ? }
? ? new Vue({
? ? ? //局部注冊組件 ?
? ? ? components: {
? ? ? ? // <my-component> 將只在父模板可用 ?一定要在實(shí)例上注冊了才能在html文件中使用
? ? ? ? 'my-component': Child
? ? ? }
? ? })
?</script>

? <div id="app">
? ? <div>{{pmsg}}</div>
? ? ?<!--1、menu-item ?在 APP中嵌套著 故 menu-item ? 為 ?子組件 ? ? ?-->
? ? ?<!-- 給子組件傳入一個靜態(tài)的值 -->
? ? <menu-item title='來自父組件的值'></menu-item>
? ? <!-- 2、 需要動態(tài)的數(shù)據(jù)的時候 需要屬性綁定的形式設(shè)置 此時 ptitle ?來自父組件data 中的數(shù)據(jù) .?
?? ??? ? ?傳的值可以是數(shù)字、對象、數(shù)組等等
?? ?-->
? ? <menu-item :title='ptitle' content='hello'></menu-item>
? </div>

? <script type="text/javascript">
? ? Vue.component('menu-item', {
? ? ? // 3、 子組件用屬性props接收父組件傳遞過來的數(shù)據(jù) ?
? ? ? props: ['title', 'content'],
? ? ? data: function() {
? ? ? ? return {
? ? ? ? ? msg: '子組件本身的數(shù)據(jù)'
? ? ? ? }
? ? ? },
? ? ? template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
? ? });
? ? var vm = new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ? pmsg: '父組件中內(nèi)容',
? ? ? ? ptitle: '動態(tài)綁定屬性'
? ? ? }
? ? });
? </script>

?<div id="app">
? ? <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
? ? ?<!-- 2 父組件用v-on 監(jiān)聽子組件的事件
?? ??? ?這里 enlarge-text ?是從 $emit 中的第一個參數(shù)對應(yīng) ? handle 為對應(yīng)的事件處理函數(shù)?? ?
?? ?-->?? ?
? ? <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
? </div>

? <script type="text/javascript" src="js/vue.js"></script>
? <script type="text/javascript">
? ? /*
? ? ? 子組件向父組件傳值-攜帶參數(shù)
? ? */
? ??
? ? Vue.component('menu-item', {
? ? ? props: ['parr'],
? ? ? template: `
? ? ? ? <div>
? ? ? ? ? <ul>
? ? ? ? ? ? <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
? ? ? ? ? </ul>
?? ??? ??? ?### ?1、子組件用$emit()觸發(fā)事件
?? ??? ??? ?### 第一個參數(shù)為 自定義的事件名稱 ? 第二個參數(shù)為需要傳遞的數(shù)據(jù) ?
? ? ? ? ? <button @click='$emit("enlarge-text", 5)'>擴(kuò)大父組件中字體大小</button>
? ? ? ? ? <button @click='$emit("enlarge-text", 10)'>擴(kuò)大父組件中字體大小</button>
? ? ? ? </div>
? ? ? `
? ? });
? ? var vm = new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ? pmsg: '父組件中內(nèi)容',
? ? ? ? parr: ['apple','orange','banana'],
? ? ? ? fontSize: 10
? ? ? },
? ? ? methods: {
? ? ? ? handle: function(val){
? ? ? ? ? // 擴(kuò)大字體大小
? ? ? ? ? this.fontSize += val;
? ? ? ? }
? ? ? }
? ? });
? </script>

?<div id="app">
? ? <div>父組件</div>
? ? <div>
? ? ? <button @click='handle'>銷毀事件</button>
? ? </div>
? ? <test-tom></test-tom>
? ? <test-jerry></test-jerry>
? </div>

? <script type="text/javascript" src="js/vue.js"></script>
? <script type="text/javascript">
? ? /*
? ? ? 兄弟組件之間數(shù)據(jù)傳遞
? ? */
? ? //1、 提供事件中心
? ? var hub = new Vue();
? ? Vue.component('test-tom', {
? ? ? data: function(){
? ? ? ? return {
? ? ? ? ? num: 0
? ? ? ? }
? ? ? },
? ? ? template: `
? ? ? ? <div>
? ? ? ? ? <div>TOM:{{num}}</div>
? ? ? ? ? <div>
? ? ? ? ? ? <button @click='handle'>點(diǎn)擊</button>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? `,
? ? ? methods: {
? ? ? ? handle: function(){
? ? ? ? ? //2、傳遞數(shù)據(jù)方，通過一個事件觸發(fā)hub.$emit(方法名，傳遞的數(shù)據(jù)) ? 觸發(fā)兄弟組件的事件
? ? ? ? ? hub.$emit('jerry-event', 2);
? ? ? ? }
? ? ? },
? ? ? mounted: function() {
? ? ? ?// 3、接收數(shù)據(jù)方，通過mounted(){} 鉤子中 ?觸發(fā)hub.$on(方法名
? ? ? ? hub.$on('tom-event', (val) => {
? ? ? ? ? this.num += val;
? ? ? ? });
? ? ? }
? ? });
? ? Vue.component('test-jerry', {
? ? ? data: function(){
? ? ? ? return {
? ? ? ? ? num: 0
? ? ? ? }
? ? ? },
? ? ? template: `
? ? ? ? <div>
? ? ? ? ? <div>JERRY:{{num}}</div>
? ? ? ? ? <div>
? ? ? ? ? ? <button @click='handle'>點(diǎn)擊</button>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? `,
? ? ? methods: {
? ? ? ? handle: function(){
? ? ? ? ? //2、傳遞數(shù)據(jù)方，通過一個事件觸發(fā)hub.$emit(方法名，傳遞的數(shù)據(jù)) ? 觸發(fā)兄弟組件的事件
? ? ? ? ? hub.$emit('tom-event', 1);
? ? ? ? }
? ? ? },
? ? ? mounted: function() {
? ? ? ? // 3、接收數(shù)據(jù)方，通過mounted(){} 鉤子中 ?觸發(fā)hub.$on()方法名
? ? ? ? hub.$on('jerry-event', (val) => {
? ? ? ? ? this.num += val;
? ? ? ? });
? ? ? }
? ? });
? ? var vm = new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ??
? ? ? },
? ? ? methods: {
? ? ? ? handle: function(){
? ? ? ? ? //4、銷毀事件 通過hub.$off()方法名銷毀之后無法進(jìn)行傳遞數(shù)據(jù) ?
? ? ? ? ? hub.$off('tom-event');
? ? ? ? ? hub.$off('jerry-event');
? ? ? ? }
? ? ? }
? ? });
? </script>

? <div id="app">
? ? <!-- 這里的所有組件標(biāo)簽中嵌套的內(nèi)容會替換掉slot ?如果不傳值 則使用 slot 中的默認(rèn)值 ?--> ?
? ? <alert-box>有bug發(fā)生</alert-box>
? ? <alert-box>有一個警告</alert-box>
? ? <alert-box></alert-box>
? </div>

? <script type="text/javascript">
? ? /*
? ? ? 組件插槽：父組件向子組件傳遞內(nèi)容
? ? */
? ? Vue.component('alert-box', {
? ? ? template: `
? ? ? ? <div>
? ? ? ? ? <strong>ERROR:</strong>
?? ??? ?# 當(dāng)組件渲染的時候，這個 <slot> 元素將會被替換為“組件標(biāo)簽中嵌套的內(nèi)容”。
?? ??? ?# 插槽內(nèi)可以包含任何模板代碼，包括 HTML
? ? ? ? ? <slot>默認(rèn)內(nèi)容</slot>
? ? ? ? </div>
? ? ? `
? ? });
? ? var vm = new Vue({
? ? ? el: '#app',
? ? ? data: {
? ? ? ??
? ? ? }
? ? });
? </script>