<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>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                # Vue進階培訓 <br> ## 1 培訓簡介 ### 1.1 內容 本次培訓會介紹到一些Vue中更復雜一點的知識點,并且會以實際工程中的使用作為參考講解。 ### 1.2 目標 認真學完之后,大家將會對Vue中的進階知識有所了解。 <br><br> ## 2 模板語法進階 ### 2.1 輸入修飾符 .lazy 在默認情況下,v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步 (除了上述輸入法組合文字時)。 你可以添加 lazy 修飾符,從而轉變為使用 change 事件進行同步: .number 如果想自動將用戶的輸入值轉為數值類型,可以給 v-model 添加 number 修飾符。 .trim 如果要自動過濾用戶輸入的首尾空白字符,可以給 v-model 添加 trim 修飾符 ### 2.2 混入 混入 (mixin) 提供了一種非常靈活的方式,來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時,所有混入對象的選項將被“混合”進入該組件本身的選項。 ```js // 定義一個混入對象 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!" ``` 一般都采用混入文件的方式來混入 注意 ① 數據對象在內部會進行遞歸合并,并在發生沖突時以組件數據優先。 ② 生命周期函數混入文件優先。 ### 2.3 自定義指令和自定義過濾器 2.3.1 自定義指令 當頁面加載時,該元素將獲得焦點,現在讓我們用指令來實現這個功能: 全局自定義指令 ```js Vue.directive('focus', { // 當被綁定的元素插入到 DOM 中時…… inserted: function (el) { // 聚焦元素 el.focus() } }) ``` 如果想注冊局部指令,組件中也接受一個 directives 的選項: ```js directives: { focus: { // 指令的定義 inserted: function (el) { el.focus() } } } ``` 使用: ```js <input v-focus> ``` 2.3.1 自定義過濾器 Vue允許自定義過濾器,可被用于一些常見的文本格式化。 全局定義過濾器: ```js Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) ``` 如果想注冊局部指令,組件中也接受一個 filters 的選項: ```js filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } ``` 使用: ```js {{ message | capitalize }} ``` <br><br> ## 3 組件使用進階 ### 3.1 插槽 3.1.1 普通插槽 ```js <slot></slot> ``` 3.1.2 具名插槽 ```js <slot name="container"></slot> <template v-slot:container> <p>A paragraph for the main content.</p> <p>And another one.</p> </template> ``` 注:一般v-slot 只能添加在 `<template>` 上 3.1.3 作用域插槽 ```js <slot v-bind:user="user"></slot> <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template> ``` ### 3.2 動態組件 在不同組件之間進行動態切換 ```js <component v-bind:is="currentTabComponent"></component> ``` ### 3.3 異步組件 Vue 允許以一個工廠函數的方式定義你的組件,這個工廠函數會異步解析你的組件定義。Vue 只有在這個組件需要被渲染的時候才會觸發該工廠函數,且會把結果緩存起來供未來重渲染。 ```js Vue.component('async-example', function (resolve, reject) { setTimeout(function () { // 向 `resolve` 回調傳遞組件定義 resolve({ template: '<div>I am async!</div>' }) }, 1000) }) ``` <br><br> ## 4 API使用進階 ### 4.1 vm.$nextTick( [callback] ) 將回調延遲到下次 DOM 更新循環之后執行。 ```js new Vue({ // ... methods: { // ... example: function () { // 修改數據 this.message = 'changed' // DOM 還沒有更新 this.$nextTick(function () { // DOM 現在更新了 // `this` 綁定到當前實例 this.doSomethingElse() }) } } }) ``` ### 4.2 vm.$refs 一個對象,持有注冊過 ref 特性 的所有 DOM 元素和組件實例,用起來有點像id。 ```js // 組件或dom元素上添加ref屬性 <base-input ref="usernameInput"></base-input> // js代碼中用$refs獲取 this.$refs.usernameInput ``` ### 4.3 vm.$set( target, propertyName/index, value ) 向響應式對象中添加一個屬性,并確保這個新屬性同樣是響應式的,且觸發視圖更新。 ```js export default { data() { return { obj: {} } }, mounted() { this.$set(this.obj, 'age', 10); } } ``` <br><br> ## 5 工具使用進階 ### 5.1 vue-router 可以簡單了解一下,因為我們的業務需求所以大部分工程都是多頁面應用。 Vue Router 是 Vue.js 官方的路由管理器。針對于SPA(single page application):單一頁面應用程序,它在加載頁面時,不會加載整個頁面,而是只更新某個指定的容器中內容。單頁面應用(SPA)的核心之一是:更新視圖而不重新請求頁面;vue-router在實現單頁面前端路由時,提供了兩種方式:Hash模式和History模式。 hash模式 通過 hash 來實現路由 history模式 通過HTML5中的pushState 和 replaceState來實現,需要后端配合 ### 5.2 axios Axios 是一個基于 promise 的 HTTP 庫 執行 GET 請求 ```js // 為給定 ID 的 user 創建請求 axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 可選地,上面的請求可以這樣做 axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 執行 POST 請求 ```js axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 執行多個并發請求 ```js function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // 兩個請求現在都執行完成 })); ``` <br><br> ## 6 另外還有vuex,jsx,vue-hooks等,大家可以接著探索。
                  <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>

                              哎呀哎呀视频在线观看