學習Vue.js-Day2
書接上文/思考反饋
- react,ng,vue做用差很少，那各個都有什麼特色啊，實際工做中應該用哪個？
答：其實在實際工做中，組員會經過討論而選擇框架；這三個框架都能解放你的工做量，也適合作單頁面應用
【今天又是努力的一天】vue
案例：品牌管理案例
- 結合第一天所學知識，作案例；螺旋式提高開發能力
案例要點：react
- 添加新品牌
- 刪除品牌
- 篩選品牌
主體分紅兩大部分，先編寫主體代碼，再作添加。
分爲1，添加信息區域 2，展現信息區域
添加信息區域代碼以下，大體 包括 三個輸入框，以及一個添加按鈕express
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:
<input type="text" class="form-control" v-model="id">
</label>
<label>
Name:
<input type="text" class="form-control" v-model="name" @keyup.f2="add">
</label>
<!-- 在Vue中，使用事件綁定機制，爲元素指定處理函數的時候，若是加了小括號，就能夠給函數傳參了 -->
<input type="button" value="添加" class="btn btn-primary" @click="add()">
<label>
搜索名稱關鍵字：
<!-- 注意： Vue中全部的指令，在調用的時候，都以 v- 開頭 -->
<input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'green'">
</label>
</div>
</div>
信息展示區域，包括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 中的數據，都是直接從 data 上的list中直接渲染過來的 -->
<!-- 如今， 咱們自定義了一個 search 方法，同時，把 全部的關鍵字，經過傳參的形式，傳遞給了 search 方法 -->
<!-- 在 search 方法內部，經過 執行 for 循環， 把全部符合 搜索關鍵字的數據，保存到 一個新數組中，返回 -->
<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>
完成以上步驟以後，請認真閱讀下面知識點及步驟。
經過使用 過濾器，能夠達到 重寫時間的做用，好比 "2018-09-02T12:58:41.347Z"，能夠變爲 2018-9-2 21:19:6瀏覽器
過濾器
概念：Vue.js 容許你自定義過濾器，可被用做一些常見的文本格式化。過濾器能夠用在兩個地方：mustache 插值和 v-bind 表達式。過濾器應該被添加在 JavaScript 表達式的尾部，由「管道」符指示；app
1. 過濾器的定義框架
// 過濾器的定義語法
Vue.filter('過濾器的名稱', function(){})
// 過濾器中的 function ，第一個參數，已經被規定死了，永遠都是 過濾器 管道符前面 傳遞過來的數據
/* Vue.filter('過濾器的名稱', function (data) {
return data + '123'
}) */
如下例子，當句子中存在「單純」自動換成其餘函數
<body>
<div id="app">
<p>{{ msg | msgFormat('瘋狂+1', '123') | test }}</p>
</div>
<script>
// 定義一個 Vue 全局的過濾器，名字叫作 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字符串的 replace 方法，第一個參數，除了可寫一個 字符串以外，還能夠定義一個正則
return msg.replace(/單純/g, arg + arg2)
})
Vue.filter('test', function (msg) {
return msg + '========'
})
// 建立 Vue 實例，獲得 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '曾經，我也是一個單純的少年，單純的我，傻傻的問，誰是世界上最單純的男人'
},
methods: {}
});
</script>
</body>
// 過濾器的定義語法
// Vue.filter('過濾器的名稱', function(){})
// 過濾器中的 function ，第一個參數，已經被規定死了，永遠都是 過濾器 管道符前面 傳遞過來的數據
/* Vue.filter('過濾器的名稱', function (data) {
return data + '123'
}) */
注意！！！前後順序，要先定義過濾器，在實例化vue，不然會Failed to resolve filter字體
修飾符的應用
<script>
// 全局的過濾器， 進行時間的格式化
// 所謂的全局過濾器，就是全部的VM實例都共享的
Vue.filter('dateFormat', function (dateStr, pattern = "") {
// 根據給定的時間字符串，獲得特定的時間
var dt = new Date(dateStr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
// return y + '-' + m + '-' + d
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
// 自定義全局按鍵修飾符
Vue.config.keyCodes.f2 = 113
// 使用 Vue.directive() 定義全局的指令 v-focus
// 其中：參數1 ： 指令的名稱，注意，在定義的時候，指令的名稱前面，不須要加 v- 前綴,
// 可是： 在調用的時候，必須 在指令名稱前 加上 v- 前綴來進行調用
// 參數2： 是一個對象，這個對象身上，有一些指令相關的函數，這些函數能夠在特定的階段，執行相關的操做
Vue.directive('focus', {
bind: function (el) { // 每當指令綁定到元素上的時候，會當即執行這個 bind 函數，只執行一次
// 注意： 在每一個 函數中，第一個參數，永遠是 el ，表示 被綁定了指令的那個元素，這個 el 參數，是一個原生的JS對象
// 在元素 剛綁定了指令的時候，尚未 插入到 DOM中去，這時候，調用 focus 方法沒有做用
// 由於，一個元素，只有插入DOM以後，才能獲取焦點
// el.focus()
},
inserted: function (el) { // inserted 表示元素 插入到DOM中的時候，會執行 inserted 函數【觸發1次】
el.focus()
// 和JS行爲有關的操做，最好在 inserted 中去執行，放置 JS行爲不生效
},
updated: function (el) { // 當VNode更新的時候，會執行 updated， 可能會觸發屢次
}
})
// 自定義一個 設置字體顏色的 指令
Vue.directive('color', {
// 樣式，只要經過指令綁定給了元素，無論這個元素有沒有被插入到頁面中去，這個元素確定有了一個內聯的樣式
// 未來元素確定會顯示到頁面中，這時候，瀏覽器的渲染引擎必然會解析樣式，應用給這個元素
bind: function (el, binding) {
// el.style.color = 'red'
// console.log(binding.name)
// 和樣式相關的操做，通常均可以在 bind 執行
// console.log(binding.value)
// console.log(binding.expression)
el.style.color = binding.value
}
})
// 建立 Vue 實例，獲得 ViewModel
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
keywords: '', // 搜索的關鍵字
list: [
{ id: 1, name: '奔馳', ctime: new Date() },
{ id: 2, name: '寶馬', ctime: new Date() }
]
},
methods: {
add() { // 添加的方法
// console.log('ok')
// 分析：
// 1. 獲取到 id 和 name ,直接從 data 上面獲取
// 2. 組織出一個對象
// 3. 把這個對象，調用 數組的 相關方法，添加到 當前 data 上的 list 中
// 4. 注意：在Vue中，已經實現了數據的雙向綁定，每當咱們修改了 data 中的數據，Vue會默認監聽到數據的改動，自動把最新的數據，應用到頁面上；
// 5. 當咱們意識到上面的第四步的時候，就證實你們已經入門Vue了，咱們更多的是在進行 VM中 Model 數據的操做，同時，在操做Model數據的時候，指定的業務邏輯操做；
var car = { id: this.id, name: this.name, ctime: new Date() }
this.list.push(car)
this.id = this.name = ''
},
del(id) { // 根據Id刪除數據
// 分析：
// 1. 如何根據Id，找到要刪除這一項的索引
// 2. 若是找到索引了，直接調用 數組的 splice 方法
/* this.list.some((item, i) => {
if (item.id == id) {
this.list.splice(i, 1)
// 在 數組的 some 方法中，若是 return true，就會當即終止這個數組的後續循環
return true;
}
}) */
var index = this.list.findIndex(item => {
if (item.id == id) {
return true;
}
})
// console.log(index)
this.list.splice(index, 1)
},
search(keywords) { // 根據關鍵字，進行數據的搜索
/* var newList = []
this.list.forEach(item => {
if (item.name.indexOf(keywords) != -1) {
newList.push(item)
}
})
return newList */
// 注意： forEach some filter findIndex 這些都屬於數組的新方法，
// 都會對數組中的每一項，進行遍歷，執行相關的操做；
return this.list.filter(item => {
// if(item.name.indexOf(keywords) != -1)
// 注意 ： ES6中，爲字符串提供了一個新方法，叫作 String.prototype.includes('要包含的字符串')
// 若是包含，則返回 true ，不然返回 false
// contain
if (item.name.includes(keywords)) {
return item
}
})
// return newList
}
}
});
// 如何自定義一個私有的過濾器（局部）
var vm2 = new Vue({
el: '#app2',
data: {
dt: new Date()
},
methods: {},
filters: { // 定義私有過濾器 過濾器有兩個 條件 【過濾器名稱 和 處理函數】
// 過濾器調用的時候，採用的是就近原則，若是私有過濾器和全局過濾器名稱一致了，這時候 優先調用私有過濾器
dateFormat: function (dateStr, pattern = '') {
// 根據給定的時間字符串，獲得特定的時間
var dt = new Date(dateStr)
// yyyy-mm-dd
var 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}-${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} ~~~~~~~`
}
}
},
directives: { // 自定義私有指令
'fontweight': { // 設置字體粗細的
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 ，第一個參數，已經被規定死了，永遠都是 過濾器 管道符前面 傳遞過來的數據
/* Vue.filter('過濾器的名稱', function (data) {
return data + '123'
}) */
// document.getElementById('search').focus()
</script>
相關文章
- 1. 學習學習HTTP
- 2. 學習CPU學習
- 3. 機器學習深度學習加強學習_機器學習-深度學習
- 4. 學習一下學習一下學習一下學習一下學習一下
- 5. 學習與學習的感受|真學習與假學習
- 6. 學習深度學習是否要先學習機器學習？
- 7. 學習筆記：JWT學習
- 8. 「真學習」與「假學習」
- 9. java學習和Android學習
- 10. 《Netty學習》（三）Channel學習
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 學習學習HTTP
- 2. 學習CPU學習
- 3. 機器學習深度學習加強學習_機器學習-深度學習
- 4. 學習一下學習一下學習一下學習一下學習一下
- 5. 學習與學習的感受|真學習與假學習
- 6. 學習深度學習是否要先學習機器學習？
- 7. 學習筆記：JWT學習
- 8. 「真學習」與「假學習」
- 9. java學習和Android學習
- 10. 《Netty學習》（三）Channel學習