Vue.js深入學習

2021-01-08 寒夫子

#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.js最佳靜態站點生成器對比
    因此在本文中,我會向大家介紹用於靜態站點生成的四大 Vue.js 框架,並對它們做詳細對比,幫助找到適合你用例的選項。https://nuxtjs.org/名單上的第一個是 Nuxt.js,這是一個基於 Vue.js 構建的開源高級框架。Nuxt.js 會抽象出客戶端 - 伺服器分發細節,從而簡化 Web 開發工作。
  • 我發現了 Vue.js 中的性能陷阱
    問題出在 Vue.js 嗎?是 Netlify 嗎?還是因為我們的代碼有缺陷?我必須找出答案。 我內心深處對遊戲的熱愛,讓我一直渴望能自己製作一些電子遊戲。幾個月前我開始將這種夢想變為現實,並第一次參加了全球遊戲大賽(Global Game Jam)。我和我的團隊使用 Vue.js 構建了一個名為「 ZeroDaysLeft 」的遊戲,其形式是 Web 端的單頁面應用程式。
  • Vue.js系列:生命周期鉤子
    開發人員提供了一個Web開發人員可以在Vue.js應用程式的整個生命周期中使用的各種方法的討論。生命周期鉤子是在Vue對象生命周期的某個階段執行的已定義方法。從初始化開始到它被破壞時,對象都會遵循不同的生命階段。這是一個著名的圖表,表示掛鈎順序。讓我們將代碼添加到鉤子並查看它們如何被解僱的階段。<!
  • 使用 Vue.js 和 Semantic-UI 做一個簡單的願望清單
    二、Vue.js介紹官方文檔傳送門:https://cn.vuejs.org/v2/guide/installation.htmlVue (讀音 /vjuː/,類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。
  • Vue.js開發的4個基本ES2015特性 - 智能甄選
    Vue.js專家解釋了如何在使用Vue框架進行編碼時使用JavaScript的最新功能。請繼續閱讀!ES2015(又名ES6)是JavaScript語言的當前規範。如果您是JavaScript新手或最近沒有更新JavaScript知識,ES2015中有許多新功能可使開發更好,更令人愉快。如果您是Vue開發人員,您將從學習所有這些新功能中受益。
  • 使用electron+vue開發一個跨平臺todolist(便籤)桌面應用
    # 2在使用electron期間,我順便寫了一個簡單的todolist(便籤)應用,用於學習和嘗試;項目地址:https://github.com/xiajingren/xhznl-todo-list 界面參考了小黃條便籤。
  • 10個簡單的技巧讓你的 vue.js 代碼更優雅 - 酷扯兒
    vue中的$props、$attrs和$listeners(可用來二次封裝組件)$props:當前組件接收到的 props 對象。Vue 實例代理了對其 props 對象屬性的訪問。假如有個input輸入框。我們有很多的原生屬性,比如:name、placeholder、disabled等等。
  • Vue框架之生命周期鉤子
    學習計劃安排如下:Vue的深入學習,emm準確地說還不能算是深入學習,我有點高估自己的學習進度了。本來打算兩天時間做一個基礎入門的,畢竟教程也就一天的內容,看來計劃趕不上變化。vue中三大常用屬性的小結、生命周期鉤子的了解,以及指令的初步接觸。指令有點多,只能留到明天繼續補全了。
  • 一張圖教你快速玩轉vue-cli3
    添加瀏覽器支持如何配置scss/stylus共享全局變量如何整合eleemntUI等第三方框架並實現按需引入配置單/多頁面如何配置自定義環境變量如何在vue.config.js最後可以在vue.config.js做webpack自定義配置2.添加瀏覽器支持browserslist我們可以通過package.json 文件裡的 browserslist欄位或一個單獨的 .browserslistrc
  • 前端高效開發必備的 js 庫梳理
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫之前有很多人問學好前端需要學習哪些 js 庫, 主流框架應該學 vue 還是 react ? 針對這些問題, 筆者來說說自己的看法和學習總結.
  • vuex實現預熱篇-vue插件開發
    #泛舟計劃·讓知識更好看#1.如何引用vue插件呢?Vue.use(Vuex)2.use做了什麼事呢?了解了以上的用法,那麼咱就知道大概的結構怎麼寫了吧,來先構造下結構// Myplugin作為對象傳入const MyLoggerPlugin = {}// Vue 就是Vue這個構造函數,options是插件傳入的參數MyLoggerPlugin.install = function(Vue, options) {console.log(Vue, options) //輸出的就是vue
  • Vue超好玩的新特性:在CSS中使用JS變量
    -- 在這裡用link標籤引入中文布局 -->  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">  <!
  • 如何創建vue項目並使用element框架中的el-select
    1、在電腦硬碟上,找到一個位置,新建一個文件夾wmn;滑鼠右鍵選擇Git Bash Here,並在Git窗口輸入cnpm install --global vue-cli命令:cnpm install --global vue-cli
  • 尤雨溪在Vue3.0 Beta直播裡聊到了這些…
    前言在 4 月 21 日晚,Vue 作者尤雨溪在嗶哩嗶哩直播分享了Vue.js 3.0 Beta最新進展。以下是直播內容整理1.感興趣的可以查看:https://composition-api.vuejs.org/#summary
  • 準備將您的Vue應用遷移到Vue 3
    例如:// helper/filter.jsexportfunctiontoCurrency (value) {return`$${value.toFixed(2)}`}然後,您可以將輔助函數導入到需要使用它的組件中。例如:// price-component.vueimport { toCurrency } from'.
  • vue+swiper+animate.css製作全屏滾動H5
    ,接到需求要製作年度帳單,形式就是全屏滾動H5頁面,翻頁時給頁面元素添加動畫,大概效果如下:H5長翻頁動畫效果接下來就來介紹一下我的製作步驟;1.安裝swiper、animate.cssnpm install swiper@3 npm install animate.css 2.在main.js
  • 基於Vue實現一個有點意思的拼拼樂小遊戲
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫前言為了加深大家對vue的了解和vue項目實戰,筆者採用vue生態來重構此項目,方便大家學習和探索。
  • 前端娛樂圈大瓜:前端人因為 Vue3 的 Ref-sugar 提案打起來了!
    其中最具爭議的就是 ref 的語法糖問題;  為了將問題更加聚焦,前幾天,尤大大將這個提案的兩個內容,分離到了各自的 PR 中,setup 是 RFC 227(https://github.com/vuejs/rfcs/pull/227),ref sugar 是 RFC 228(https://github.com/vuejs/rfcs/
  • vue的$nextTick的使用+源碼分析
    開始前,我覺得我們需要先弄清楚vue的$nextTick是幹什麼用的,它的存在是為了解決什麼問題?大家也可以自問一下。nextTick英文翻譯過來「下一個記號或者標記」,我覺得這裡應該用狀態來描述更加合理一些。
  • Vue標籤
    <script> var vm=new Vue({ el:"#app", data:{ "str1":"aa", "str2":"bb", "str3":"cc" } });</script>在vue