实习第一天

想…

已于 2022-07-31 00:07:31 修改

阅读量61

点赞数

分类专栏：实习日记文章标签：前端 vue

于 2022-07-13 09:18:53 首次发布

本文链接：https://blog.csdn.net/weixin_53491844/article/details/125756606

版权

实习日记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue基础

1.软件安装和环境搭建

1.1 安装nodeJS

1.1.1 打开nodeJS官网下载nodeJS

http://nodejs.cn/

在这里插入图片描述

JAVAEE 基于JavaWeb 游戏服务器引擎 大数据分析 智能化 python

1.1.2 安装nodeJs

傻瓜式安装，一直下一步，即可。

go语言

1.1.3 测试nodeJS是否安装成功

dos命令输入：node -v 能查看到版本即可。

1.2 安装vue

通过npm安装。

1.2.1 查看vue官网

安装命令

npm install vue@版本号2.6.14

在这里插入图片描述

在这个文件夹：D:\重庆交通大学\day01\reouse\node_modules\vue\dist 去找 vue.js或者vue.min.js

1.3 HubilderX软件的安装

解压即用

2.vue

2.1 概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

html+CSS+JavaScript

主要作用：

绘制页面效果。

mvvm

模型视图：vue是基于数据进行页面驱动。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>数据驱动</title>
		<!-- 引包-->
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			
		</div>
			
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			template:`
				<h1>重庆交通大学的同学{{message}}</h1>
			`,
			data(){
				return{
					message:'欢迎来到千锋重庆'
				}
			},
			
		});
	</script>
</html>

nodejs 服务器 nginx 前后端分离项目跨域 session跨域

2.2 vue的快速入门

2.2.1 步骤

1.引包-----如果使用脚手架就不要了，但是如果不使用脚手架就必须执行这一步
2.留坑------ 最终通过数据进行渲染的视图展示的区域
3.实例化 ---- 启动vue                           --Java面向对象，JavaScript面向对象 生命周期 
4.new Vue{
	4.1 el:目的地 对应坑位，我vue产生的数据和视图最终要展示在html页面的位置区域
	4.2 template:模板，最终渲染数据的模块。 注意：在里面写的内容必须放在``,因为换行以后单引号就不会被识别。
	在模板中有且只能存在一个最大的div容器。不能并列出现，但是可以嵌套。
	4.3  data：数据，视图渲染的时候需要的动态数据。可以写表达式
	
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>数据驱动</title>
		<!-- 引包-->
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			
		</div>
			
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			template:`
				<div>
					<div>bbbb</div>
				</div>
				
			`,
			data(){
				return{
					message:'欢迎来到千锋重庆'
				}
			},
			
		});
	</script>
</html>

2.2.2 快速开发案例

插值表达式：
格式：
	{{}}
将data里的数据渲染到插值表达式所展示的内容中。
属性绑定，数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>快速入门</title>
		<!-- 1.引包 -->
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<h1>欢迎来到vue的世界</h1>
		<!-- 2.留坑-->
		<div id="app">
			<h2>我是坑位</h2> <!--图书馆的占位方式 -->
			{{msg}}
		</div>
		{{msg}}
	</body>
	<!--3.实例化-->
		<script type="text/javascript">
			new Vue({
				el:'#app' ,//#id,css,jquery
				/* template:`
					<a href='http://www.baidu.com'>{{msg}}</a>
				`, */
				data:function(){
					return{
						//存放整个vue模块需要用到的数据
						msg:'点我百度一下！',
						arr:[], //数组
						user:{},//对象
					}
				},
				
			});
		</script>
</html>

3.vue的指令

3.1 概述

在vue中提供一些对于页面+数据的更为方便的操作，这些操作我们就称为指令。

指令的主要作用：

以数据去驱动dom的行为，简化DOM操作。

BOM: 浏览器对象 window.location .href = url

DOM：文档对象

3.2 常用的指令有哪些

v-text: 展示内容，但是不能自动解析html代码

v-html:

v-if: 使用的是append和removeAppend方法进行实现是否展示

v-else-if:

v-else:

v-show:

v-for: 数组循环，对象循环，数组对象循环=> 服务器最终传递到客户端的数据基本都是数组类型的对象。

格式：

数组：

  v-for(接收元素的变量,接收下标的变量) in 需要循环的数组

3.3 代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用指令</title>
		<script type="text/javascript" src="./js/vue.js"></script>
	</head>
	<body>
		<h1>常用指令</h1>
		<div id="app">
			
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			template:`
				<div>
					<p v-text='text'></p>
					<p v-html='html'></p>
					<p v-if='2<3'>rose</p>
					<p v-else-if="2==2">jack</p>
					<p v-else="2==2">kaka</p>
					<p v-show='isshow'>你是好人吗？</p>
					<ul>
						<li v-for='(goods,index) in arrayfor'>
							{{index}}---{{goods}}
						</li>
					</ul>
					<ol>
						<li v-for='(obj,key) in person'>
							{{key}} == {{obj}}
						</li>
					</ol>
					<ul>
						<li v-for='(obj,index) in goodsList'>	
							{{obj.id}}
						</li>
					</ul>
				</div>
				
			`,
			data(){
				return{
					text:'<h1>我是v-text</h1>',
					html:'<h1>我是v-html</h1>',
					checked:false,
					isshow:true,
					arrayfor:['篮球','唱歌','跳舞','打游戏'],
					person:{id:1,name:'jack',sex:'男',age:18},
					goodsList:[{id:1,name:'小布丁',price:1.0},{id:2,name:'中切糕',price:115}]
				}
			}
		});
	</script>
</html>