Vue基础2（简单易上手，适合前后端）
大家好！今天我们继续深入探讨Vue.js的基础知识。上一篇博客我们已经了解了Vue的基本概念和一些基础用法，那么今天我们就通过一个综合案例来概括来讲，这些知识。让我们一起动手实现一个简单的品牌列表管理吧！
首先，我们来实现一个表格，表格中有品牌名称、创立时间和操作按钮。我们可以使用Vue的双向绑定和条件渲染来动态展示数据。
//表格综合案例：
/*
1. 静态页面 准备
2. 实例化一个Vue
3. 定义表格数据
4. 采用v-for 循环将静态内容切换为动态内容
5. 采用v-if控制提示消息
*/
// 准备数据
new Vue({
el: '#app',
data: {
//模拟ajax请求返回的数据
list: [
{ name: 'TCL', date: new Date() },
{ name: '小米', date: new Date() },
{ name: '华为', date: new Date() }
],
//要添加的商品名称
name: ''
},
methods: {
//删除商品
deleteItem: function(index) {
if (confirm('是否删除？')) {
this.list.splice(index, 1);
}
},
//添加商品
addItem: function() {
// 向list数组中添加商品
this.list.unshift({ name: this.name, date: new Date() });
//清空商品名称的输入框
this.name = '';
}
}
});
通过这个案例，我们可以看到Vue的强大之处。我们可以轻松地实现数据的动态绑定、条件渲染和事件处理。这不仅提高了开发效率，还让我们的代码更加简洁和易于维护。
接下来，我们再来聊聊Vue的过滤器。过滤器可以让我们在模板中处理数据，比如格式化日期、货币单位等。
{{msg | capita}}
// 全局过滤器
Vue.filter('capita', function (value) {
return value.charAt(0).toUpperCase() + value.slice(1);
});
let vm = new Vue({
el: "#app",
data: {
msg: 'hello'
}
});
通过过滤器，我们可以轻松地对字符串进行处理。这在实际开发中非常有用，比如我们需要对日期进行格式化时，只需一行代码就可以搞定。
最后，我们还可以学习如何使用Vue的自定义指令。自定义指令可以让我们操作DOM元素，进行一些底层的操作。
// 自定义指令获取焦点
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
new Vue({
el: '#app',
data: {
// 模拟ajax的数据
list: [
{ name: '大娃', date: new Date() },
{ name: '二娃', date: new Date() },
{ name: '三娃', date: new Date() }
],
// 我要添加的数据
name: ''
},
methods: {
// 添加
addItem() {
this.list.unshift({ name: this.name, date: new Date() });
this.name = '';
},
// 删除
deleItem(index) {
if (confirm('是否删除')) {
this.list.splice(index, 1);
}
}
}
});
通过自定义指令，我们可以实现一些高级功能，比如自动聚焦、拖拽等。这大大扩展了Vue的功能，让我们的开发更加灵活。
希望今天的分享能让大家对Vue有一个更深入的理解。如果你有任何问题或想法，欢迎留言讨论！记得点赞和分享哦！下期我们继续深入探讨Vue的高级用法！
上一篇博客发的是Vue基础的第一部分，这一篇博客先就上一篇博客中Vue的相关知识通过一个综合案例来总结
//表格综合案例： /* 1. 静态页面 准备 2. 实例化一个Vue 3. 定义表格数据 4. 采用v-for 循环将静态内容切换为动态内容 5. 采用v-if控制提示消息 */ // 准备数据 new Vue({ el: '#app', data: { //模拟ajax请求返回的数据 list: [{ name: 'TCL', date: new Date() }, { name: '小米', date: new Date() }, { name: '华为', date: new Date() }], //要添加的商品名称 name: '' }, methods: { //删除商品 deleteItem: function(index) { // console.log(index); // console.log('deleteItem被触发了'); //要从list数组中删除当前的tr标签对应的数据 //提示框 if(confirm('是否删除？')){ this.list.splice(index, 1); } }, //添加商品 addItem: function() { // 向list数组中添加商品 this.list.unshift({ name: this.name, date: new Date() }); //清空商品名称的输入框 this.name = ''; } } }); | 基础-过滤器-过滤器的基本用法 |
|---|
1.在创建Vue实例之前定义全局过滤器Vue.filter() |
| 2.在实例的filter选项中定义局部过滤器 |
| 3.在视图中通过{{数据 | 过滤器名字}}或者v-bind使用过滤器 |
{{msg|capita}}
{{msg|capita}}
// 全局过滤器 Vue.filter('capita',function (value) { return value.charAt(0).toUpperCase() + value.slice(1) }) let vm = new Vue({ el: "#app", data: { msg: 'hello' } }) let vm1 = new Vue({ el:"#app1", data: { msg: 'hello' } }) //局部过滤器 let vm = new Vue({ el: "#app", data: { msg: 'hello' }, filters: { capita: function (value) { return value.charAt(0).toUpperCase() + value.slice(1) } } }) {{msg|a('元')|b}}
//过滤器的高级用法 let vm = new Vue({ el: "#app", data: { msg: 100 }, filters: { a: function (v, yuan) { return v + yuan }, b: function (v) { return v + '人民币' } } }) /* 1. 静态页面 准备 2. 实例化一个Vue 3. 定义表格数据 4. 采用v-for 循环将静态内容切换为动态内容 5. 采用v-if控制提示消息 */ // 准备数据 // 过滤器过滤日期 Vue.filter('fmDate', function (v) { return moment(v).format('YYYY-MM-DD, h:mm:ss a') }) // 自定义指令获取焦点 Vue.directive('foucs', { inserted: function (el) { el.focus() } }) new Vue({ el: '#app', data: { // 模拟ajax的数据 list: [{ name: '大娃', date: new Date() }, { name: '二娃', date: new Date() }, { name: '三娃', date: new Date() }], // 我要添加的数据 name: '' }, methods: { // 添加 addItem() { this.list.unshift({ name: this.name, date: new Date() }) this.name = '' }, // 删除 deleItem(index) { if (confirm('是否删除')) { this.list.splice(index, 1) } } } }) | 基础-REF属性-获取DOM |
|---|
| 使用：给元素定义ref属性，然后通过$refs.名称 来获取dom对象 |
let vm = new Vue({ el: '#app', data: { }, methods: { getVal() { console.log(this.$refs.txt.value) } }, // 相当于window.onload页面加载完毕 mounted() { this.$refs.txt.focus() } }) | 基础-自定义指令 |
|---|
| 使用场景：需要对普通DOM元素进行底层操作，这时候救会用到自定义指令 |
| 分类：全局和局部 |
| 全局自定义指令： |
1.在创建Vue实例之前定义全局自定义指令Vue.directive(参数1，参数2) |
| 第一个参数是指令名称 |
| 第二个参数是一个对象 |
| 对象中要实现inserted方法 |
inserted方法中的参数为当前指令 所在元素的DOM对象
// 1.注册一个自定义指令 Vue.directive( '指令名称' , { inserted(参数){ //参数为使用指令的DOM //操作 } }) // 2.使用自定义指令 // 示例(全局自动聚焦的自定义指令) Vue.directive("focus", {inserted(dom) { dom.focus();} }); // 使用自定义指令 // 自定义指令 // Vue.directive('focus', { // // 当被绑定的元素插入到DOM中执行 // inserted: function (el) { // el.focus() // } // }) let vm = new Vue({ el: '#app', data: { }, directives: { focus: { inserted: function (el) { el.focus() } } } }) //局部指令在vue实例内部定义 directives: { "focus": {inserted(dom) { dom.focus(); } } } // 调用 
