Vue.js深入學習

2021-01-07 寒夫子

#VUE#

vue.js

v-cloak:解決網速慢閃爍問題 ,不會替換掉標籤裡面的內容

v-text:會替換掉標籤裡面的內容:原樣輸出

v-html:會解析標籤

v-bind:綁定屬性的指令,縮寫 : 只能實現數據的單向綁定。從M自動綁定到V,無法實現數據的雙向綁定

v-on 綁定事件:縮寫@

<div>{{mgs2}}div>

<p v-cloak>{{msg}}----p>

<p v-text="msg">==========p>

<div v-text="mgs2">div>

<div v-html="mgs2">div>

<input type="button" value="按鈕" :title="mytitle+'123'">

箭頭函數:解決this指向問題, 內部的this 和外部的this保持一致,

使用. @click.stop="btnHandle" 阻止事件冒泡 從裡到外

.prevent 阻止默認行為,連結跳轉,

.capture 實現捕獲觸發事件的機制 從外到裡

.self 只有點擊當前元素時觸發,冒泡和捕獲都不管用,

.once 只觸發一次事件處理函數

.stop和.self的區別

.self只會阻止自己身上冒泡行為,並不會阻止其他元素的冒泡行為

v-model :實現表單元素和Model中數據的雙向數據綁定,只能用在表單元素中

類樣式:使用v-bind 數組

數組中使用三元表達式,:class="['thin','italic',{'active:false'}]"

對象 :class={red:true,thin:true,italic:false}

:style={color:'red','font-weight':200}

v-for=" count in 10"

in 後面可以放 普通數組,數組對象,對象,數字,如果是數字,count 從1 開始

key 屬性只能使用數字和字符串,在使用的時候必須用v-bind屬性綁定的形式指定唯一的字符串或

數字類型 :key的值,

v-if 每次會重新刪除或創建元素,

v-show:設置元素的display:none 樣式 ,頻繁切換用v-show ,

foreach some filter findIndex

String.prototype.includes()包含方法

$(':contains("哈")') 包含哈的標籤

過濾器:

全局過濾器:所有vm實例都可以使用

{{ msg| 過濾器名字(參數) | 過濾器名字(參數)}}

Vue.filter("過濾器名字",function(data,參數){

});

私有過濾器:

fliters:{

}

如果 私有過濾器和全局過濾器的名稱一致了,調用私有過濾器,採取就近原則

String.prototype.padStart(2,'0');

String.prototype.padEnd(2,'0');

鍵盤修飾符:@keyup.enter="add"

@keyup.113="add"

自定義鍵盤碼: Vue.config.keyCodes.f2=113;

全局指令:

1.Vue中所有的指令都以v-開頭

2.參數1,指令的名稱,定義的時候,指令的前面不需要加V-前綴,

用的時候才加

3.參數2,是一個對象,這個對象身上有一些指令相關的函數,這些函數在特定的階段執行

相關的操作

