框架
就是对某一方面技术的完整封装,是一套完整的解决方案
会把很多的基础功能封装实现,开发人员在框架的基础上进行开发.
代码简洁,开发效率,运行效率都会提高.
vue.js
是一个js框架,对原生的js进行了封装. 简化了js操作的语法
Vue.js 是前端的主流框架之一, 和 Angular.js、React.js 一起,并成为前端三大主流框架!
Vue指令
指令带有前缀 v- 开头,以表示它们是 Vue 提供的特殊属性。
v-text | 设置标签的文本内容 |
v-html | 内容中有 html 结构会被解析为标签 |
v-on | 为元素绑定事件 |
v-model | 设置和获取表单元素的值 |
v-show | 根据真假切换元素的显示状态 |
v-if | 根据表达式的真假切换元素的显示状态 |
v-bind | 为元素绑定属性 |
vue-cli 搭建项目
vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板。
环境:
Node.js 就是运行在服务端的 JavaScript。
npm 是 Node.js 的包管理工具,用来安装各种 Node.js 的扩展
使用 HbuilderX 快速搭建一个 vue-cli 项目
创建成功后,点击文件目录,点击终端(或使用快捷键Alt+C)
在命令行窗口启动项目,npm run serve
具体命令需要看配置文件中如何定义
启动成功后,会出现访问项目地址:http://127.0.0.1:8080/
在命令行中 ctrl+c 停止服务
组件路由
vue router 是 Vue.js 官方的路由管理器。
安装vue-router插件包(用npm安装):
打开命令行工具,进入你的项目名称,输入以下指令
npm i vue-router@3.5.3
搭建步骤:
- 创建 router 目录
创建 index.js 文件,在其中配置路由
import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
import login from '../views/login'; /* 导入其他组件 */
import content from '../components/content'; /* 导入其他组件 */
Vue.use(router)
/* 定义组件路由 */
var rout = new router({
routes: [
{
path: '/index',
name: 'index',
component: index
},
{
path: '/content',
component: content
}
]
});
//导出路由对象
export default rout;
- 使用路由
<router-link to="/index">首页</router-link>
<router-link to="/content">内容</router-link>
<router-view/>
- 在 main.js 中配置路由
import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})
- 路由导航守卫
为路由对象,添加 beforeBach 导航守卫
to-将要访问的页面地址,from-从哪个页面访问的,next-放行函数
rout.beforeEach((to,from,next)=>{
if(to.path=='/login'){如果用户访问的登录页,直接放行
return next();
}else{
var token = window.sessionStorage.getItem("token");
if(token==null){
return next("/login");
}else{
next();
}
}
})```
5.路由嵌套
```{
path: '/main',
component: Main, //路由嵌套 在 main 下面的嵌套子路由
children:[
{
path:"/admin",
component:Admin
}
]
}
ElementUI
是一个UI框架(html和css的封装),
提供丰富的前端组件(表单,表格组件,对话框)
在 main.js 中写入以下内容:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app');
网络请求
axios 是一个 HTTP 的网络请求库.
安装 npm install axios
在 main.js 中配置 axios
导入 axios
import axios from ‘axios’;
设置访问后台服务器地址
axios.defaults.baseURL=“http://127.0.0.1:9999/api/”;
将 axios 挂载到 vue 全局对象中,使用 this 可以直接访问
Vue.prototype.$http=axios;