vue第一堂课

2024-01-27 15:34:34

ESMAScript6语法

主要目的是能看懂别人写的es6的语法，主流浏览器中部分es6语法不识别，可以通过babel来转换。
es6学习地址：http://es6.ruanyifeng.com/

let和const声明变量

es5中的var

1.es5中使用var来声明变量，会有变量提升，即在任意地方定义的变量，都会提升到文件的开头进行声明。
下面两份代码是等价的，在解析时，代码1就会解析成代码2的样子。
代码1

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	console.log(a)
	var a = 10;
	console.log(a)
</script>
</body>
</html>

代码2

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	var a;
	console.log(a)
	a = 10;
	console.log(a)
</script>
</body>
</html>

结果都一样：

变量提升，导致var声明的变量属于全局作用域。
2.一个变量的多次声明，后面变量会替换前面声明的变量，var声明的变量存在覆盖现象。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	console.log(a)
	{
		a = 10;
	}
	console.log(a)
</script>
</body>
</html>

es6的let和const

let声明的变量是属于局部作用域，只在当前作用域有效。重复声明定义会报错。
const声明的是常量，一旦声明定义不可修改。也是局部作用域的。

es6中的模板字符串

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	name = "张三"
	age = 28
	desc = `${name} 是个学生，今年${age}岁。`
	console.log(desc)
</script>
</body>
</html>

输出：

es6 箭头函数

var add = (a,b)=>{
	函数体
}

箭头函数的问题：

this指向发生改变
arguments不能使用

es6 对象的单体模式

fav就是一个函数
var person = {
	name = "xxx";
	fav(){
		console.log(this)  //this指针正常，指向的是当前对象
		console.log(arguments)  // arguments正常，可以使用
	}
}

es6 class使用

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	class Person{
		constructor(name, age){
			this.name = name
			this.age = age
		}

		show(){
			alert(this.name)
		}
	};
	var p = new Person("zhans", 20);
	p.show();
</script>
</body>
</html>

vue起步

vue 是渐进式的javascript框架，官方文档：https://cn.vuejs.org
使用vue的三中方式：

直接下载并用<script>标签导入
CDN方式引入：<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
npm install vue

下载安装nodejs

1.要使用vue需要先下载安装nodejs，下载地址：https://nodejs.org/en/，其自带包管理器：npm。

2.在win10中傻瓜式安装
3.测试是否安装成功

4.创建项目目录并使用npm初始化vue环境

5.下载保存vue到当前项目npm install vue --save

使用vue

在项目根目录新建index.html文件

简单使用

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="app">
	<!-- 模板语法主要作用是插入值， {{ data中的数据属性 }}， 将数据属性渲染到页面 -->
	<h3>{{ msg }}</h3>
	<h3>{{ name }}</h3>
	<h3>{{ 1+1 }}</h3>
	<h3>{{ 1==1 ? "真的" : "假的" }}</h3>
</div>


<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',  // 目的地，要到哪个标签。
		data: {   // 可以是函数，也可以是对象
			// 数据属性
			// 数据驱动视图，数据更改，视图进行更改
			msg:"hello vue",
			name:"lxt"
		}
	});

	app.name = "xx";
	console.log(app)
</script>
</body>
</html>

运行：

两者是等价的

指令系统

在vue中提供了一套为(数据驱动视图)更方便的操作，这些操作称为指令系统，以v-xxx表示。
指令中封装了一些DOM行为，结合属性作为一个暗号，暗号有对应的值，根据不同值，框架会进行相应的DOM操作绑定。

v-text和v-html

v-text等价于{{}}插值，内部实现原理 innerText
v-html内部实现原理 innerHTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="app">
	<h3>{{ msg }}</h3>
	ss
</div>


<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',  // 目的地，要到哪个标签。
		data: {
			msg:"hello vue",
			msg2:"<a href='#'>跳转</a>",
		},

		template: ` 
			<div>
				<h3>{{msg}}</h3>
				<h2 v-text='msg2'></h2>
				<p v-html='msg2'></p>
			</div>
		`
		// template的优先级高于el,即出现了template就不会渲染el指定目的地的内容。会渲染到body下
	});
