Vue基础2（简单易上手，适合前后端）
上一篇博客发的是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(); } } } // 调用