Vue.directive('focus',{

bind:function(el){

函數中第一個參數永遠是el,表示被綁定了指令的那個元素,是一個原生的js對象

//每當指令綁定到元素上的時候,會立刻執行這個bind函數,只執行一次

inserted:function(){

//元素插入到dom中的時候,會執行一次

update:function(){

//當VNode更新的時候,會執行,可能會觸發多次

});

私有指令:

diectives:{}

Vue生命周期

一 創建階段:

1.在beforeCreate()生命周期函數執行的時候,data 和methods中的數據都還沒有初始化

2.在created()中,data 和methods都已經被初始化好了,如果要調用methods中的方法

或者操作data中的數據,最早只能在created中操作

3.在beforeMount()函數執行的時候,模版已經在內存中編輯好了,但是尚未掛載到

頁面中去,此時,頁面還是舊的

4.mounted()表示內存中的模版已經真實的掛載到了頁面中,用戶

已經可以看到渲染好的頁面了,是實例創建期間的最後一個生命周期

函數,當執行完mounted就表示整個Vue實例已經初始化完畢了,

此時,組件已經脫離了創建階段進入到了運行階段

二 運行階段

beforeUpdate() 執行的時候頁面還是舊的,此時data中的數據是新的,頁面尚未和最新的數據保持同步

updated(), 頁面和data數據已經保持同步了,都是最新的

這兩個事件會根據data數據的改變有選擇性的觸發0次或多次

三 銷毀階段:

beforeDestroy() Vue實例就已經從運行階段進入到了銷毀階段,實例身上所有的data和所有的methods,以及過濾器

指令....都處於可用狀態,還有真正執行銷毀過程

destroyed 所有的數據、方法、指令、過濾器·····不可用了

vue-resource 發 get post .json ,請求

Vue.http.options.root="";

請求的路徑應該以相對路徑開頭,不能帶"/"

Vue.http.options.emulateJSON=true;

動畫:

1.使用transition標籤包裹起來

. v-enter,

.v-leave-to{}

.v-enter-active,

.v-leave-avtive{}

2.半場動畫

@before-enter="beforeEnter"

@enter="enter"

@after-enter="afterEnter"

在實現過度的時候,如果需要過渡的元素是通過v-for 循環渲染出來的

需要使用transitionGroup標籤包裹

v-for 循環創建的元素設置動畫,必須為每一個元素設置:key屬性

.v-move{

transition:all 0.6s ease;

.v-leave-active{

position:absolute;

兩個配合使用可以實現列表後續的元素漸漸的飄上來的效果

給transitionGroup 添加appear屬性實現頁面剛展示出來時候入場的效果,

設置tag="ul" , 指定transitionGroup渲染為指定的元素,如果不指定

tag屬性,默認渲染為span標籤

相關焦點

  • Vue-Router源碼學習之index.js(vue-router類)
    今天,帶來Vue-Router源碼解析系列的第二篇文章:index.js。正文vue-router類裡面都做了什麼?= {}),在vue-router中使用了flow.js做了類型的檢查,什麼是flow.js?
  • 「Vue.js開發連載一」Vue.js簡介
    Vue.js的目標是通過儘可能簡單的API實現響應的數據綁定和組合的視圖組件。Vue.js自身不是一個全能框架——它只聚焦於視圖層。因此它非常容易學習,非常容易與其它庫或已有項目整合。另一方面,在與相關工具和支持庫一起使用時,Vue.js也能完美地驅動複雜的單頁應用。
  • 【分享】Vue.js新手入門指南
    我的建議是,先把介紹 - vue.js官方文檔的基礎部分硬著頭皮看一遍。除了組件這個小節涉及到了很多晦澀難懂的名詞以外,前面幾章完全就是把Vue.js當作一個模版引擎來用。然後開始學習ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,最好對Node.js也要有所了解。
  • 【項目推薦】Vue.js
    作者是尤雨溪,寫下這篇文章時 vue.js版本為 1.0.7 。我推薦使用 sublime text 作為編輯器,關於這個編輯器可以看我這篇文章。 </div> </div> </div></body></html>當然你也可以在 github 上 clone 最新的版本並作為單文件引入,或者使用 CDN:http://cdn.jsdelivr.net/vue/1.0.7/vue.min.js
  • Vue.js布局
    動態Vue.js布局組件前言vue.js是漸進增強的視圖庫,可以作為.html頁面部分使用,也可以結合vue-router、vuex、axios用來構建單頁面或多頁面應用。
  • 推薦8 個漂亮實用的 vue.js 進度條組件
    為大家精心挑選了 8 個漂亮的 Progress Bars 組件,並附上 GitHub 連結和 vue.js 代碼示例,以及Vue3 快速深入全攻略。1.easy-circular-progress一個簡單的循環進度組件,帶有計數效果。
  • Vue.js最佳實踐(五招讓你成為Vue.js大師)
    如果有人需要Vue.js入門系列的文章可以在評論區告訴我,有空就給你們寫。對大部分人來說,掌握Vue.js基本的幾個API後就已經能夠正常地開發前端網站。但如果你想更加高效地使用Vue來開發,成為Vue.js大師,那下面我要傳授的這五招你一定得認真學習一下了。
  • Vue.js+Node.js 移動端小米商城全棧開發
    Vue全家桶的文檔 ES2015常用語法 組件化 模塊化 基於Vue的UI庫 開發環境配置基礎環境開發工具瀏覽器模擬數據接口管理平臺項目目錄結構vue1.在實戰中學習和應用Vue全家桶:Vue、Vuex、Vue-router,2.通過重構小米商城(移動端),理解vue在實際業務場景中的注意事項和技巧,深入理解組件化和數據驅動常見問題
  • 初步認識vue.js框架的使用
    vue.js框架是幹什麼的Vue.js 是一個JavaScriptMVVM庫,是一套構建用戶界面的漸進式框架。它是以數據驅動和組件化的思想構建的,採用自底向上增量開發的設計。相比於Angular.js,Vue.js提供了更加簡潔、更易於理解的API,使得我們能夠快速地上手並使用Vue.js。如何使用vue.js1.下載 vue.min.js 並用 <script> 標籤引入。
  • 深入認識 vue-cli:能做的不僅僅是初始化 vue 工程
    藉助 vue-cli,我們通過非常簡單的問答形式,方便地初始化一個vue工程,完全不需要擔心繁複的webpack、eslint配置等等。但是,仍然有許多同學沒有搞清楚 vue-cli和 vue工程之間的關係,導致沒有充分發揮 vue-cli的功能。在這篇文章中,我將從底層原理開始並結合幾個例子,告訴大家 vue-cli還能這樣用。
  • vue-elemnt-admin學習
    vue-elemnt-admin學習vue-element-admin是一個基於vue,element-ui
  • 【Vue.js 入門到實戰教程】01-Vue.js 數據綁定的基本實現和代碼分析
    來源 | https://xueyuanjun.com/post/21912本系列教程涵蓋 Vue 基礎語法、組件開發、代碼測試、以及如何基於 Vue + 後端 API 接口構建單頁面應用,希望通過這個系列的學習
  • 揭密vue.js的神秘之處,小程序跟vue有什麼關係
    微容用的微信小程序平臺採用開發思路是前後端分離,前端採用vue.js+h5+jq開發,後端採用MVE的思路,用php開發,用vue.js構建來微信小程序可視化前端之後,微容給大家介紹下vue的來源和特徵。
  • Vue.js 很難學?看看這個由 DCloud 與 Vue 官方合作推出的免費入門...
    Vue.js 是目前國內很火的前端框架,前端工程師招聘幾乎都要求掌握。如果你想開始嘗試學習 Vue.js,在 Vue.js 官網閱讀文檔教程又比較吃力,這套視頻教程基於Vue.js 官網文檔,用更加通俗易懂的方式和代碼實例來幫助你入門 Vue.js 。
  • Vue.js 第三方常用插件
    Vue.js devtools用於開發調試Vue.js的一個必備插件。可以在Chrome中的擴展程序中直接安裝,也可以本地文件的方式安裝。2. vue-lazyload 圖片懶加載插件地址:https://github.com/hilongjw/vue-lazyloaddemo:http://hilongjw.github.io/vue-lazyload/2.1 安裝 和 使用插件cnpm install vue-lazyload --save1
  • Vue.js以業務為中心的常見面試題
    在vue.js中的MVVM模式:vue.js是通過數據驅動的,vue.js實例化對象將dom和數據進行綁定,一旦綁定,dom和數據將保持同步,每當數據發生變化,dom也會隨著變化;ViewModel是Vue.js的核心,它是Vue.js的一個實例。
  • CKEditor 4 編輯器已與 Vue.js 集成
    近日,CKEditor 團隊發布了與 Vue.js 框架原生集成的 CKEditor 4。這就意味著,開發者可以通過<ckeditor />標籤以 Vue.js 組件的形式使用 CKEditor 4 ,而作為 Vue.js 的原生組件,開發者可以更快地將其應用到網站上。
  • 深入理解 Vue 模板渲染:Vue 模板反編譯
    vue 文件的構成熟悉 vue 的同學應該都知道,vue 單文件模板中一般含有三個部分,template,script,style。但是在編譯後的 js 文件中,我們卻沒法在代碼中直接找到這三部分,如果我們想從編譯後的 js 中獲取原始模板,應該怎麼做?
  • Vue.Draggable - 基於 Vue.js 絲般柔滑的拖拽排序組件
    在 jQuery 的時代,有很多動效非常流暢絲滑的拖拽排序插件,但在國內 Vue.js 起來後,卻比較難找到一款像 Sortable.js 那樣的組件,而 Vue.Draggable 就是一款基於 Sortable.js 開發的 Vue 增強組件。
  • 【Vue.js入門到實戰教程】11-Vue Loader(下)| 編寫一個單文件 Vue 組件
    然後在 src/main.js 中引入 Bootstrap 的腳本和樣式文件:import Vue from 'vue'import App from './App.vue'import 'bootstrap'import 'bootstrap/dist/css/bootstrap.min.css'...接下來,就可以正式編寫單文件組件了。