Vue尚硅谷张天禹学习笔记

李建坤坤

已于 2023-02-16 11:28:26 修改

阅读量987

点赞数 2

文章标签： vue.js 学习前端

于 2023-01-15 11:40:35 首次发布

本文链接：https://blog.csdn.net/m0_48038376/article/details/128692870

版权

001_课程简介

1.课程内容

在这里插入图片描述

002_Vue简介

1.vue是什么

在这里插入图片描述

2.vue是谁开发的

在这里插入图片描述

3.vue的特点

在这里插入图片描述

3.1可以通过声明式编码提高开发效率

在这里插入图片描述
js中的页面渲染是以如下这种方式实现的

每次都会把最新的数据渲染到Dom里面，如果有新的数据，老的数据就会被覆盖了

3.2通过虚拟Dom进行最小程度的Dom操作

底层通过Diff算法计算哪个元素有变化，仅将有变化的Dom元素重新加载到页面上
原理：js运算速度远大于Dom操作速度
在这里插入图片描述

4.学习Vue之前要掌握的基础知识

在这里插入图片描述

004_搭建vue环境

注意选择vue2版本的官网
在这里插入图片描述
点击安装

下载对应版本的js文件

引入js文件

在这里插入图片描述

验证是否引入成功

在这里插入图片描述
点开该页面，当控制台中能够显示vue函数的时候就证明成功了

添加vue开发者工具

vue插件的下载地址可以去网盘中获取

链接：https://pan.baidu.com/s/1i07a72cxcrZDRNTZheJ-Tg?pwd=0000
提取码：0000
–来自百度网盘超级会员V3的分享

在这里插入图片描述
将vue插件拖拽进入浏览器的扩展程序页面，并点击添加该插件
如果失败的话，试着关闭保护再次尝试

有了这个标志就算安装成功了

去掉烦人的提示标志

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <script>
        Vue.config.pronductionTip = false;
    </script>
    
</body>
</html>

把这个属性改成false之后，就可以去掉下面这个提示符号了
在这里插入图片描述

005_hello小案例

先写个静态标签，不涉及vue，一会儿再说为啥

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>hello,lijiankun</h1>
    </div>
    <script>
        Vue.config.pronductionTip = false;
    </script>
    
</body>
</html>

在这里插入图片描述

题外话：先把网站页签图标去掉

在这里插入图片描述
通过如上这种方式打开的网页会有网站页签图标报错，如下所示

如果没有open with live server ，需要下载一个live server插件
live server 实际上是在本地开启了一个5500端口的服务器

该服务器用来运行根目录下的资源
在这里插入图片描述
所以随便找一个favicon.ico放在根目录，他就不会报错了

创建vue对象，以及其中的配置参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vue</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			初识Vue：
				1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
				2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
				3.root容器里的代码被称为【Vue模板】；
				4.Vue实例和容器是一一对应的；
				5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
				6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
				7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

				注意区分：js表达式 和 js代码(语句)
						1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
									(1). a
									(2). a+b
									(3). demo(1)
									(4). x === y ? 'a' : 'b'

						2.js代码(语句)
									(1). if(){}
									(2). for(){}
		-->

		<!-- 准备好一个容器 -->
		<div id="demo">
			<h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
		</div>

		<script type="text/javascript" >
			Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

			//创建Vue实例
			new Vue({
				el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
				data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
					name:'atguigu',
					address:'北京'
				}
			})

		</script>
	</body>
</html>