[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
目录
一. vue概述(vue.js)
1. 定义:
2. 特点:
二. vue指令
(1) v-text 和 v-html
(2) v-on 和 v-model
(3) v-show 和 v-if
(4) v-bind
(5) v-for
(6) 声明周期函数
三. vue.cli
1. 概述
2. 创建前端单页结构项目
(1) 安装前端环境 node.js
(2) 使用 HbuilderX 快速搭建一个 vue-cli 项目
(3) 基本指令
3. 组件路由
(1) 安装
(2) 在index.js配置路由
(3)在main.js中配置路由
(4)在App.vue中配置
(5)更换npm 镜像地址
4. 新建项目步骤
四. ElementUI
(1)安装ElementUI
(2)在main.js中导入elementui组件
(3)views
一. vue概述(vue.js)
1. 定义:
vue是一个前端javascript框架,对javascript进行封装.
vue.js和 Angular.js、React.js 一起，并成为前端三大主流框架
2. 特点:
1.体积小(封装的文件小)
2.运行效率高,不直接对网页上的标签进行操作,而是基于dom技术进行优化
3.实现数据双向绑定,程序员只关心要操作的数据即可, 把数据渲染到标签上交给vue框架处理.
4.生态丰富、学习成本低
二. vue指令
指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性。
(1) v-text 和 v-html
{{message}} 不会覆盖标签体中的内容，只是在标签内部插入一个值
v-html 和 v-text 会用数据覆盖标签体中的内容
区别: v-html 能解析字符串中的标签
v-text 不能解析字符串中的标签
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><!-- 导入vue.js库 --><script src="js/vue@2.js"></script><body><!-- v-是vue提供的特殊指令 {{message}} 不会覆盖标签体中的内容，只是在标签内部插入一个值v-html和v-text 会用数据覆盖标签体中的内容v-html 能解析字符串中的标签v-text 不能解析字符串中的标签--><div id="app"><div> <!-- 大的div 属于整体 只要属于大的div中的数据都可以显示-->{{message}},{{a}}<p> </p></div><div v-html="message1"></div><div v-text="message1"></div></div><!-- 先加载网页里面的内容,在执行js --><script type="text/javascript">/* 创建一个不饿对象,把网页上指定id的标签与vue 对象进行绑定data中定义使用分数据 键:值 {{变量}}，插值表达式，获取到data中的定义数据*/let b ="abc";let app= new Vue({el:"#app",// 与<div id="app"> dom 相对应data:{a:"abc",message:"hello vue",message1:"<b>hello vue</b>"}});</script></body>
</html>
(2) v-on 和 v-model
v-model可以将 输入标签中的值value (双向)绑定 到指定的属性上
v-on用于监听各种事件
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><!-- 导入vue.js库 --><script src="js/vue@2.js"></script><body><div id="app"><!-- v-on用于监听各种事件 --><input type="button" value="按钮1" v-on:click="test1(3)"/><!-- 传参3 --><input type="button" value="按钮2" @click="test2()"/><!-- 与上述写法表示相同 使用更多--><hr /><!-- v-model可以将 输入标签中的值value (双向)绑定 到指定的属性上 --><p>{{name}}</p><input type="text" value="" v-model="name" /><input type="button" value="测试" @click="test3()" /></div><script type="text/javascript">let app= new Vue({el:"#app",data:{//定义数据message:"hello vue",name:""},methods:{//定义函数test1(a){alert(1);alert(a);//传参},test2(){alert(this.message); // this表示vue对象 },test3(){this.name="jim";}}});</script></body>
</html>
(3) v-show 和 v-if
v-show="布尔值" 根据布尔值显示或者隐藏当前标签 , 里面可以直接写是否展示, 也可以写条件,通过条件判断是否展示 . 通过 display的值 控制标签 显示或隐藏,每次不需要重新创建标签 效率高
v-if="布尔值" 根据布尔值显示或隐藏当前标签 但是每次从网页中需要 删除/创建 标签,数量多了效率低. v-if和v-else标签必须挨着
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><!-- 导入vue.js库 --><script src="js/vue@2.js"></script><body><div id="app"><!-- v-show="布尔值" 根据布尔值显示或者隐藏当前标签 通过 display的值 控制标签 显示或隐藏,每次不需要重新创建标签 效率高--><div v-show="isshow">123</div><div v-show="a>5">456</div><!-- v-if="布尔值" 根据布尔值显示或隐藏当前标签 每次从网页中要 删除/创建 标签,数量多了效率低v-if和v-else标签必须挨着--><div v-if="isshow">789</div><div v-if="a>5">8910</div><div v-else>8910</div></div><script type="text/javascript">let app= new Vue({el:"#app",data:{isshow:true,a:3},});</script></body>
</html>
<!-- -->(4) v-bind
v-bind是将元素的属性绑定到vue实例的数据和表达式中,会根据元素的值动态更新
可以省略v-bind 只保留: 通过isActive控制是否为标签添加指定的类名
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><!-- 导入vue.js库 --><script src="js/vue@2.js"></script><style>/* 定义样式 */.active{color:red;}</style><body><div id="app"><!-- v-bind是将元素的属性绑定到vue实例的数据和表达式中,会根据元素的值动态更新 --><!-- <img v-bind:src="imgsrc" v-bind:title="title"/> 下面是方法的简写 省略v-bind 只保留:--><img :src="imgsrc" :title="title"/><input type="button" value="下一张" @click="next()"/><div v-bind:class="{active:isActive}">状态</div></div><script type="text/javascript">let app= new Vue({el:"#app",data:{imgsrc: "img/1.png",title:"这是第一张图片",isActive:true},methods:{next(){this.imgsrc="img/2.png";this.title="这是第二张图片";}}});</script></body>
</html>(5) v-for
v-for常用于遍历数组和渲染列表
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><!-- 导入vue.js库 --><script src="js/vue@2.js"></script><body><div id="app"><ul><!-- v-for常用于遍历数组和渲染列表 --><li v-for="(p,index) in provinces">{{index+1}},{{p}}</li></ul><table border="1"><tr><td>学号</td><td>姓名</td><td>性别</td></tr><tr v-for="(student,index) in students"><td>{{index+1}}</td><td>{{student.id}}</td><td>{{student.name}}</td><td>{{student.gender}}</td></tr></table></div><script type="text/javascript">let app = new Vue({el:"#app",data:{//模拟从服务器后端响应回来的数据,在前端把后端响应的数据动态显示在网页上provinces:['北京','天津','上海','重庆','陕西'],students:[{id:1,name:'jim',gender:'男'},{id:2,name:'tom',gender:'男'},{id:3,name:'lili',gender:'女'},{id:4,name:'lili',gender:'女'},{id:5,name:'lili',gender:'女'}]}});</script> </body>
</html>(6) 声明周期函数
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id ="app"></div><script type="text/javascript">let app= new Vue({el:"#app",data:{//定义数据},methods:{//自定义函数},//vue对象生命周期钩子函数,例如下面四个beforeCreate(){},created(){},beforeMount(){},mounted(){//最常用//这个是vue对象与标签 绑定成功后 执行, 这是我们后面需要的//在网页打开后, 自动执行某些操作,例如自动项后端发送请求加载数据}})</script></body>
</html>三. vue.cli
1. 概述
vue.cli 是vue脚手架
传统的项目结构.每个页面就是一个独立的html文件,如果页面中需要依赖js/css文件, 那么我们就需要在每个html文件中导入所需的依赖的,这就很麻烦.
现在前开发都采用单页结构,一个项目中只有一个html文件 其他不同的内容,都写在.vue文件中,每个vue文件就是一个组件,为每个组件配置一个访问的地址,通过地址访问组件, 这样就可以在仅有的html文件中切换不同的组件. (优点: 配置只需要配置一次,依赖也只需要导入一次)
2. 创建前端单页结构项目
(1) 安装前端环境 node.js
介绍: node.js是一个构建前端的运行环境,类似后端开发的jdk
npm node package manager 是javaScript库/包管理 , 使用npm命令将依赖下载到项目中.
在cmd中 输入node -v 检查node版本 (win+R打开cmd)
在cmd中输入 npm -v 检查npm版本
(2) 使用 HbuilderX 快速搭建一个 vue-cli 项目
需要一些前端环境, node.js(相当于后端的jdk)
步骤:文件-->新建-->项目-->vue项目（2.6.10）
（新建的项目包含如图几个文件）
(3) 基本指令
在命令行窗口输入
下载相关依赖 (一般从网上下载的文件就没有node _modules,需要执行该语句)
npm install
启动项目
npm run serve
启动成功后,会出现访问项目地址: http://127.0.0.1:8080/
停止服务
ctrl+c 出现yes/no后输入y/n
注意: 1. 一般我们删除 package-lock.json 文件 建立 router 和 views两个目录
2. 可以通过上下键 执行之前执行过的命令
3. 组件路由
vue router 是 Vue.js 官方的路由管理器
(1) 安装
vue-router 是一个插件包，需要打开命令行工具，进入你的项目目录，用 npm 来进行安装, 输入
npm i vue-router@3.5.3
(2) 在index.js配置路由
创建router包,并在该包下创建index.js文件,在其中配置路由
import Vue from 'vue';/* 导入vue */
import router from 'vue-router'; /* 导入路由 *//* 导入我们自己创建的组件 */
import Login from "../views/Login.vue"; //可以不需要文件后缀名
import Main from "../views/Main";Vue.use(router);let rout = new router({routes: [{//默认什么地址都不给的时候,自动访问指定组件path: '/',//什么都不写component:Login},{path: '/login',//地址名小写component:Login // },{path:'/main',component:Main}]
});//导出路由对象
export default rout;(3)在main.js中配置路由
import Vue from 'vue'//导入vue.js
import App from './App.vue'//导入默认组件//导入路由组件
import router from './router/index.js'/* 当前文件夹下的router下的index.js文件 */
Vue.use(router);Vue.config.productionTip = false/* 创建一个唯一的vue对象 */
new Vue({render: h => h(App),//项目启动时,默认访问APP.vue组件router,
}).$mount('#app');//el:#app"
(4)在App.vue中配置
<template><div id="app"><!-- 显示组件内容 , 相当于画布--><router-view></router-view></div>
</template><script>export default {name: 'app',
}
</script><style></style>
(5)更换npm 镜像地址
原因: 不同的镜像源地址下载速度不一样, 改变镜像源地址可以加快下载速度
win+R 输入cmd
查看当前的镜像源：
npm config get registry
相关镜像源地址: 国内npm源镜像（npm加速下载） 指定npm镜像_npm国内镜像源-CSDN博客
推荐华为云 npm config set registry https://mirrors.huaweicloud.com/repository/npm/
4. 新建项目步骤
删除component
删除package-lock.json
也可以直接禁止生成package-lock.json
npm config set package-lock false --global
新建 views 包
<template><div></div>
</template><script>export default{data(){return{}},methods:{},mounted(){}}
</script><!--组件相关的样式 -->
<style>
</style>新建 router 包
import Vue from 'vue';/* 导入vue */
import router from 'vue-router'; /* 导入路由 *//* 导入我们自己创建的组件 */
import Login from "../views/Login"//可以不需要文件后缀名
import Main from "../views/Main"
import StudentList from "../views/student/StudentList"
import BookList from "../views/book/BookList"
import RecordList from "../views/record/RecordList"
import Return from "../views/record/Return"Vue.use(router);let rout = new router({routes: [{//默认什么地址都不给的时候,自动访问指定组件path: '/',//什么都不写component:Login},{path: '/login',component:Login},{path:'/main',component:Main,children:[ {path:'/studentList',component:StudentList},{path:'/bookList',component:BookList},{path:'/recordList',component:RecordList},{path:'/return',component:Return} ]},]
});
//导出路由对象
export default rout;
// 每次进行组件路由是, 都会触发下面代码的执行
rout.beforeEach((to,from,next)=>{//to.path获取的是我们本次要跳转的路由地址if(to.path=='/login'){//如果用户访问的是登录页，直接放行 地址与上面定义的要一致return next();}else{let account = sessionStorage.getItem("account");if(account==null){ //判断是否存储了账号信息return next("/login");//用户还没有登录, 就调转到登录页面}else{return next();//用户语句登录,放行}}
})配置main.js路由
import Vue from 'vue'//导入vue.js
import App from './App.vue'//导入默认组件//导入路由组件
import router from './router/index.js'/* 当前文件夹下的router下的index.js文件 */
Vue.use(router);Vue.config.productionTip = false/* 创建一个唯一的vue对象 */
new Vue({render: h => h(App),//项目启动时,默认访问APP.vue组件router,
}).$mount('#app');//el:#app"
四. ElementUI
Element是基于Vue2.0的桌面端组件库 Element - 网站快速成型工具
(1)安装ElementUI
npm i element-ui -S
(2)在main.js中导入elementui组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
(3)views
views中添加我们的组件(如下图 主页面组件)
1.精简版
2.丰富版
可以使用element中的组件,可以访问以下地址查找所需要的组件