</script>
</body>
</html>

v-if和v-show

两者都可以用来对当前DOM显示或者隐藏，当isShow是true时显示，是false时隐藏。
不过两者隐藏的方式不一致。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.box{
            width:300px;
            height:300px;
            background-color:red;
        }
	</style>
</head>
<body>
<div id="app">
	<h3>{{ msg }}</h3>
	ss
</div>


<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',  // 目的地，要到哪个标签。
		data: {
			msg:"hello vue",
			msg2:"<a href='#'>跳转</a>",
			isShow:false
		},

		template: ` 
			<div>
				<h3>{{msg}}</h3>
				<h2 v-text='msg2'></h2>
				<p v-html='msg2'></p>
				<div class="box" v-if='isShow'></div>
				<div class="box" v-show='isShow'></div>
			</div>
		`
	});
</script>
</body>
</html>

v-if不仅可以插入数据属性，也可以做运算判断

<div id="app">
	<h3>{{ msg }}</h3>
	ss
</div>


<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',  // 目的地，要到哪个标签。
		data: {
			msg:"hello vue",
			msg2:"<a href='#'>跳转</a>",
			isShow:false
		},

		template: ` 
			<div>
				<h3>{{msg}}</h3>
				<div class="box" v-if='Math.random() > 0.5'>大于0.5</div>
				<div class="box" v-else>小于0.5</div>
			</div>
		`
	});
</script>

v-for

下面是一个生成菜单的例子

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.box{
            width:300px;
            height:300px;
            background-color:red;
        }
	</style>
</head>
<body>
<div id="app">
	<h3>{{ msg }}</h3>
	ss
</div>


<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',  // 目的地，要到哪个标签。
		data: {
			msg:"hello vue",
			msg2:"<a href='#'>跳转</a>",
			isShow:false,
			itemList:[
				{id:1,name:"面",price:15},
				{id:2,name:"炒面",price:16},
				{id:3,name:"烩面",price:17},
			],
			per:{
				name:"zhansan",
				age:18,
				hobby:"sleep"
			}
		},

		template: ` 
			<div>
				<h3>{{msg}}</h3>
				<h2 v-text='msg2'></h2>
				
				<ul>
					<li v-for = '(item,index) in itemList'>
						<h1>{{index}}--菜名：{{ item.name }}</h1>
						<h1>价格：{{ item.price }}</h1>
					</li>
				</ul>
				<p v-for = '(value, key) in per'>{{key}}:{{value}}</p>
			</div>
		`
		// item是itemList中的每个元素，index是元素的索引
		// 遍历对象(value,key), 第一个是value值，第二个是key值
	});
</script>
</body>
</html>

v-bind

对所有属性的绑定，绑定class,href,src,...，只要使用了v-bind，后面的字符串一定是数据属性中的值。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.box{
            width:300px;
            height:300px;
            background-color:red;
        }
        .active{
        	background-color:yellow;
        }
	</style>
</head>
<body>

<div id="app">
	<h3>{{ msg }}</h3>
	<div>
		<div class="box" v-bind:class="{ active: isActive }"></div>
		<!-- isActive为true时，active会加到class中 -->
		<a v-bind:href="href">百度</a>
	</div>
</div>


<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',  // 目的地，要到哪个标签。
		data: {
			msg:"hello vue",
			msg2:"<a href='#'>跳转</a>",
			isShow:false,
			isActive:true,
			href:"http://www.baidu.com",
		},
		template: ``
	});
</script>
</body>
</html>

v-if和v-on结合

事件三要素：事件源、事件、事件驱动程序
使用v-on对当前DOM绑定事件，如v-on:click绑定点击事件。所有原生的js事件使用v-on都可以绑定。

点击button对其进行隐藏显示

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.box{
            width:300px;
            height:300px;
            background-color:red;
        }
        .active{
        	background-color:yellow;
        }
	</style>
</head>
<body>

