Vue案例

小案例收获

vue

表格案例

列表渲染的步骤： 找到重复出现的标签结构用v-for列表渲染（v,i）in list在data中提供一个数组list在视图中通过插值表达式来显示

用axios特换假数据实现列表渲染：

data里面的list数据置空methods里加方法，getAllBrands(),用axios发get请求mounted里加加载渲染，执行getAllBrands() 条件渲染的步骤： 找到使用条件渲染的标签确定使用v-if 还是v-show设置条件 向列表中添加项： 找到输入框，v-model绑定data中的数据在data中提供一个以供添加的数据找到添加按钮，绑定时间在methods中添加方法在方法中向data中的list添加数据 删除 找到删除按钮，绑定事件在methods中添加删除方法方法中定位利用v-for中的索引定位，向删除方法中传参

用axios删除项：主要url是删除项的url，可以传参数ID，ID拼接在url后面：/+ID

模糊搜索：/?name_like='+this.searchVal f返回符合条件的对象 用watch解决axios搜索问题： watch：{ searchVal(newVal,oldVal){ axios.get('url/?name_like='+newVal).then((res)=>{ const{status,data}=res; if(status===200){ this.list = data; }) 自动获取焦点：

mounted(){this.$refs.ref属性值.focus();

$event是vue自有的实参事件对象，$event.target指向触发事件的标签

heroes案例

组件拆分：相当于分析布局, App.vue根组件，用于展示不同的组件导入素材：在main.js中导入所需的样式提取组件： .vue中的template要求要有且只有一个根元素在根组件中使用其他组件，先导入import，在注册组件（在实例选项components中进行注册）组件命名，驼峰可自动在标签里转成短横线 路由模块：具有特定功能的js代码封装为模块，router.js 安装vue-router,并在使用的路由模块中导入 import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 在侧边栏组件中改标签为router-linkrouter-view在App.vue根组件中显示导入要渲染的组件 import list from '路径' 导入导出挂载 在router.js中导出：export default router 在main.js中导入：import vue-router from '本地路径router.js文件' 可以利用路由选项linkExactActiveClass:'类名’来设置路由激活样式 列表渲染： list组件中data中的list列表，组件中的data是有返回值的函数，返回对象 export default{ data(){ return{list:[]} }, methods{ 添加组件： 点击按钮出现新标签，标识变，组件变=>路由 在methods方法中： this.$router.push({name:''}) 显示编辑信息： 数据来源于被点击的英雄数据 上级组件中： this.$router.push({name:'',params:{id:ID}}) 本组件： axios.get(url+ID)

不同标识对应同一组件：动态路由 配置路径path：’/edit/:id’ 同一组件间的数据使用用data来沟通

axios统一导入 在main.js中统一导入axios，其他组件不能直接用js中给一个实例添加一个成员属性，需要在它的构造原型上添加 Vue.prototype.axios = axios; 这样在使用axios时，要用this.axios 设置baseURL 在入口文件中设置 axios.defaults.baseURL = ''

js

unshift()方法：将新项插入到数组开始的位置a标签的点击有默认行为，.prenventsplice()方法：在数组中添加/删除项window自带的方法，if(confirm('sure')){}，弹出是否确认的框charAt()：获取索引字符substr()：截取从指定下标开始的指定数目的字符filter(函数)：数组自带的方法，遍历数组中的每一项，判断返回一个符合条件新数组startsWith()：调用的数据是否以参数字符串开头，返回布尔值；endsWith(),includes()对象解构赋值： const{status,data}=res; 取出了status和data的值，相当于变量，下面直接用即可 常见异步操作： ajax,定时器，点击事件，数据库的操作与访问 异步操作解决办法：callback回调函数axios中的then没有第二个参数在js中遇到大量重复代码时：for循环，封装replace(a,b):用b替换atop是js的关键字，不能用作变量名正则：/\.vue$/,匹配以.vue结尾的文件ES6模块的导入和导出： import Vue from 'vue' export default{} button，是有默认行为的

css

input标签的disabled属性：设置按钮是否可以点击base.css: list-style:none,用来设置列表前的圆点text-decoration:none,用来设置a的下划线表现clear:both,用来清除浮动 thead标签：定义表格的表头 tr：行；td：标准单元格；th：表头单元格选择器权重：id>class

JSON-server

全局命令行工具，快速把一个json文件托管成一个web服务器。 基于Express,支持CORS,JSONP跨域请求，支持get,post,put,delete请求类型

使用步骤： 先进行全局安装监听db.json文件 json-server --watch db.json 若端口被占用，则更换端口 json-server --watch --port 端口号 db.json RESTful接口规则 在服务器下发送请求需要遵从接口规则

特点：

不同的请求类型发送的请求标识是相同的，但处理不同

请求类型：

get：获取数据post：添加提交数据put：修改数据delete：删除数据 postman进行接口测试：

请求数据成功的状态码status，post201，其他为200

jsonp解决跨域问题的原理： 利用script中的src属性，用src访问数据不存在跨域问题，利用属性给它传callback函数，数据以参数传入

SPA单页web应用

当url的标识改变时，在同一页面渲染不同的组件 可能存在的问题： 单次加载大量资源； 对SEO不友好 实现原理： 前后端分离，前端专注于交互和可视化（页面渲染）+前端路由 路由：根据不同的url标识，去渲染不同的组件 用原生js实现路由：hash路由，location.hash获得标识