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

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                # Vue.js - Day1 ***** [TOC] ## 課程介紹 前5天: 都在學習Vue基本的語法和概念;打包工具 Webpack , Gulp 后5天: 以項目驅動教學; ### 什么是Vue.js + Vue.js 是目前最火的一個前端框架,React是最流行的一個前端框架(React除了開發網站,還可以開發手機App, Vue語法也是可以用于進行手機App開發的,需要借助于Weex) + Vue.js 是前端的**主流框架之一**,和Angular.js、React.js 一起,并成為前端三大主流框架! + Vue.js 是一套構建用戶界面的框架,**只關注視圖層**,它不僅易于上手,還便于與第三方庫或既有項目整合。(Vue有配套的第三方類庫,可以整合起來做大型項目的開發) + 前端的主要工作?主要負責MVC中的V這一層;主要工作就是和界面打交道,來制作前端頁面效果; ## 為什么要學習流行框架 + 企業為了提高開發效率:在企業中,時間就是效率,效率就是金錢; - 企業中,使用框架,能夠提高開發的效率; + 提高開發效率的發展歷程:原生JS -> Jquery之類的類庫 -> 前端模板引擎 -> Angular.js / Vue.js(能夠幫助我們減少不必要的DOM操作;提高渲染效率;雙向數據綁定的概念【通過框架提供的指令,我們前端程序員只需要關心數據的業務邏輯,不再關心DOM是如何渲染的了】) + 在Vue中,一個核心的概念,就是讓用戶不再操作DOM元素,解放了用戶的雙手,讓程序員可以更多的時間去關注業務邏輯; + 增強自己就業時候的競爭力 - 人無我有,人有我優 - 你平時不忙的時候,都在干嘛? ## 框架和庫的區別 + 框架:是一套完整的解決方案;對項目的侵入性較大,項目如果需要更換框架,則需要重新架構整個項目。 - node 中的 express; + 庫(插件):提供某一個小功能,對項目的侵入性較小,如果某個庫無法完成某些需求,可以很容易切換到其它庫實現需求。 - 1. 從Jquery 切換到 Zepto - 2. 從 EJS 切換到 art-template ## Node(后端)中的 MVC 與 前端中的 MVVM 之間的區別 + MVC 是后端的分層開發概念; + MVVM是前端視圖層的概念,主要關注于 視圖層分離,也就是說:MVVM把前端的視圖層,分為了 三部分 Model, View , VM ViewModel + 為什么有了MVC還要有MVVM ## Vue.js 基本代碼 和 MVVM 之間的對應關系 ## Vue之 - `基本的代碼結構`和`插值表達式`、`v-cloak` ## Vue指令之`v-text`和`v-html` ## Vue指令之`v-bind`的三種用法 1. 直接使用指令`v-bind` 2. 使用簡化指令`:` 3. 在綁定的時候,拼接綁定內容:`:title="btnTitle + ', 這是追加的內容'"` ## Vue指令之`v-on`和`跑馬燈效果` ### 跑馬燈效果 1. HTML結構: ``` <div id="app"> <p>{{info}}</p> <input type="button" value="開啟" v-on:click="go"> <input type="button" value="停止" v-on:click="stop"> </div> ``` 2. Vue實例: ``` // 創建 Vue 實例,得到 ViewModel var vm = new Vue({ el: '#app', data: { info: '猥瑣發育,別浪~!', intervalId: null }, methods: { go() { // 如果當前有定時器在運行,則直接return if (this.intervalId != null) { return; } // 開始定時器 this.intervalId = setInterval(() => { this.info = this.info.substring(1) + this.info.substring(0, 1); }, 500); }, stop() { clearInterval(this.intervalId); } } }); ``` ## Vue指令之`v-on的縮寫`和`事件修飾符` ### 事件修飾符: + .stop 阻止冒泡 + .prevent 阻止默認事件 + .capture 添加事件偵聽器時使用事件捕獲模式 + .self 只當事件在該元素本身(比如不是子元素)觸發時觸發回調 + .once 事件只觸發一次 ## Vue指令之`v-model`和`雙向數據綁定` ## 簡易計算器案例 1. HTML 代碼結構 ``` <div id="app"> <input type="text" v-model="n1"> <select v-model="opt"> <option value="0">+</option> <option value="1">-</option> <option value="2">*</option> <option value="3">÷</option> </select> <input type="text" v-model="n2"> <input type="button" value="=" v-on:click="getResult"> <input type="text" v-model="result"> </div> ``` 2. Vue實例代碼: ``` // 創建 Vue 實例,得到 ViewModel var vm = new Vue({ el: '#app', data: { n1: 0, n2: 0, result: 0, opt: '0' }, methods: { getResult() { switch (this.opt) { case '0': this.result = parseInt(this.n1) + parseInt(this.n2); break; case '1': this.result = parseInt(this.n1) - parseInt(this.n2); break; case '2': this.result = parseInt(this.n1) * parseInt(this.n2); break; case '3': this.result = parseInt(this.n1) / parseInt(this.n2); break; } } } }); ``` ## 在Vue中使用樣式 ### 使用class樣式 1. 數組 ``` <h1 :class="['red', 'thin']">這是一個邪惡的H1</h1> ``` 2. 數組中使用三元表達式 ``` <h1 :class="['red', 'thin', isactive?'active':'']">這是一個邪惡的H1</h1> ``` 3. 數組中嵌套對象 ``` <h1 :class="['red', 'thin', {'active': isactive}]">這是一個邪惡的H1</h1> ``` 4. 直接使用對象 ``` <h1 :class="{red:true, italic:true, active:true, thin:true}">這是一個邪惡的H1</h1> ``` ### 使用內聯樣式 1. 直接在元素上通過 `:style` 的形式,書寫樣式對象 ``` <h1 :style="{color: 'red', 'font-size': '40px'}">這是一個善良的H1</h1> ``` 2. 將樣式對象,定義到 `data` 中,并直接引用到 `:style` 中 + 在data上定義樣式: ``` data: { h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' } } ``` + 在元素中,通過屬性綁定的形式,將樣式對象應用到元素中: ``` <h1 :style="h1StyleObj">這是一個善良的H1</h1> ``` 3. 在 `:style` 中通過數組,引用多個 `data` 上的樣式對象 + 在data上定義樣式: ``` data: { h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }, h1StyleObj2: { fontStyle: 'italic' } } ``` + 在元素中,通過屬性綁定的形式,將樣式對象應用到元素中: ``` <h1 :style="[h1StyleObj, h1StyleObj2]">這是一個善良的H1</h1> ``` ## Vue指令之`v-for`和`key`屬性 1. 迭代數組 ``` <ul> <li v-for="(item, i) in list">索引:{{i}} --- 姓名:{{item.name}} --- 年齡:{{item.age}}</li> </ul> ``` 2. 迭代對象中的屬性 ``` <!-- 循環遍歷對象身上的屬性 --> <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div> ``` 3. 迭代數字 ``` <p v-for="i in 10">這是第 {{i}} 個P標簽</p> ``` > 2.2.0+ 的版本里,**當在組件中使用** v-for 時,key 現在是必須的。 當 Vue.js 用 v-for 正在更新已渲染過的元素列表時,它默認用 “**就地復用**” 策略。如果數據項的順序被改變,Vue將**不是移動 DOM 元素來匹配數據項的順序**, 而是**簡單復用此處每個元素**,并且確保它在特定索引下顯示已被渲染過的每個元素。 為了給 Vue 一個提示,**以便它能跟蹤每個節點的身份,從而重用和重新排序現有元素**,你需要為每項提供一個唯一 key 屬性。 ## Vue指令之`v-if`和`v-show` > 一般來說,v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此,如果需要頻繁切換 v-show 較好,如果在運行時條件不大可能改變 v-if 較好。 ## 品牌管理案例 ### 添加新品牌 ### 刪除品牌 ### 根據條件篩選品牌 1. 1.x 版本中的filterBy指令,在2.x中已經被廢除: [filterBy - 指令](https://v1-cn.vuejs.org/api/#filterBy) ``` <tr v-for="item in list | filterBy searchName in 'name'"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime}}</td> <td> <a href="#" @click.prevent="del(item.id)">刪除</a> </td> </tr> ``` 2. 在2.x版本中[手動實現篩選的方式](https://cn.vuejs.org/v2/guide/list.html#顯示過濾-排序結果): + 篩選框綁定到 VM 實例中的 `searchName` 屬性: ``` <hr> 輸入篩選名稱: <input type="text" v-model="searchName"> ``` + 在使用 `v-for` 指令循環每一行數據的時候,不再直接 `item in list`,而是 `in` 一個 過濾的methods 方法,同時,把過濾條件`searchName`傳遞進去: ``` <tbody> <tr v-for="item in search(searchName)"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime}}</td> <td> <a href="#" @click.prevent="del(item.id)">刪除</a> </td> </tr> </tbody> ``` + `search` 過濾方法中,使用 數組的 `filter` 方法進行過濾: ``` search(name) { return this.list.filter(x => { return x.name.indexOf(name) != -1; }); } ``` ## Vue調試工具`vue-devtools`的安裝步驟和使用 [Vue.js devtools - 翻墻安裝方式 - 推薦](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=zh-CN) ## 過濾器 概念:Vue.js 允許你自定義過濾器,**可被用作一些常見的文本格式化**。過濾器可以用在兩個地方:**mustache 插值和 v-bind 表達式**。過濾器應該被添加在 JavaScript 表達式的尾部,由“管道”符指示; ### 私有過濾器 1. HTML元素: ``` <td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td> ``` 2. 私有 `filters` 定義方式: ``` filters: { // 私有局部過濾器,只能在 當前 VM 對象所控制的 View 區域進行使用 dataFormat(input, pattern = "") { // 在參數列表中 通過 pattern="" 來指定形參默認值,防止報錯 var dt = new Date(input); // 獲取年月日 var y = dt.getFullYear(); var m = (dt.getMonth() + 1).toString().padStart(2, '0'); var d = dt.getDate().toString().padStart(2, '0'); // 如果 傳遞進來的字符串類型,轉為小寫之后,等于 yyyy-mm-dd,那么就返回 年-月-日 // 否則,就返回 年-月-日 時:分:秒 if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { // 獲取時分秒 var hh = dt.getHours().toString().padStart(2, '0'); var mm = dt.getMinutes().toString().padStart(2, '0'); var ss = dt.getSeconds().toString().padStart(2, '0'); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } } } ``` > 使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')來填充字符串; ### 全局過濾器 ``` // 定義一個全局過濾器 Vue.filter('dataFormat', function (input, pattern = '') { var dt = new Date(input); // 獲取年月日 var y = dt.getFullYear(); var m = (dt.getMonth() + 1).toString().padStart(2, '0'); var d = dt.getDate().toString().padStart(2, '0'); // 如果 傳遞進來的字符串類型,轉為小寫之后,等于 yyyy-mm-dd,那么就返回 年-月-日 // 否則,就返回 年-月-日 時:分:秒 if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { // 獲取時分秒 var hh = dt.getHours().toString().padStart(2, '0'); var mm = dt.getMinutes().toString().padStart(2, '0'); var ss = dt.getSeconds().toString().padStart(2, '0'); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } }); ``` > 注意:當有局部和全局兩個名稱相同的過濾器時候,會以就近原則進行調用,即:局部過濾器優先于全局過濾器被調用! ## 鍵盤修飾符以及自定義鍵盤修飾符 ### 1.x中自定義鍵盤修飾符【了解即可】 ``` Vue.directive('on').keyCodes.f2 = 113; ``` ### [2.x中自定義鍵盤修飾符](https://cn.vuejs.org/v2/guide/events.html#鍵值修飾符) 1. 通過`Vue.config.keyCodes.名稱 = 按鍵值`來自定義案件修飾符的別名: ``` Vue.config.keyCodes.f2 = 113; ``` 2. 使用自定義的按鍵修飾符: ``` <input type="text" v-model="name" @keyup.f2="add"> ``` ## [自定義指令](https://cn.vuejs.org/v2/guide/custom-directive.html) 1. 自定義全局和局部的 自定義指令: ``` // 自定義全局指令 v-focus,為綁定的元素自動獲取焦點: Vue.directive('focus', { inserted: function (el) { // inserted 表示被綁定元素插入父節點時調用 el.focus(); } }); // 自定義局部指令 v-color 和 v-font-weight,為綁定的元素設置指定的字體顏色 和 字體粗細: directives: { color: { // 為元素設置指定的字體顏色 bind(el, binding) { el.style.color = binding.value; } }, 'font-weight': function (el, binding2) { // 自定義指令的簡寫形式,等同于定義了 bind 和 update 兩個鉤子函數 el.style.fontWeight = binding2.value; } } ``` 2. 自定義指令的使用方式: ``` <input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900"> ``` ## Vue 1.x 中 自定義元素指令【已廢棄,了解即可】 ``` Vue.elementDirective('red-color', { bind: function () { this.el.style.color = 'red'; } }); ``` 使用方式: ``` <red-color>1232</red-color> ``` ## 相關文章 1. [vue.js 1.x 文檔](https://v1-cn.vuejs.org/) 2. [vue.js 2.x 文檔](https://cn.vuejs.org/) 3. [String.prototype.padStart(maxLength, fillString)](http://www.css88.com/archives/7715) 4. [js 里面的鍵盤事件對應的鍵碼](http://www.cnblogs.com/wuhua1/p/6686237.html) 5. [Vue.js雙向綁定的實現原理](http://www.cnblogs.com/kidney/p/6052935.html)
                  <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>

                              哎呀哎呀视频在线观看