安装脚手架：全局安装
作用：在任何一个目录下都能通过命令创建项目
注意：低版本的执行这行命令可能会报错，需要升级版本
讯享网
创建项目
在指定的目录下，执行命令
作用：通过网页页面方式创建项目
讯享网
勾选 、
点击创建之后，会在后台自动创建依赖
安装devtools
方便调试 项目
注意：有些高版本的 devtools 在vue2里面用不了，需要选择合适的版本
启动项目
修改端口
默认启动端口是8080，自定义修改
配置网址
添加代理
解决跨域问题，添加代理
解释：
- assets：静态资源
- components：可重用组件
- router：路由
- store：数据共享
- view：视图组件
- App.vue：最顶层根组件
- main.js：项目入口
以后还会添加
- api：跟后台交互，发送 fetch，xhr请求，接收响应
- plugins：插件
的组件文件以 结尾，每个组件由三部分组成
讯享网
解释：
- template模板部分，由它生成 html 代码
- script代码部分，控制模板的数据来源和行为
- style样式部分，一般不怎么关心
代码示例：
其中 定义和导出 options 对象是约定好的。
整个流程
代码示例
讯享网
5.属性绑定 v-bind
代码示例
代码示例
讯享网
一般在表单中使用这种双向绑定
代码示例
如果F12看不到 vue devtools，把配置打开
最重要的不同点，computed有缓存，只需要执行一次代码，而方法调用每调用一次需要执行一遍代码。
它的底层是用了 方式发送请求和接收响应，相对于之前讲过的 来说，功能更加强大，但由于是比较老的 ，不支持 ,对进行了封装，使之支持 promise，并提供了对请求、响应的统一拦截。
安装
讯享网
代码示例
axios发送请求
请求 备注 axios.get(url[, config]) 常用 axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, data[,config]]) axios.post(url[, data[,config]]) 常用 axios.put(url[, config]) axios.patch(url[, config])
说明
- config - 选项对象、例如查询参数、请求头…
- data - 请求体数据、最常见的是 json 格式数据
axios拦截器
自己封装一个自定义的
请求拦截器：在请求发送前，可以在这里添加 、调整请求配置等。
响应拦截器：对返回数据进行统一处理，针对不同状态码进行错误处理。
封装方法：如 和 封装可以简化调用，其他方法可以按需添加。
讯享网
调用示例
代码示例
讯享网
代码示例
AddButton.vue
讯享网
DeleteButton.vue
EditButton.vue
讯享网
App.vue
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/200468.html