Vue尚硅谷张天禹学习笔记

001_课程简介

1.课程内容

Vue尚硅谷张天禹学习笔记_第1张图片

002_Vue简介

1.vue是什么

Vue尚硅谷张天禹学习笔记_第2张图片

2.vue是谁开发的

Vue尚硅谷张天禹学习笔记_第3张图片

3.vue的特点

Vue尚硅谷张天禹学习笔记_第4张图片

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

Vue尚硅谷张天禹学习笔记_第5张图片
js中的页面渲染是以如下这种方式实现的
Vue尚硅谷张天禹学习笔记_第6张图片
每次都会把最新的数据渲染到Dom里面,如果有新的数据,老的数据就会被覆盖了
Vue尚硅谷张天禹学习笔记_第7张图片

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

底层通过Diff算法计算哪个元素有变化,仅将有变化的Dom元素重新加载到页面上
原理:js运算速度远大于Dom操作速度
Vue尚硅谷张天禹学习笔记_第8张图片

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

Vue尚硅谷张天禹学习笔记_第9张图片

004_搭建vue环境

注意选择vue2版本的官网
Vue尚硅谷张天禹学习笔记_第10张图片
点击安装

下载对应版本的js文件

引入js文件

Vue尚硅谷张天禹学习笔记_第11张图片

验证是否引入成功

Vue尚硅谷张天禹学习笔记_第12张图片
点开该页面,当控制台中能够显示vue函数的时候就证明成功了

添加vue开发者工具

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

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

Vue尚硅谷张天禹学习笔记_第13张图片
将vue插件拖拽进入浏览器的扩展程序页面,并点击添加该插件
如果失败的话,试着关闭保护再次尝试
Vue尚硅谷张天禹学习笔记_第14张图片
有了这个标志就算安装成功了
Vue尚硅谷张天禹学习笔记_第15张图片
去掉烦人的提示标志

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>Documenttitle>
    <script type="text/javascript" src="../vue.js">script>
head>
<body>
    <script>
        Vue.config.pronductionTip = false;
    script>
    
body>
html>

把这个属性改成false之后,就可以去掉下面这个提示符号了
Vue尚硅谷张天禹学习笔记_第16张图片

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>Documenttitle>
    <script type="text/javascript" src="../vue.js">script>
head>
<body>
    <div id="root">
        <h1>hello,lijiankunh1>
    div>
    <script>
        Vue.config.pronductionTip = false;
    script>
    
body>
html>

Vue尚硅谷张天禹学习笔记_第17张图片

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

Vue尚硅谷张天禹学习笔记_第18张图片
通过如上这种方式打开的网页会有网站页签图标报错,如下所示
Vue尚硅谷张天禹学习笔记_第19张图片
如果没有open with live server ,需要下载一个live server插件
live server 实际上是在本地开启了一个5500端口的服务器
Vue尚硅谷张天禹学习笔记_第20张图片
该服务器用来运行根目录下的资源
Vue尚硅谷张天禹学习笔记_第21张图片
所以随便找一个favicon.ico放在根目录,他就不会报错了
Vue尚硅谷张天禹学习笔记_第22张图片

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

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>初识Vuetitle>
		
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		

		
		<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>

你可能感兴趣的:(vue.js,学习,前端)