学习Vue.js-Day2
生活随笔
收集整理的這篇文章主要介紹了
学习Vue.js-Day2
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
書接上文/思考反饋
答：其實在實際工作中，組員會通過討論而選擇框架；這三個框架都能解放你的工作量，也適合做單頁面應(yīng)用
【今天又是努力的一天】
案例：品牌管理案例
案例要點：
主體分成兩大部分，先編寫主體代碼，再做添加。
分為1，添加信息區(qū)域 2，展示信息區(qū)域
添加信息區(qū)域代碼如下，大致 包括 三個輸入框，以及一個添加按鈕
信息展現(xiàn)區(qū)域，包括Id,Name,Time等信息的展示
<table class="table table-bordered table-hover table-striped"><thead><tr><th>Id</th><th>Name</th><th>Ctime</th><th>Operation</th></tr></thead><tbody><!-- 之前， v-for 中的數(shù)據(jù)，都是直接從 data 上的list中直接渲染過來的 --><!-- 現(xiàn)在， 我們自定義了一個 search 方法，同時，把 所有的關(guān)鍵字，通過傳參的形式，傳遞給了 search 方法 --><!-- 在 search 方法內(nèi)部，通過 執(zhí)行 for 循環(huán)， 把所有符合 搜索關(guān)鍵字的數(shù)據(jù)，保存到 一個新數(shù)組中，返回 --><tr v-for="item in search(keywords)" :key="item.id"><td>{{ item.id }}</td><td v-text="item.name"></td><td>{{ item.ctime | dateFormat() }}</td><td><a href="" @click.prevent="del(item.id)">刪除</a></td></tr></tbody></table>完成以上步驟之后，請認(rèn)真閱讀下面知識點及步驟。
通過使用 過濾器，可以達(dá)到 重寫時間的作用，比如 "2018-09-02T12:58:41.347Z"，可以變?yōu)?2018-9-2 21:19:6
過濾器
概念：Vue.js 允許你自定義過濾器，可被用作一些常見的文本格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表達(dá)式。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符指示；
1. 過濾器的定義
// 過濾器的定義語法Vue.filter('過濾器的名稱', function(){})// 過濾器中的 function ，第一個參數(shù)，已經(jīng)被規(guī)定死了，永遠(yuǎn)都是 過濾器 管道符前面 傳遞過來的數(shù)據(jù)/* Vue.filter('過濾器的名稱', function (data) {return data + '123'}) */以下例子，當(dāng)句子中存在“單純”自動換成其他
<body><div id="app"><p>{{ msg | msgFormat('瘋狂+1', '123') | test }}</p></div><script>// 定義一個 Vue 全局的過濾器，名字叫做 msgFormatVue.filter('msgFormat', function (msg, arg, arg2) {// 字符串的 replace 方法，第一個參數(shù)，除了可寫一個 字符串之外，還可以定義一個正則return msg.replace(/單純/g, arg + arg2)})Vue.filter('test', function (msg) {return msg + '========'})// 創(chuàng)建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {msg: '曾經(jīng)，我也是一個單純的少年，單純的我，傻傻的問，誰是世界上最單純的男人'},methods: {}});</script> </body>// 過濾器的定義語法// Vue.filter('過濾器的名稱', function(){})// 過濾器中的 function ，第一個參數(shù)，已經(jīng)被規(guī)定死了，永遠(yuǎn)都是 過濾器 管道符前面 傳遞過來的數(shù)據(jù)/* Vue.filter('過濾器的名稱', function (data) {return data + '123'}) */注意！！！先后順序，要先定義過濾器，在實例化vue，否則會Failed to resolve filter
修飾符的應(yīng)用
<script>// 全局的過濾器， 進行時間的格式化// 所謂的全局過濾器，就是所有的VM實例都共享的Vue.filter('dateFormat', function (dateStr, pattern = "") {// 根據(jù)給定的時間字符串，得到特定的時間var dt = new Date(dateStr)// yyyy-mm-ddvar y = dt.getFullYear()var m = dt.getMonth() + 1var d = dt.getDate()// return y + '-' + m + '-' + dif (pattern.toLowerCase() === 'yyyy-mm-dd') {return `${y}-${m}-$ozvdkddzhkzd`} else {var hh = dt.getHours()var mm = dt.getMinutes()var ss = dt.getSeconds()return `${y}-${m}-$ozvdkddzhkzd ${hh}:${mm}:${ss}`}})// 自定義全局按鍵修飾符Vue.config.keyCodes.f2 = 113// 使用 Vue.directive() 定義全局的指令 v-focus// 其中：參數(shù)1 ： 指令的名稱，注意，在定義的時候，指令的名稱前面，不需要加 v- 前綴, // 但是： 在調(diào)用的時候，必須 在指令名稱前 加上 v- 前綴來進行調(diào)用// 參數(shù)2： 是一個對象，這個對象身上，有一些指令相關(guān)的函數(shù)，這些函數(shù)可以在特定的階段，執(zhí)行相關(guān)的操作Vue.directive('focus', {bind: function (el) { // 每當(dāng)指令綁定到元素上的時候，會立即執(zhí)行這個 bind 函數(shù)，只執(zhí)行一次// 注意： 在每個 函數(shù)中，第一個參數(shù)，永遠(yuǎn)是 el ，表示 被綁定了指令的那個元素，這個 el 參數(shù)，是一個原生的JS對象// 在元素 剛綁定了指令的時候，還沒有 插入到 DOM中去，這時候，調(diào)用 focus 方法沒有作用// 因為，一個元素，只有插入DOM之后，才能獲取焦點// el.focus()},inserted: function (el) { // inserted 表示元素 插入到DOM中的時候，會執(zhí)行 inserted 函數(shù)【觸發(fā)1次】el.focus()// 和JS行為有關(guān)的操作，最好在 inserted 中去執(zhí)行，放置 JS行為不生效},updated: function (el) { // 當(dāng)VNode更新的時候，會執(zhí)行 updated， 可能會觸發(fā)多次}})// 自定義一個 設(shè)置字體顏色的 指令Vue.directive('color', {// 樣式，只要通過指令綁定給了元素，不管這個元素有沒有被插入到頁面中去，這個元素肯定有了一個內(nèi)聯(lián)的樣式// 將來元素肯定會顯示到頁面中，這時候，瀏覽器的渲染引擎必然會解析樣式，應(yīng)用給這個元素bind: function (el, binding) {// el.style.color = 'red'// console.log(binding.name)// 和樣式相關(guān)的操作，一般都可以在 bind 執(zhí)行// console.log(binding.value)// console.log(binding.expression)el.style.color = binding.value}})// 創(chuàng)建 Vue 實例，得到 ViewModelvar vm = new Vue({el: '#app',data: {id: '',name: '',keywords: '', // 搜索的關(guān)鍵字list: [{ id: 1, name: '奔馳', ctime: new Date() },{ id: 2, name: '寶馬', ctime: new Date() }]},methods: {add() { // 添加的方法// console.log('ok')// 分析：// 1. 獲取到 id 和 name ,直接從 data 上面獲取 // 2. 組織出一個對象// 3. 把這個對象，調(diào)用 數(shù)組的 相關(guān)方法，添加到 當(dāng)前 data 上的 list 中// 4. 注意：在Vue中，已經(jīng)實現(xiàn)了數(shù)據(jù)的雙向綁定，每當(dāng)我們修改了 data 中的數(shù)據(jù)，Vue會默認(rèn)監(jiān)聽到數(shù)據(jù)的改動，自動把最新的數(shù)據(jù)，應(yīng)用到頁面上；// 5. 當(dāng)我們意識到上面的第四步的時候，就證明大家已經(jīng)入門Vue了，我們更多的是在進行 VM中 Model 數(shù)據(jù)的操作，同時，在操作Model數(shù)據(jù)的時候，指定的業(yè)務(wù)邏輯操作；var car = { id: this.id, name: this.name, ctime: new Date() }this.list.push(car)this.id = this.name = ''},del(id) { // 根據(jù)Id刪除數(shù)據(jù)// 分析：// 1. 如何根據(jù)Id，找到要刪除這一項的索引// 2. 如果找到索引了，直接調(diào)用 數(shù)組的 splice 方法/* this.list.some((item, i) => {if (item.id == id) {this.list.splice(i, 1)// 在 數(shù)組的 some 方法中，如果 return true，就會立即終止這個數(shù)組的后續(xù)循環(huán)return true;}}) */var index = this.list.findIndex(item => {if (item.id == id) {return true;}})// console.log(index)this.list.splice(index, 1)},search(keywords) { // 根據(jù)關(guān)鍵字，進行數(shù)據(jù)的搜索/* var newList = []this.list.forEach(item => {if (item.name.indexOf(keywords) != -1) {newList.push(item)}})return newList */// 注意： forEach some filter findIndex 這些都屬于數(shù)組的新方法，// 都會對數(shù)組中的每一項，進行遍歷，執(zhí)行相關(guān)的操作；return this.list.filter(item => {// if(item.name.indexOf(keywords) != -1)// 注意 ： ES6中，為字符串提供了一個新方法，叫做 String.prototype.includes('要包含的字符串')// 如果包含，則返回 true ，否則返回 false// containif (item.name.includes(keywords)) {return item}})// return newList}}});// 如何自定義一個私有的過濾器（局部）var vm2 = new Vue({el: '#app2',data: {dt: new Date()},methods: {},filters: { // 定義私有過濾器 過濾器有兩個 條件 【過濾器名稱 和 處理函數(shù)】// 過濾器調(diào)用的時候，采用的是就近原則，如果私有過濾器和全局過濾器名稱一致了，這時候 優(yōu)先調(diào)用私有過濾器dateFormat: function (dateStr, pattern = '') {// 根據(jù)給定的時間字符串，得到特定的時間var dt = new Date(dateStr)// yyyy-mm-ddvar y = dt.getFullYear()var m = (dt.getMonth() + 1).toString().padStart(2, '0')var d = dt.getDate().toString().padStart(2, '0')if (pattern.toLowerCase() === 'yyyy-mm-dd') {return `${y}-${m}-$ozvdkddzhkzd`} 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}-$ozvdkddzhkzd ${hh}:${mm}:${ss} ~~~~~~~`}}},directives: { // 自定義私有指令'fontweight': { // 設(shè)置字體粗細(xì)的bind: function (el, binding) {el.style.fontWeight = binding.value}},'fontsize': function (el, binding) { // 注意：這個 function 等同于 把 代碼寫到了 bind 和 update 中去el.style.fontSize = parseInt(binding.value) + 'px'}}})// 過濾器的定義語法// Vue.filter('過濾器的名稱', function(){})// 過濾器中的 function ，第一個參數(shù)，已經(jīng)被規(guī)定死了，永遠(yuǎn)都是 過濾器 管道符前面 傳遞過來的數(shù)據(jù)/* Vue.filter('過濾器的名稱', function (data) {return data + '123'}) */// document.getElementById('search').focus()</script>總結(jié)
以上是生活随笔為你收集整理的学习Vue.js-Day2的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网易来聊聊子弹短信的消息漫游技术
- 下一篇： Python爬虫学习笔记（三）——正则表