| 基础-实例选项-计算属性 |
使用：在Vue实例选项中 定义 computed:{计算属性名:带返回值 的函数} |
示例：通过计算属性实现字符串的翻转 |
| 1.定义数据对象 |
| 2.实现计算属性方法 |
| 3.使用计算属性 |
{{message}}----{{reversMessage}}
let vm = new Vue({ el: '#app', data: { message: 'hello' }, computed: { // 计算属性的getter reversMessage: function () { return this.message.split('').reverse().join('') } } }) 品牌名称:
品牌名称:
| 编号 | 品牌名称 | 创立时间 | 操作 |
| {{index+1}} | {{item.name}} | {{item.date|fmDate}} | 删除 |
| 没有品牌数据 |
/* 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: '', // 搜索的内容 searchVal: '' }, methods: { // 添加 addItem() { this.list.unshift({ name: this.name, date: new Date() }) this.name = '' }, // 删除 deleItem(index) { if (confirm('是否删除')) { this.list.splice(index, 1) } } }, // 计算属性实现搜索功能 computed: { newList() { return this.list.filter((v) => { return v.name.startsWith(this.searchVal) }) } } })
在VUE中实现发送网络请求 |
原理：Vue.js中发送网络请求本质还是ajax，我们可以使用插件方便操作 |
1.vue.resource:Vue.js的插件，已经不维护，不推荐使用 |
2.axios:不是vue的插件，可以在任何地方使用，推荐 |
说明：既可以在浏览器又可以在node.js中使用的发送http请求的库，支持Promise，不支持jsonp 如果遇到jsonp请求，可以使用jsonp实现 |
// 基本用法 axios.get(url).then((response) => { // 请求成功 会来到这 res响应体 }).catch((error) => { // 请求失败 会来到这 处理err对象 })// 获取axios.get('http://localhost:3000/brands').then().catch() // 删除axios.delete('http://localhost:3000/brands/1').then().catch() // 添加 axios.post('http://localhost:3000/brands', {name: '小米', date: new Date()}).then().catch() // 修改 axios.put('http://localhost:3000/brands/1', {name: '小米', date: new Date()}).then().catch() // get模糊搜索 axios.get("http://localhost:3000/brands?name_like=" + "aaa").then().catch()//基础-表格案例-axios-列表// mounted函数 加载完DOM再执行的函数 相当于window.onload mounted() { axios.get("http://localhost:3000/brands").then(result => { this.list = result.data; }); }//基础-表格案例-axios-删除商品delItem(id) {if (confirm("确定删除此条记录")) { axios .delete("http://localhost:3000/brands/" + id) .then(result => { this.getList(); // 重新调用拉取数据 });} }//基础-表格案例-axios-添加商品addItem() { // 添加商品 axios.post("http://localhost:3000/brands", { name: this.name, date: new Date() }) .then(res => { if (res.status == 201) { this.getList(); // 重新拉取数据 this.name = ""; // 清空文本框 } }); //基础-表格案例-axios-搜索功能-分析目标: 通过分析得出 计算属性中不能进行搜索功能的结论计算属性=> 异步操作搜索=>返回结果 XXXXX 走不通结论: 搜索功能不能采用 计算属性 进行解决 注意： 计算属性中一定是 同步操作 ,如果有 异步 操作,则该业务逻辑就会失败新知识: 当需要根据数据变化 进行相应业务操作,且该操作是 异步操作 时,计算属性不能再使用,可以使用侦听 属性watch
| 基础-实例选项-WATCH-基本使用 |
特性：监听data数据变化时 自动触发函数 |
| 计算属性和watch区别： |
| 计算属性 必须要有返回值 所以说不能写异步请求 因为有人用它的返回值（插值表达式） |
| watch选项中可以写很多逻辑 不需要返回值 因为没有人用它的返回值 |
// 基本用法 data: { msg: 'abc' }, watch: { // data中的属性msg发生改变时 自动触发该函数msg(newV, oldV) { console.log(newV, oldV)}}
| 基础-组件-组件体验 |
场景：重复的页面结构，数据，逻辑 都可以抽提成一个组件 |
|
特点: 简单 高效 不重复
|
| 基础-组件-组件特点 |
| 组件和实例相似之处：data/methods/computed/watch等一应俱全 |
| 注意： |
data和Vue实例的区别为 |
| 组件中data为一个函数且需要返回一个对象 |
组件没有el选项 |
template 代表其 页面结构（有且只有一个根元素） |
每个组件都是独立的运行作用域、数据、逻辑没有任何关联 |
| 基础-组件-全局组件 |
| 全局和局部：注册方式不同 应用范围不同 |
| 注意：注意命名规范 |
| 路径：实现一个全局组件 |
| 1.定义一个全局组件 |
| 2.写入组件选项 |
| 3.使用组件 |
// 注册组件名称 推荐 小写字母 加横向的结构Vue.component("content-a", { template: ` {{count}}
`, data() { return { count: 1 };} }); // 注意 data中必须为一个返回对象的函数 // template必须有且只有一个根元素
Vue.component("content-step", { template: ` {{count}}
`, data() { return { count: 0 } }, methods: { add() { this.count++ }, cut() { this.count-- } } }) let vm = new Vue({ el: '#app', data: {} })
创作打卡挑战赛 
赢取流量/现金/CSDN周边激励大奖
