<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          Vuejs講解之:響應式、過渡效果、過渡狀態

          時間:?2017-11-09閱讀:?2831標簽:?vue作者:?gongyunit

          1Vuejs高級之:響應式


          1.1 如何追蹤變化

          Vue實例使用Object.defineProperty將普通js對象屬性轉為getter和setter

          用戶可以使用vue-devtools調試

          每個Vue實例有相應的watch程序實例,可以檢測并更新相關的組件

          圖形表示如下:


          1.2 變化檢測問題

          受JS的限制,屬性需要放在data對象上才能讓它是相應的

          動態設置響應屬性,需要使用Vue.set(object,key,value)

          Vm.$set是Vue.set的別名

          如果想向已有對象添加一些屬性,可以新建一個包含原有對象屬性和新添加屬性的對象


          1.3 異步更新隊列

          Vue執行DOM更新是異步的

          Vue.nextTick(callback)


          1.4 響應式原理的示例
          <!DOCTYPE html>
          <html>
            <head>
            <meta charset="UTF-8">
            <title></title>
            </head>
            <body>
            <div id="demo">
            <h5>a是data內部的,是響應的:{{a}}</h5>
            <h5>b是vm.b設置的,是非響應的:{{b}}</h5>
            <h5>c是通過Vue.set響應的:{{extendData.c}}</h5>
            <h5> Vue 不允許動態添加根級響應式屬性,所以你必須在初始化實例前聲明根級響應式屬性,哪怕只是一個空值: {{message}}</h5>
            </div>
            <script src="vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
            var vm = new Vue({
            el:'#demo',
            data:{
            a:'a',
            extendData:{},
            // 聲明 message 為一個空值字符串
                message: 'hello'
            }
            });
            vm.b = 'b';
            Vue.set(vm.extendData,'c','c');
            // 之后設置 `message`
            vm.message = 'new hello'
            vm.$el.textContent === 'new hello' // false
            Vue.nextTick(function () {
              vm.$el.textContent === 'new hello' // true
            })
            </script>
            </body>
          </html>


          2Vuejs高級之:過渡效果


          2.1 主要過渡效果依賴的工具

          在 CSS 過渡和動畫中自動應用 class

          可以配合使用第三方 CSS 動畫庫,如 Animate.css

          在過渡鉤子函數中使用 JavaScript 直接操作 DOM

          可以配合使用第三方 JavaScript 動畫庫,如 Velocity.js


          2.2 單元素/組件的過渡

          Vue 提供了 transition 的封裝組件,在下列情形中,可以給任何元素和組件添加 entering/leaving 過渡

          條件渲染 (使用 v-if)

          條件展示 (使用 v-show)

          動態組件

          組件根節點


          2.3 單元素/組件的過渡的示例
          <!DOCTYPE html>
          <html>
            <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
            .fade-enter-active, .fade-leave-active {transition: opacity .5s}
            .fade-enter, .fade-leave-active {opacity: 0}
            </style>
            </head>
            <body>
            <div id="demo">
            <button v-on:click="show = !show">
            Toggle
            </button>
            <transition name="fade">
            <p v-if="show">hello</p>
            </transition>
            </div>
            <script src="vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
            var vm = new Vue({
            el:'#demo',
            data:{
            show: true
            }
            });
            </script>
            </body>
          </html>


          2.4 過渡組件的注意事項

          元素封裝成過渡組件之后,在遇到插入或刪除時,Vue 將

          自動嗅探目標元素是否有 CSS 過渡或動畫,并在合適時添加/刪除 CSS 類名。

          如果過渡組件設置了過渡的 JavaScript 鉤子函數,會在相應的階段調用鉤子函數。

          如果沒有找到 JavaScript 鉤子并且也沒有檢測到 CSS 過渡/動畫,DOM 操作(插入/刪除)在下一幀中立即執行。(注意:此指瀏覽器逐幀動畫機制,與 Vue,和Vue的 nextTick 概念不同)


          2.5 css動畫過渡

          常用的過渡都是使用 CSS 過渡。比如上一個例子。

          CSS 動畫用法同 CSS 過渡,區別是在動畫中 v-enter 類名在節點插入 DOM 后不會立即刪除,而是在 animationend 事件觸發時刪除。


          2.6 css動畫過渡的示例
          <!DOCTYPE html>
          <html>
            <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
            .bounce-enter-active {animation: bounce-in .5s;}
            .bounce-leave-active {animation: bounce-out .5s;}
            @keyframes bounce-in {
            0% {transform: scale(0);}
            50% {transform: scale(1.5);}
            100% {transform: scale(1);}
            }
            @keyframes bounce-out {
            0% {transform: scale(1);}
            50% {transform: scale(1.5);}
            100% {transform: scale(0);}
            }
            </style>
            </head>
            <body>
            <div id="example-2">
            <button @click="show = !show">Toggle show</button>
            <transition name="bounce">
            <p v-if="show">Look at me!</p>
            </transition>
            </div>
            <script src="vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
            new Vue({
            el: '#example-2',
            data: {
            show: true
            }
            })
            </script>
            </body>
          </html>


          2.7 自定義類名過渡

          我們可以通過特性來自定義過渡類名:

          enter-class

          enter-active-class

          leave-class

          leave-active-class

          他們的優先級高于普通的類名,這對于 Vue 的過渡系統和其他第三方 CSS 動畫庫,如 Animate.css 結合使用十分有用。


          2.8 自定義過渡的示例
          <!DOCTYPE html>
          <html>
            <head>
            <meta charset="UTF-8">
            <title></title>
            <link rel="stylesheet" type="text/css" href="animate.min.css" />
            </head>
            <body>
            <div id="example-3">
            <button @click="show = !show">
            Toggle render
            </button>
            <transition name="custom-classes-transition"
             enter-active-class="animated tada"
             leave-active-class="animated bounceOutRight">
            <p v-if="show">hello</p>
            </transition>
            </div>
            <script src="vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
            new Vue({
            el: '#example-3',
            data: {
            show: true
            }
            })
            </script>
            </body>
          </html>


          2.9 初始渲染的過渡

          可以通過appear特性設置節點在初始渲染的過渡

          <transition appear>
          <!-- ... -->
          </transition>

          可以自定義CSS類名,代碼如圖:

          自定義JavaScript鉤子,代碼如圖:


          2.10 多個組件的過渡

          多個組件的過渡很簡單很多 - 我們不需要使用 key 特性。相反,我們只需要使用動態組件

          new Vue({
          el: '#transition-components-demo',
          data: {
          view: 'v-a'
          },
          components: {
          'v-a': {
          template: '<div>Component A</div>'
          },
          'v-b': {
          template: '<div>Component B</div>’}
          }})


          2.11 多個組件的過渡的示例
          <!DOCTYPE html>
          <html>
          <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
            .component-fade-enter-active,.component-fade-leave-active {transition: opacity .3s ease;}
            .component-fade-enter,.component-fade-leave-active {opacity: 0;}
            </style>
            </head>
            <body>
            <div id="example-3">
            <input type="radio" v-model="view" value="v-a"/>A
            <input type="radio" v-model="view" value="v-b"/>B
            <transition name="component-fade" mode="out-in">
            <component v-bind:is="view"></component>
            </transition>
            </div>
            <script src="vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
            new Vue({
            el: '#example-3',
            data: {
            view: 'v-a'
            },
            components: {
            'v-a': {
            template: '<div>Component A</div>'
            },
            'v-b': {
            template: '<div>Component B</div>'
            }
            }
            })
            </script>
            </body>
          </html>


          2.12 列表過渡

          列表的進入和離開過渡

          列表的位移過渡

          列表的漸進過渡


          2.13 列表進入和離開過渡的示例
          <!DOCTYPE html>
          <html>
            <head>
            <meta charset="UTF-8">
            <title></title>
            </head>
            <style type="text/css">
            .list-item {display: inline-block;margin-right: 10px;}
            ist-enter-active,.list-leave-active {transition: all 1s;}
            .list-enter,.list-leave-active {opacity: 0;transform: translateY(30px);}
            </style>
            <body>
            <div id="list-demo" class="demo">
            <button v-on:click="add">Add</button>
            <button v-on:click="remove">Remove</button>
            <transition-group name="list" tag="p">
            <span v-for="item in items" v-bind:key="item" class="list-item">{{ item }}</span>
            </transition-group>
            </div>
          <script src="vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
          new Vue({
            el: '#list-demo',
            data: {
            items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            nextNum: 10
            },
            methods: {
            randomIndex: function() {
            return Math.floor(Math.random() * this.items.length)
            },
            add: function() {
            this.items.splice(this.randomIndex(), 0, this.nextNum++)
            },
            remove: function() {
            this.items.splice(this.randomIndex(), 1)
            },
            }
            })
            </script>
            </body>
          </html>


          2.14 列表位移過渡的示例
          <!DOCTYPE html>
          <html>
            <head>
            <meta charset="UTF-8">
            <title></title>
            </head>
            <style type="text/css">
            .flip-list-move {transition: transform 1s;}
            </style>
            <body>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
            <div id="flip-list-demo" class="demo">
            <button v-on:click="shuffle">Shuffle</button>
            <transition-group name="flip-list" tag="ul">
            <li v-for="item in items" v-bind:key="item">
            {{ item }}
            </li>
            </transition-group>
            </div>
            <script src="vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
            new Vue({
            el: '#flip-list-demo',
            data: {
            items: [1, 2, 3, 4, 5, 6, 7, 8, 9]
            },
            methods: {
            shuffle: function() {
            this.items = _.shuffle(this.items)
            }
            }
            })
            </script>
            </body>
          </html>


          2.15 列表漸進過渡的示例
          <!DOCTYPE html>
          <html>
            <head>
            <meta charset="UTF-8">
            <title></title>
            </head>
            <style type="text/css">
            .list-item {display: inline-block;margin-right: 10px;}
            .list-enter-active,.list-leave-active {transition: all 1s;}
            .list-enter,.list-leave-active {opacity: 0;transform: translateY(30px);}
            </style>
            <body>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
            <div id="staggered-list-demo">
            <input v-model="query">
            <transition-group name="staggered-fade" tag="ul" v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave">
            <li v-for="(item, index) in computedList" v-bind:key="item.msg" v-bind:data-index="index">{{ item.msg }}</li>
            </transition-group>
            </div>
            <script src="vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
            new Vue({
            el: '#staggered-list-demo',
            data: {
            query: '',
            list: [{ msg: 'Bruce Lee' },{ msg: 'Jackie Chan' },{ msg: 'Chuck Norris' },{ msg: 'Jet Li' },{ msg: 'Kung Fury' }]
            }
            computed: {
            computedList: function() {
            var vm = this
            return this.list.filter(function(item) {
            return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
            })
            }
            },
            methods: {
            beforeEnter: function(el) {
            el.style.opacity = 0
            el.style.height = 0
            },
            enter: function(el, done) {
            var delay = el.dataset.index * 150
            setTimeout(function() {
            Velocity(
            el, { opacity: 1, height: '1.6em' }, { complete: done }
            )
            }, delay)
            },
            leave: function(el, done) {
            var delay = el.dataset.index * 150
            setTimeout(function() {
            Velocity(
            el, { opacity: 0, height: 0 }, { complete: done }
            )
            }, delay)
            }
            }
            })
            </script>
            </body>
          </html>


          3Vuejs高級之:過渡狀態


          3.1 過渡狀態

          Vue 的過渡系統提供了非常多簡單的方法設置進入、離開和列表的動效。那么對于數據元素本身的動效呢,比如:

          §數字和運算

          §顏色的顯示

          §SVG 節點的位置

          §元素的大小和其他的屬性

          所有的原始數字都被事先存儲起來,可以直接轉換到數字。做到這一步,我們就可以結合 Vue 的響應式和組件系統,使用第三方庫來實現切換元素的過渡狀態。

          動態動畫與watcher

          通過 watcher 我們能監聽到任何數值屬性的數值更新。例子如下:

          <script src="https://unpkg.com/tween.js@16.3.4"></script>
          <div id="animated-number-demo">
          <input v-model.number="number" type="number" step="20">
          <p>{{ animatedNumber }}</p>
          </div>
          new Vue({
          el: '#animated-number-demo',
          data: {
          number: 0,
          animatedNumber: 0
          },
          watch: {
          number: function(newValue, oldValue) {
          var vm = this
          function animate (time) {
          requestAnimationFrame(animate)
          TWEEN.update(time)
          }
          new TWEEN.Tween({ tweeningNumber: oldValue })
          .easing(TWEEN.Easing.Quadratic.Out)
          .to({ tweeningNumber: newValue }, 500)
          .onUpdate(function () {
          vm.animatedNumber = this.tweeningNumber.toFixed(0)
          })
          .start()
          animate()
          }
          }
          })


          動態狀態轉換

            就像 Vue 的過渡組件一樣,數據背后狀態轉換會實時更新,這對于原型設計十分有用。當你修改一些變量,即使是一個簡單的 SVG 多邊形也可是實現很多難以想象的效果。

          通過組件組織過渡

            管理太多的狀態轉換的很快會接近到 Vue 實例或者組件的復雜性,幸好很多的動畫可以提取到專用的子組件。


          3.2 過渡狀態的示例
          <!DOCTYPE html>
          <html>
            <head>
            <meta charset="UTF-8">
            <script src="tween.js"></script>
            <title></title>
            </head>
            <body>
            <div id="example-8">
            <input v-model.number="firstNumber" type="number" step="20"> +
            <input v-model.number="secondNumber" type="number" step="20"> = {{ result }}
            <p>
            <animated-integer v-bind:value="firstNumber"></animated-integer> +
            <animated-integer v-bind:value="secondNumber"></animated-integer> =
            <animated-integer v-bind:value="result"></animated-integer>
            </p>
            </div>
            <script src="vue.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
            Vue.component('animated-integer', {
            template: '<span>{{ tweeningValue }}</span>',
            props: {
            value: {
            type: Number,
            required: true
            }
            },
            data: function() {
            return {
            tweeningValue: 0
            }
            },
            watch: {
            value: function(newValue, oldValue) {
            this.tween(oldValue, newValue)
            }
            },
          mounted: function() {
            this.tween(0, this.value)
            },
            methods: {
            tween: function(startValue, endValue) {
            var vm = this
            function animate(time) {
            requestAnimationFrame(animate)
            TWEEN.update(time)
            }
            new TWEEN.Tween({ tweeningValue: startValue })
            .to({ tweeningValue: endValue }, 500)
            .onUpdate(function() {
            vm.tweeningValue = this.tweeningValue.toFixed(0)
            })
            .start()
            animate()
            }
            }
            })
            // All complexity has now been removed from the main Vue instance!
            new Vue({
            el: '#example-8',
            data: {
            firstNumber: 20,
            secondNumber: 40
            },
            computed: {
            result: function() {
            return this.firstNumber + this.secondNumber
            }
            }
            })
            </script>
            </body>
          </html>

          轉載于:工云IT技術

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/73

          Vue 的 .sync 修飾符

          .sync 修飾符算是 Vue 的所有修飾符中較難理解的一個,本篇文章就帶你走近 .sync 的世界,深入理解后會發現,其實也就那么回事。修飾符和指令息息相關,下面從 指令 -> 修飾符 -> .sync 修飾符 由淺入深地來講解 .sync 的含義及用法。

          vue中is的作用和用法

          總所周知,ul里面嵌套li的寫法是html語法的固定寫法(還有如table,select等)。my-component是我們自己寫的組件,但是html在渲染dom的時候,my-component對ul來說并不是有效的dom,甚至會報錯。

          一點 Vue.observable 想法

          Vue 2.6.0 新增了 Vue.observable api,但最近才去嘗試使用它。這東西說新也不新,因為他就是 vue 本身的功能,只是暴露出來,成為新 api 了。在老版本中,直接用 new Vue({ data: {} }) 也一樣。

          Vue中props知識點

          如果你一直在閱讀有關\\\"props\\\"內容,你會發現我們可能也一直在使用它們(即使沒有意識到),但也許你并不完全確定它們是什么。或者如何正確使用它們,并充分利用它們。

          12種使用Vue的最佳做法

          隨著 VueJS 的使用越來越廣泛,出現了幾種最佳實踐并逐漸成為標準。在本文中,主要分享在平時開發中一些有用資源和技巧,廢話少說,我們開始吧。

          如何理解vue中的v-bind?

          若不是動態屬性,首先為其增加駝峰化后的監聽,然后再為其增加一個連字符的監聽,例如v-bind:foo-bar.sync,首先v-on:update:fooBar,然后v-on:update:foo-bar。v-on監聽是通過addHandler加上的。

          Vue.use到底是什么?

          我們在使用Vue做項目開發的時候,看到不少輪子都是通過Vue.use來進行使用,感覺甚是高大上。不過Vue.use到底是什么鬼?不妨來看個究竟。

          Vue.js最佳實踐:五招讓你成為Vue.js大師

          本文面向對象是有一定Vue.js編程經驗的開發者。如果有人需要Vue.js入門系列的文章可以在評論區告訴我,有空就給你們寫。對大部分人來說,掌握Vue.js基本的幾個API后就已經能夠正常地開發前端網站

          vue介紹

          庫是一種插件,是一種封裝好的特定方法的集合。提供給開發者使用,控制器在使用者手里。框架是一套架構,會基于自身特定向用戶提供一套相當完整的解決方案,控制權在框架本身

          vue有時候你不需要 $emit & $on

          在此之前,子組件到父組件的傳遞事件我一般還是使用 $emit 和 $on,因為這個操作理解起來并不難,代碼一般也挺清晰。不過今天遇到這么個情況 ——

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网