[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建

目录

[一. vue概述(vue.js)](#一. vue概述(vue.js))

[1. 定义:](#1. 定义:)

[2. 特点:](#2. 特点:)

[二. vue指令](#二. vue指令)

[(1) v-text 和 v-html](#(1) v-text 和 v-html)

[(2) v-on 和 v-model](#(2) v-on 和 v-model)

[(3) v-show 和 v-if](#(3) v-show 和 v-if)

[(4) v-bind](#(4) v-bind)

[(5) v-for](#(5) v-for)

[(6) 声明周期函数](#(6) 声明周期函数)

[三. vue.cli](#三. vue.cli)

[1. 概述](#1. 概述)

[2. 创建前端单页结构项目](#2. 创建前端单页结构项目)

[(1) 安装前端环境 node.js](#(1) 安装前端环境 node.js)

[(2) 使用 HbuilderX 快速搭建一个 vue-cli 项目](#(2) 使用 HbuilderX 快速搭建一个 vue-cli 项目)

[(3) 基本指令](#(3) 基本指令)

[3. 组件路由](#3. 组件路由)

[(1) 安装](#(1) 安装)

[(2) 在index.js配置路由](#(2) 在index.js配置路由)

(3)在main.js中配置路由

(4)在App.vue中配置

[(5)更换npm 镜像地址](#(5)更换npm 镜像地址)

[4. 新建项目步骤](#4. 新建项目步骤)

[四. ElementUI](#四. 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 不能解析字符串中的标签

javascript 复制代码
<!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用于监听各种事件

javascript 复制代码
<!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标签必须挨着

javascript 复制代码
<!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控制是否为标签添加指定的类名

javascript 复制代码
<!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常用于遍历数组和渲染列表

javascript 复制代码
<!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) 声明周期函数

javascript 复制代码
<!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 文件 建立 routerviews 两个目录

  1. 可以通过上下键 执行之前执行过的命令

3. 组件路由

vue router 是 Vue.js 官方的路由管理器

(1) 安装

vue-router 是一个插件包,需要打开命令行工具,进入你的项目目录,用 npm 来进行安装, 输入

npm i vue-router@3.5.3

(2) 在index.js配置路由

创建router包,并在该包下创建index.js文件,在其中配置路由

javascript 复制代码
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中配置路由
javascript 复制代码
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中配置
javascript 复制代码
 <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 包

javascript 复制代码
<template>
	<div>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			
		},
	    mounted(){
			
		}
	}
</script>

<!--组件相关的样式  -->
<style>
</style>

新建 router 包

javascript 复制代码
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路由

javascript 复制代码
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中的组件,可以访问以下地址查找所需要的组件


相关推荐
brzhang2 小时前
高通把Arduino买了,你的“小破板”要变“AI核弹”了?
前端·后端·架构
她说..2 小时前
通过git拉取前端项目
java·前端·git·vscode·拉取代码
智能化咨询2 小时前
玩转ClaudeCode:通过Chrome DevTools MCP实现高级调试与反反爬策略
前端·chrome·chrome devtools
xjf77113 小时前
Nx项目中使用Vitest对原生JS组件进行单元测试
javascript·单元测试·前端框架·nx·vitest·前端测试
Roadinforest3 小时前
水墨风鼠标效果实现
前端·javascript·vue.js
银嘟嘟左卫门3 小时前
上手 Rokid JSAR:新手也能快速入门的 AR 开发之旅
前端
右子3 小时前
HTML Canvas API 技术简述与关系性指南
前端·javascript·canvas
Lotzinfly3 小时前
10个JavaScript浏览器API奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
合肥烂南瓜3 小时前
浏览器的事件循环EventLoop
前端·面试