<div id="app">
	<h3>{{ msg }}</h3>
	<div>
		<!-- <div class="box" v-on:click="isShow=false" v-if="isShow"></div> -->   <!-- 直接写处理逻辑-->
		<!-- <div class="box" v-on:click="showHandler()" v-if="isShow"></div> -->  <!-- 通过函数调用 -->
		<button v-on:click="showHandler">显示/隐藏</button>
		<div class="box" v-if="isShow"></div>
	</div>
</div>


<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el: '#app',  // 目的地，要到哪个标签。
		data: {
			msg:"hello vue",
			msg2:"<a href='#'>跳转</a>",
			isShow:true,
		},
		template: ``,
		// 在vue中所有的事件都声明在methods中
		methods:{
			showHandler(){
				this.isShow = !this.isShow;
			}
		}
	});
</script>
</body>
</html>

实现轮播图

很重要的几个字：数据驱动视图
实现点击图片下面的数字来切换图片。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.box{
            width:300px;
            height:300px;
            background-color:red;
        }
        .active{
        	background-color:red;
        }
        ul{
        	list-style: none;
        	overflow: hidden;
        	width: 400px;
        }
        ul li{
        	background-color: blue;
        	text-align: center;
        	float:left;
        	color: #fff;
        	line-height: 40px;
        	width: 100px;
        	height: 40px;
        }
	</style>
</head>
<body>

<div id="slider">
	<div>
		<img :src="currentSrc">
		<ul>
			<li v-on:click="changeIndex(index)" v-bind:class="{active: currentIndex==index}" v-for="(value, index) in imageArray">
				{{ value["id"] }}
			</li>
		</ul>
	</div>
</div>


<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
	var imgArray = [
		{id:1, src:"./image/1.png"},
		{id:2, src:"./image/2.png"},
		{id:3, src:"./image/3.png"},
		{id:4, src:"./image/4.png"}
	];

	var app = new Vue({
		el: '#slider',  // 目的地，要到哪个标签。
		data: {
			imageArray:imgArray,
			currentIndex:0,
			currentSrc:imgArray[0]["src"],
		},
		template: ``,
		// 在vue中所有的事件都声明在methods中
		methods:{
			changeIndex(index){
				this.currentIndex = index;
				this.currentSrc = this.imageArray[index]["src"];
			}
		}
	});
</script>
</body>
</html>

v-model的数据双向绑定

数据驱动视图：数据就是data,视图就是整个页面的标签。

单向数据绑定，一个数据可以绑定到多个view上。

双向数据绑定，view1发生改变，导致data发生改变，再导致view2相应的改变

v-model来实现vue的双向数据绑定，只允许在表单控件中使用，input,textarea,selected,...

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	</style>
</head>
<body>

<div id="app">
	<input type="" name="name" v-model="msg">
	<p>{{msg}}</p>
</div>


<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">

	var app = new Vue({
		el: '#app',  // 目的地，要到哪个标签。
		data: {
			msg:"heh",
		},
		template: ``,
		// 在vue中所有的事件都声明在methods中
		methods:{
		}
	});
</script>
</body>
</html>

文本框为view1,下面的p标签为view2，在文本框中输入值，下面的内容随着改变。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

双向数据绑定的实现

监听input的输入，动态修改数据。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	</style>
</head>
<body>

<div id="app">
	<!-- :value 等价于 v-bind:value , @input 等价于 v-on:input-->
	<input type="" name="name" :value="msg" @input="changeHandler">
	<p>{{msg}}</p>
</div>


<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">

	var app = new Vue({
		el: '#app',  // 目的地，要到哪个标签。
		data: {
			msg:"heh",
		},
		template: ``,
		// 在vue中所有的事件都声明在methods中
		methods:{
			changeHandler(evnet){
				this.msg = evnet.target.value;
			}
		}
	});
</script>
</body>
</html>

总结

v-bind可以缩写为 :
v-on 可以缩写为 @

v-text v-html {{}} : 对页面的dom进行赋值运算，相当于js中的innerText  innerHTML
v-if = 'true'
	// 创建
	var oP = document.createElement('p')
	oDiv.appendChild(op)
v-if = "false"
	// 销毁
	oDiv.removeChild(op)

v-show = "true"
	oDiv.style.display = 'block'
v-show = "false"
	oDiv.style.display = 'none'

码农公寓