Vue
2021-04-04 00:44:53 71 举报AI智能生成
请大家不要直接克隆，着手梳理一遍才会变成自己的知识
作者其他创作
大纲/内容
Vue
什么是VUE
作者：尤雨溪
Vue是用于构建用户界面的渐进式框架
Vue 只关注视图层， 采用自底向上增量开发的设计
优势
1、集成了模块化
这是Angular的特性
2、结合了虚拟dom
这是react的特性
3、支持双向绑定
v-model
4、Vue是MVVM的具体应用
引入Vue和axios
pre style=\
axios
axios是Vue推荐的通信框架，不推荐使用jQuery是因为jQuery对dom操作太频繁了，影响效率
推荐在mounted的钩子函数里写
计算属性
节省计算开销，计算属性在内存中运行
conputed属性中写
当计算缓存被修改会重新计算
⭐插槽（slot）
Vue支持热拔插
示例
1、插槽结构
introduce
self
family
2、插槽定义
3、插槽使用
4、对应关系
1、introduce里的两个插槽分别对应下面的self和family
template内嵌套插槽需要用name属性绑定子插槽
2、插槽定义有值传递的时候，需要用props接受参数
3、插槽使用的时候，子插槽需要绑定插槽名称
4、插槽有参数使用的时候，需要通过v-bind：绑定参数（也可以直接：，省略掉v-bind）绑定的参数和插槽定义时的props内属性对应
事件分发
1、组件编写触发向Vue实例传递index的函数方法
2、组件绑定事件触发条件
3、组件填充时传递index
4、Vue实例中编写事件函数
文件示例
vue-cli
需要node.js的支持
官网下载直接安装就可以了
node.js会自己添加环境变量，不需要手动添加环境变量
npm install cnpm -g
全局安装cnpm
cnpm是国内淘宝镜像，速度更快
安装vue-cli
cnpm install vue-cli -g
全局安装vue-cli
创建一个vue-cli项目
1、cmd进入目标目录
2、cmd输入vue init webpack 项目名
3、询问项目名称，直接回车，因为上面写过了
4、项目描述，直接回车
5、项目作者，可以输入自己的昵称
6、运行时编译，选择第一个
7、各种配置，一路No下去，我们需要自己走一遍才能更加了解运行过程
8、项目已经初始化完成了
9、进入我们的新项目
cd 项目名
10、安装npm
npm install
如果出错了的话，它会提示你怎么做，你照着输入修复指令就可以了
11、打包启动测试
npm run dev
12、出现Done提示后，浏览器输入localhost:8080应该可以成功打开初始页面
13、ctrl+c后输入y确定可以停止服务
webpack
介绍
热部署
打包用的，可以把es6的模块打包降级到es5，使得所有的浏览器都可以使用
目前很多浏览器只支持es5
安装webpack
管理员运行cmd
npm install webpack -g
npm install webpack-cli -g
成功截图
可以手动查看版本
如果安装失败了，改用cnpm install webpack -g一般就可以成功了
简单学习如何使用webpack
1、新建一个文件夹，使用idea打开
2、新建modules文件夹
3、新建hello.js
export暴露js方法
4、新建main.js
require引入暴露的js，声明一个变量接受
该变量可以像Java中的类一样通过点来调用js方法
5、新建webpack.config.js
配置打包参数
1、entry入口
一般就是main.js
2、output输出
新建bundle.js作为接收输出的js（官方规范命名）
6、terminal输入webpack打包
打包成功会多一个dist文件夹，里面有一个js文件夹，js文件夹里面就是打包成功的bundle.js
7、新建html，引入bundle.js测试是否成功
8、浏览器打开，显示hi!xiaoye!
⭐vue-router
⭐是font color=\"#c41230\
浪费了我一下午，淦！
1、安装vue-router
npm install vue-router --save-dev
失败就换cnpm
2、main.js导入VueRouter
import
显示声明使用
3、编写components组件
4、在router的index.js里面写路径
5、在页面直接应用
vue+element
1、搭建项目
1、命令符进入目标盘，创建前端webpack项目
vue init webpack vue-element
2、确认项目、描述、作者、选择不自动安装相关配置
一路No下去
3、进入项目
cd vue-element
4、安装相关依赖
1、npm install vue-router -D
路由配置
2、npm i element-ui -S
element-ui
3、cnpm install sass-loader node-sass -D
sass-loader和node-sass加载器
sass是css预处理器
4、npm install
2、配置路由
1、创建router目录
2、router目录下创建index.js
3、编写index.js
1、import Vue
2、import VueRouter
3、显式声明使用路由
Vue.user(VueRouter)
4、暴露路由对象
4、main.js引用router
1、import router from \"./router\"
2、vue实例中配置路由
3、配置ElementUI
1、main.js中引入ElementUI
2、main.js中引入预加载的css
3、显示声明使用Element UI
4、vue实例中配置render渲染
main.js文件示例
4、编写两个页面模拟登录
1、main
2、login
⭐登录成功跳转路由（编程式导航）
⭐注意点
如果npm run dev失败可能是因为sass-loader版本过高，降级后npm install即可
1、node-sass : ^4.13.0
2、sass-loader : ^7.3.1
嵌套路由
1、创建新的页面
2、在router的index.js里配置路由
1、import
2、配置子路由
3、在Main.Vue页面模拟子路由嵌套
参数传递和重定向
参数传递
第一种方式
1、父组件给参数
2、路由index.js对应
3、子组件拿参数
第二种方式
重定向
1、路由配置
2、视图引用
3、404使用重定向实现
拦截器
1、安装axios
1、npm安装
npm install --save vue-axios
2、main.js引入
2、编写进出前后的方法
1、进入前
beforeRouteEnter
2、离开前
beforeRouteLeave
3、实际参数
to
将要跳转的路径信息
from
跳转前的路径信息
next
路由控制参数
next（）
跳入下一个页面
next（'/path'）
指定跳入path路由
next (false)
返回原来的页面
next(vm=>{ })
仅在beforeRouteEnter可用，vm为组件实例
⭐Vue的生命周期
请大家点击文字后方的链接移步至我的流程图，流程图理解配合下方代码文件动手验证效果更好
vue的生命周期钩子函数
⭐请先在terminal终端中输入 npm install vue 安装vue！！不然是不会成功哒
源码文件
0 条评论
回复 删除
下一页
