[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
目录
(2) 使用 HbuilderX 快速搭建一个 vue-cli 项目
一. 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中的组件,可以访问以下地址查找所需要的组件
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
11
0- 0
已为社区贡献2条内容
所有评论(0)