二阶段笔记总结_二阶笔记-CSDN博客

本文链接：https://blog.csdn.net/a18671169665/article/details/121825205

第二阶段目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

第二阶段目录
一、pandas是什么？
二、使用步骤
- 1.引入库
- 2.读入数据
总结

Vue

它是一个轻量级、双向绑定、渐进式的框架.

轻量级:gzip后大小只有20k+

双向绑定:数据动态更新

渐进式:必须按照核心vue.js -- components组件 -- router路由 -- vuex状态管理 -- 构建大型vue项目,后面的功能建立在前面的功能之上

一、传统使用步骤

1.导入vue.js文件

<script src="vue.js"></script>

2.准备数据渲染区

<!-- 2. 准备一个div，数据渲染区 ,{{ 插值表达式 }}-->
	<div id="app">{{msg}}</div>

3.创建Vue对象

<!-- 3. 创建Vue对象 -->
	<script>
			var a = {
				msg:"hello vue~"
			}
			var com = {
				el:"#app" , /* 通过css选择器定位元素，挂载点*/
				data:a  /* 数据驱动，把数据加载到指定位置*/
			}
			var v = new Vue(com);
	</script>

二、改造入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue</title>
		<!-- 1. 引入vue.js -->
		<script src="vue.js"></script>	
	</head>
	<body>
		<!-- 2. 准备数据渲染区 ,{{ 插值表达式 }}-->
		<div id="app">{{msg}}</div>
		<script>
			<!-- 3. 创建Vue对象 -->
				new Vue({
					el : "#app" ,
					data : {
						msg : "hello vueeee~~~"
					}
				});
		</script>
	</body>
</html>

三、MVVM

Vue采用了最新的MVVM框架,它引入分层思想,是后端MVC框架的延申,实现吧数据和页面分离.我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变

运算符和字符串操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的运算符</title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p> 加法:{{2+3}} </p>
			<p> 减法:{{2-3}} </p>
			<p> 乘法:{{2*3}} </p>
			<p> 除法:{{3/2}} </p>
			<p> 取余:{{10%2}} </p>
		 
			<p> 三元表达式: {{age>10?'yes':'no'}}</p>
			<p> 字符串操作: </p>
<p> {{str}} {{str.length}} {{str.concat(1000)}} {{str.substr(3)}}  </p>
		
		</div>

		<script>
				new Vue({
					el:"#app",
					data:{
						str:"hellovue~",
						age:12
					}
				});
		</script>
	</body>
</html>