<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                [TOC] <br/><br/><br/> # <b style="color:#4F4F4F;">簡介說明</b> 原文鏈接: - [Vue2](https://v2.cn.vuejs.org/) - [Vue.js 九個性能優化技巧](https://zhuanlan.zhihu.com/p/348087610) - [在 Vue2 的類組件上建立 Vue3 的 composition API 抽象](https://mp.weixin.qq.com/s/WsiG1aewgnuCyly3BYkC6Q) - [渲染函數 & JSX](https://v2.cn.vuejs.org/v2/guide/render-function.html) ``` 版本 :vue 作用 :組件化開發的漸進式框架 ``` <br/> # <b style="color:#4F4F4F;">安裝模塊</b> <br/> # <span style="color:#619BE4">Widows</span> ***** npm install vue <br/> # <span style="color:#619BE4">Linux</span> ***** npm install vue <br/> # <span style="color:#619BE4">引入說明</span> ***** 引入說明 <br/> ### 示例內容 <span style="color:red">1. 瀏覽器</span> ``` <div id="app"> {{ message }} </div> <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> ``` <br/> # <b style="color:#4F4F4F;">Vue.[opt]</b> <br/> # <span style="color:#619BE4">name</span> ***** 只有作為組件選項時起作用 <br/> # <span style="color:#619BE4">mixins</span> ***** 混入注冊,合并mixins傳入的vue屬性,接收數組 <br/> # <span style="color:#619BE4">extends</span> ***** 允許聲明擴展另一個組件 (可以是一個簡單的選項對象或構造函數),而無需使用 Vue.extend <br/> # <span style="color:#619BE4">directives</span> ***** 自定義指令 <br/> # <span style="color:#619BE4">provide</span> ***** 可以跨組件傳遞的函數或者是對象 <br/> # <span style="color:#619BE4">inject</span> ***** 接收跨組件傳遞的函數或者是對象 <br/> # <span style="color:#619BE4">propsData</span> ***** 創建實例時傳遞 props。主要作用是方便測試。 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` var Comp = Vue.extend({ props: ['msg'], template: '<div>{{ msg }}</div>' }) var vm = new Comp({ propsData: { msg: 'hello' } }) ``` <br/> # <span style="color:#619BE4">props</span> ***** 定義從父元素獲取的變量名,未使用props定義的屬性,會直接放到根元素上面 <br/> ### 示例內容 <span style="color:red;">1. 類型驗證</span> ``` props: { a: Number, b: [String, Number], c: { type: String, required: true }, d: { type: Number, default: 100 }, e: { type: Object, default: function() { return {message: "hello"}; }, f: { validator: function(value) { return true; } } } } ``` <span style="color:red;">2. 結構類型</span> ``` props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // 或任何其他構造函數 } ``` <br/> # <span style="color:#619BE4">inheritAttrs</span> ***** 設置未接收的props屬性不自動綁定到根元素上面,可以通過this.$attrs獲取 <br/> # <span style="color:#619BE4">components</span> ***** 使用的組件對象字典 <br/> # <span style="color:#619BE4">el</span> ***** 組件的掛載點,不提供template將innerHtml作為template,且自動掛載 <br/> # <span style="color:#619BE4">template</span> ***** 組件的視圖模板 <br/> ### 示例內容 <span style="color:red;">1. 瀏覽器中的模板</span> ``` <template id="temp"> <div>Hello template</div> </template> ``` <br/> # <span style="color:#619BE4">methods</span> ***** 將方法定義到methods <br/> # <span style="color:#619BE4">computed</span> ***** 定義派生計算數據,會緩存結果,可以感知依賴 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` computed: { "msg1": function() { }, "msg2": { set() { }, get() { } } }, ``` <br/> # <span style="color:#619BE4">watch</span> ***** 監聽屬性變化,執行函數,支持層級監聽,深度監聽需要設置deep <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` watch: { msg: { handler: "方法名", deep: "深度觀察:對象任何層級數據發生變化,watch方法都會被觸發", immediate: true// 立即調用,在偵聽開始時立即調用一次watch方法 }, "msg.sender": ["m1", "m2"], // 數組方式,可調用多個方法 "msg.func": function() { //一個函數被觸發的通用形式 } }, ``` <span style="color:red;">2. 官方案例</span> ``` var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 方法名 b: 'someMethod', // 該回調會在任何被偵聽的對象的 property 改變時被調用,不論其被嵌套多深 c: { handler: function (val, oldVal) { /* ... */ }, deep: true }, // 該回調將會在偵聽開始之后被立即調用 d: { handler: 'someMethod', immediate: true }, e: [ 'handle1', function handle2 (val, oldVal) { /* ... */ }, { handler: function handle3 (val, oldVal) { /* ... */ }, /* ... */ } ], // watch vm.e.f's value: {g: 5} 'e.f': function (val, oldVal) { /* ... */ } } }) vm.a = 2 // => new: 2, old: 1 ``` <br/> # <span style="color:#619BE4">filters</span> ***** 過濾方法,支持管道符使用,可以多層過濾 <br/> # <span style="color:#619BE4">model</span> ***** 允許一個自定義組件在使用 v-model 時定制 prop 和 event <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` Vue.component('my-checkbox', { model: { prop: 'checked', event: 'change' }, props: { // this allows using the `value` prop for a different purpose value: String, // use `checked` as the prop which take the place of `value` checked: { type: Number, default: 0 } } }) ``` <br/> # <span style="color:#619BE4">delimiters</span> ***** 改變純文本插入分隔符,可以解決模板引擎沖突 <br/> # <span style="color:#619BE4">functional</span> ***** 聲明函數式組件,使組件無狀態 (沒有 data) 和無實例 (沒有 this 上下文),布爾值 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` 組件中選項聲明: - functional - abstract 都不會產生虛擬節點,同時父組件也無法獲取到對應的default插槽 ``` <br/> # <span style="color:#619BE4">data</span> ***** 數據創建函數 <br/> # <span style="color:#619BE4">render</span> ***** 渲染組件的視圖,與template類似,但是更底層 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` render(createElement){ // createElement接收三個參數 // 1. HTML標簽字符串(String) | 組件選項對象(Object) | 節點解析函數(Function) // 2. 定義節點特性的對象(Object) // 3. 子節點,createElement構建的VNode節點或字符串生成的無標簽文本節點(Array | String) return createElement() } ``` <br/> # <span style="color:#619BE4">renderError</span> ***** 當 render 函數遭遇錯誤時,提供另外一種渲染輸出 <br/> # <span style="color:#619BE4">beforeCreate</span> ***** 實例化初始之后,數據觀測和事件綁定之前 <br/> # <span style="color:#619BE4">created</span> ***** 實例化初始之后,掛載尚未開始 <br/> # <span style="color:#619BE4">beforeMount</span> ***** 掛載之前,render函數首次被調用 <br/> # <span style="color:#619BE4">mounted</span> ***** 實例掛載到DOM節點之后 <br/> # <span style="color:#619BE4">beforeUpdate</span> ***** 數據更新時,在虛擬DOM狀態變化之前 <br/> # <span style="color:#619BE4">updated</span> ***** 虛擬DOM被重新渲染之后 <br/> # <span style="color:#619BE4">activated</span> ***** 被 keep-alive 緩存的組件激活時調用 <br/> # <span style="color:#619BE4">deactivated</span> ***** 該鉤子在服務器端渲染期間不被調用 <br/> # <span style="color:#619BE4">beforeDestory</span> ***** 實例銷毀之前,此時實例依然可用 <br/> # <span style="color:#619BE4">destroyed</span> ***** 實例銷毀之后,此時VUE實例及其子實例將完全解綁 <br/> # <span style="color:#619BE4">errorCaptured</span> ***** 當捕獲一個來自子孫組件的錯誤時被調用 <br/> # <b style="color:#4F4F4F;">Vue</b> <br/> # <span style="color:#619BE4">[new]-Vue()</span> ***** 實例化一個vue app對象,注意模板屬性中要用-進行連詞,接收時要使用駝峰命名 <br/> ### *指令 <span style="color:red;">1. 列表</span> | 指令 | 作用 | | --- | --- | | v-if | 當值為true時頁面顯示,刪除不顯示標簽 | | v-else-if | 配合v-if | | v-else | 配合v-if | | v-show | 當值為true時頁面顯示,隱藏不顯示標簽 | | v-for | 循環遍歷可迭代對象,可循環number | | v-once | 只渲染一次,后期不再更新 | | v-slot | 嵌入模板插槽 | | v-on | 定義事件和哪一個方法進行綁定,$event代表事件對象 | | v-bind | 定義dom屬性和哪一個data進行單向綁定 | | v-model | 進行雙向綁定,同時只能有一個屬性,由元素或組件自身決定,綁定一個屬性和元素自身變化值對應 | | v-text | 設置innerText | | v-html | 設置 innerHtml,解析html內容,不轉義 | | v-pre | 忽略這個元素和它子元素內容的編譯 | | v-cloak | 解決渲染慢出現模板語法的問題,配合css [v-cloak]{display:none} | <span style="color:red;">2. 修飾符</span> | 修飾符 | 定義域 | 作用 | | --- | --- | --- | | sync | v-bind | 組件內部需要觸發,用于同步變量更新,與v-model指令不同處在于可以定義多個 | | prop | v-bind | 作為一個 DOM property 綁定而不是作為 attribute 綁定 | | camel | v-bind | 將 kebab-case 特性名轉換為 camelCase | | lazy | v-model | 代替input使用change事件 | | number | v-model | 將值轉換為number類型 | | trim | v-model | 過濾首尾空格 | | stop | v-on | 阻止冒泡 | | prevent | v-on | 阻止默認行為 | | capture | v-on | 是否捕獲階段 | | self | v-on | 限制事件僅作用于自身 | | once | v-on | 事件只觸發一次 | | passive | v-on | 移動端,限制事件用不調用preventDefault() | | 13 | v-on:keyup | 輸入13號鍵位 | | enter | v-on:keyup | 輸入enter | | delete | v-on:keyup | 輸入delete | <br/> # <span style="color:#619BE4">*version</span> ***** 提供字符串形式的 Vue 安裝版本號 <br/> # <span style="color:#619BE4">*filters</span> ***** 全局過濾方法,支持管道符使用,可以多層過濾 <br/> # <span style="color:#619BE4">*mixin</span> ***** 全局加入混入內容 <br/> <span style="color:red;">1. 舉例說明</span> ``` // 定義一個混入對象 var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // 定義一個使用混入對象的組件 var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component() // => "hello from mixin!" ``` <br/> # <span style="color:#619BE4">*set()</span> ***** 設置引用類型進行注冊 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` Vue.set(app.user, "age", 10) ``` <br/> # <span style="color:#619BE4">*delete()</span> ***** 刪除對象的 property <br/> # <span style="color:#619BE4">*use()</span> ***** 注冊插件 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` Vue.use(插件); Vue.use(function(){console.log("插件")}); Vue.use({ install:function(_vue,options){ // 注入邏輯 _vue.prototype.http=http; } }) ``` <br/> # <span style="color:#619BE4">*extend()</span> ***** 創建Vue實例類構造器,多用于TS類型檢查 <br/> # <span style="color:#619BE4">*component()</span> ***** 注冊或獲取全局組件 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` Vue.component('tab', { template: `<div>選項卡</div>` }); let app = new Vue({ template: `<div><h1>測試</h1><tab/></div>` }); app.$mount("#root") ``` <br/> # <span style="color:#619BE4">*nextTick()</span> ***** 在下次 [ DOM 更新 ]循環結束之后執行延遲回調,在修改數據之后立即使用這個方法,獲取更新后的 DOM。 <br/> # <span style="color:#619BE4">*directive()</span> ***** 創建全局自定義指令 <br/> ### 參數說明 <b style="color:#808080;">name:</b> * 類型:字符串 * 默認值:無 * 描述:自定義指令名稱 * 可選值:[ ] <b style="color:#808080;">opt:</b> * 類型:對象 * 默認值:無 * 描述:指令配置 * 可選值:[ ] - bind - inserted - update - componentUpdate - unbind <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` Vue.directive("test", { bind: function (el, binding) { console.log("bind"); }, inserted: function (el, binding) { console.log("inserted"); }, componentUpdated: function (el, binding) { console.log("componentUpdated"); }, update: function (el, binding) { console.log("update"); }, unbind: function (el, binding) { console.log("unbind"); } }); ``` <span style="color:red;">2. 指令格式</span> ``` v-指令名:參數(binding.arg).修飾符(binding.modifiers)="傳入內容(binding.value)" ``` <br/> # <span style="color:#619BE4">*compile()</span> ***** 將一個模板字符串編譯成 render 函數 <br/> # <span style="color:#619BE4">*observable()</span> ***** 讓一個對象可響應。Vue 內部會用它來處理 data 函數返回的對象。 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` const state = Vue.observable({ count: 0 }) const Demo = { render(h) { return h('button', { on: { click: () => { state.count++ }} }, `count is: ${state.count}`) } } ``` <br/> # <span style="color:#619BE4">$el</span> ***** 綁定的元素 <br/> # <span style="color:#619BE4">$vnode</span> ***** 獲取虛擬DOM對象 <br/> # <span style="color:#619BE4">$root</span> ***** 訪問根組件 <br/> # <span style="color:#619BE4">$parent</span> ***** 訪問父組件 <br/> # <span style="color:#619BE4">$children</span> ***** 訪問子元素組件 <br/> # <span style="color:#619BE4">$refs</span> ***** 獲取有ref屬性的dom元素,獲取組件節點 <br/> # <span style="color:#619BE4">$options</span> ***** 用來獲取data外面的數據和方法 <br/> # <span style="color:#619BE4">$attrs</span> ***** 獲取未接收的props <br/> # <span style="color:#619BE4">$props</span> ***** 獲取傳入的數據 <br/> # <span style="color:#619BE4">$listeners</span> ***** 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器 <br/> ### 示例內容 <span style="color:red;">1. 傳遞父組件參數</span> ``` v-bind="$props" v-on="$listeners" ``` <br/> # <span style="color:#619BE4">$data</span> ***** 渲染的數據 <br/> # <span style="color:#619BE4">$slots</span> ***** 訪問靜態插槽的內容 <br/> # <span style="color:#619BE4">$scopedSlots</span> ***** 訪問作用域插槽 <br/> # <span style="color:#619BE4">\_\_patch\_\_</span> ***** 渲染虛擬DOM為真實DOM <br/> # <span style="color:#619BE4">$on()</span> ***** 監聽一個傳入自定義事件 <br/> # <span style="color:#619BE4">$emit()</span> ***** 觸發一個傳入自定義事件 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` this.$emit("change","value") ``` <br/> # <span style="color:#619BE4">$watch()</span> ***** 綁定數據觀察回調 <br/> # <span style="color:#619BE4">$mount()</span> ***** 把渲染后的視圖掛載到指定位置 <br/> # <span style="color:#619BE4">$set()</span> ***** 設置引用類型進行注冊 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` Vue.set(app.user, 'gender', '男'); // 實例.$set 是 Vue.set 的別名 app.$set(app.user, 'gender', '男') ``` <br/> # <span style="color:#619BE4">$nextTick()</span> ***** 在下次 [ DOM 更新 ]循環結束之后執行延遲回調,在修改數據之后立即使用這個方法,獲取更新后的 DOM。 <br/> # <span style="color:#619BE4">$createElement()</span> ***** 創建虛擬dom節點 <br/> # <b style="color:#4F4F4F;">Vue.config</b> <br/> # <span style="color:#619BE4">*silent</span> ***** 開啟或取消 Vue 所有的日志與警告 <br/> # <span style="color:#619BE4">*optionMergeStrategies</span> ***** 自定義合并策略的選項 <br/> # <span style="color:#619BE4">*devtools</span> ***** 配置是否允許 vue-devtools 檢查代碼 <br/> # <span style="color:#619BE4">*errorHandler</span> ***** 指定組件的渲染和觀察期間未捕獲錯誤的處理函數 <br/> # <span style="color:#619BE4">*warnHandler</span> ***** 為 Vue 的運行時警告賦予一個自定義處理函數 <br/> # <span style="color:#619BE4">*ignoredElements</span> ***** 須使 Vue 忽略在 Vue 之外的自定義元素 <br/> # <span style="color:#619BE4">*keyCodes</span> ***** 給 v-on 自定義鍵位別名 <br/> # <span style="color:#619BE4">*performance</span> ***** 設置為 true 以在瀏覽器開發工具的性能/時間線面板中啟用對組件初始化、編譯、渲染和打補丁的性能追蹤 <br/> # <span style="color:#619BE4">*productionTip</span> ***** 設置為 false 以阻止 vue 在啟動時生成生產提示 <br/> # <b style="color:#4F4F4F;">Vue.transition-group</b> <br/> # <span style="color:#619BE4">[com]-transition-group</span> ***** 動畫組件,渲染v-for產生的列表過渡 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` <template> <div id="app"> <transition-group tag="ul"> <li :key="item" v-for="item of data"> {{item}} </li> </transition-group> <label> 輸入內容: <input type="text" v-model="val"> </label> <button @click="addItem">增加內容</button> </div> </template> <script> export default { name: 'app', data() { return { data: [...Array(10).keys()], val: "testData" } }, methods: { addItem() { console.log(this.val); this.data.push(this.val); } } } </script> <style> .v-enter-active, .v-leave-active { transition: opacity 2s; } .v-enter, .v-leave-to { opacity: 0; } .v-enter-to, .v-leave { opacity: 1; } </style> ``` <br/> # <b style="color:#4F4F4F;">Vue.transition</b> <br/> # <span style="color:#619BE4">[com]-transition</span> ***** 動畫組件 <br/> ### 示例內容 <span style="color:red;">1. 舉例說明</span> ``` .v-enter-active, .v-leave-active { transition: opacity 2s; } .v-enter, .v-leave-to { opacity: 0; } .v-enter-to, .v-leave { opacity: 1; } ``` <span style="color:red;">2. 結合animate.css</span> ``` <template> <div id="app"> <transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" > <div v-if="display>0"> <img alt="Vue logo" src="./assets/logo.png"> </div> </transition> <button @click="toggle">切換</button> </div> </template> ``` <span style="color:red;">3. 特別注意</span> ``` vue會進行組件復用,也就是說組件切換的話會造成動畫不會被執行, 這時候你需要改變key值讓vue不再復用組件 但是由于key值改變,vue會新建一個元素組件,這時候可能會出現 新元素和舊元素在過渡時同時出現,解決辦法設置transiton的mode屬性 ``` <br/> # <span style="color:#619BE4">name</span> ***** 被添加的css動畫前綴 <br/> # <span style="color:#619BE4">mode</span> ***** 新老元素過渡模式,in-out(新元素先出現,之后舊元素隱藏) | out-in(舊元素隱藏后出現新元素) <br/> # <span style="color:#619BE4">css</span> ***** 定義css過渡動畫還是JS過渡動畫 <br/> # <span style="color:#619BE4">duration</span> ***** 動畫執行延時 <br/> # <span style="color:#619BE4">enter-active-class</span> ***** 定義進入被激活時添加的類 <br/> # <span style="color:#619BE4">leave-active-class</span> ***** 定義離開被激活時添加的類 <br/> # <span style="color:#619BE4">enter-class</span> ***** 自定義進入的類名 <br/> # <span style="color:#619BE4">enter-to-class</span> ***** 自定義進入的類名 <br/> # <span style="color:#619BE4">leave-class</span> ***** 自定義離開的類名 <br/> # <span style="color:#619BE4">leave-to-class</span> ***** 自定義離開的類名 <br/> # <span style="color:#619BE4">[eve]-before-enter</span> ***** 過渡的事件監聽 <br/> # <b style="color:#4F4F4F;">Vue.component</b> <br/> # <span style="color:#619BE4">[com]-component</span> ***** 動態更新組件 <br/> # <span style="color:#619BE4">is</span> ***** 當前顯示的組件的名稱,該屬性可以傳遞給其它任何組件會是同樣效果 <br/> # <span style="color:#619BE4">inline-template</span> ***** 當前顯示的組件的名稱 <br/> # <b style="color:#4F4F4F;">Vue.keep-alive</b> <br/> # <span style="color:#619BE4">[com]-keep-alive</span> ***** 緩存子組件而不銷毀子組件,子組件會增加actived和deactived生命周期 <br/> # <span style="color:#619BE4">include</span> ***** 只有匹配時才會被緩存 <br/> # <span style="color:#619BE4">exlude</span> ***** 只有匹配時不被緩存 <br/> # <b style="color:#4F4F4F;">Vue.slot</b> <br/> # <span style="color:#619BE4">[com]-slot</span> ***** 父組件模板里,插入在子組件標簽內的所有內容將替代子組件的\<slot\>標簽及它的內容,縮寫# <br/> ### 示例內容 <span style="color:red;">1. 子組件定義插槽</span> ``` <slot name="插槽名稱" :數據變量名="數據"></slot> ``` <span style="color:red;">2. 具名插槽</span> ``` <template v-slot:插槽名稱="接收傳遞過來的數據變量"> 插槽內容 </template> ``` <span style="color:red;">3. 非template元素嵌入插槽</span> ``` <div slot="div2"> 插槽內容 </div> ``` <span style="color:red;">3. 【廢棄】作用域插槽</span> ``` 通過slot-scope將插槽中的數據進行返回 <div id="root"> <child> <template slot-scope="props"> 獲取傳入數據 <li>{{props.value}}</li><--!定義使用渲染方式--> </template> </child> <child> <template slot-scope="props"> <h1>{{props.value}}</h1><!--定義不同的渲染方式--> </template> </child> </div> <script> Vue.component('child',{ data: function(){ return { list:[1,2,3,4] } }, template: `<div> <ul> <slot v-for="value in list" :value=value>//使用slot占位 </slot> </ul> </div>` }) var vm=new Vue({ el: '#root' }) </script> ``` <br/>
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看