vue框架入门和ES6介绍

vue框架入门和ES6介绍

vue-mvvm模式，vue是一种轻量级的前端框架，主要为模板渲染，数据同步，组件化，模块化，路由等。

https://cn.vuejs.org/    源码：https://github.com/vuejs/vue

mvvm: m为model数据模型，负责数据存储，v为view视图，负责页面显示，vm为view model负责业务处理。

数据双向绑定：
view <-> viewmodel <-> model

vue1下载：

http://v1-cn.vuejs.org/js/vue.js

vue2下载：

https://unpkg.com/vue@2.2.1/dist/vue.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue1.js" ></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="name"/>
			{{name}}
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			// 设置数据
			data: {
				name: '小达'
			}
		})
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue1.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--绑定元素中的属性-->
			<a v-bind:href="name">百度一下</a>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			// 设置数据
			data: {
				name: 'http://baidu.com'
			}
		})
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue1.js" ></script>
	</head>
	<body>
		<div id="app">
			<div v-html="name"></div>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				name: '<h1>小达</h1>'
			}
		})
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue1.js" ></script>
	</head>
	<body>
		<div id="app">
			<h1 v-text="name"></h1>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				name: '小达'
			}
		})
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue1.js" ></script>
	</head>
	<body>
		<div id="app">
			{{name}}
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				name: '小达'
			}
		})
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue1.js" ></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-on:click="myclick">a</li>
				<li @click="myclick"></li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				
			},
			methods:{
				myclick: function(){
					console.log("我被点击了")
				}
			}
		})
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue1.js" ></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="list in lists">{{list.id}}{{list.name}}</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				lists: [
				 {id:1,name:'a'},
				 {id:2,name:'b'},
				 {id:3,name:'c'},
				 {id:4,name:'d'}
				]
			}
		})
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue1.js" ></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if="isShow">小达</h1>
			
			<h1 v-Show="isShow">小达</h1>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				isShow: true
			}
		})
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue1.js" ></script>
	</head>
	<body>
		<template id="account">
			<div>
				<h1>内容</h1>
				<a href="">账号</a>
				<a href="">密码</a>
			</div>
		</template>
		<div id="app">
			<!--组件的使用-->
			<account1></account1>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('account1',{
			template: '#account'
		})
		new Vue({
			el: '#app',
			data: {
				
			}
		})
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue1.js" ></script>
	</head>
	<body>
		<template id="account">
			<div>
				<h1>内容{{msg}}</h1>
				<a href="#" @click="log">账号</a>
				<a href="#">密码</a>
			</div>
		</template>
		<div id="app">
			<!--组件的使用-->
			<account1></account1>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('account1',{
			template: '#account',
			data: function(){
				return{
					msg: 'dashucoding'
				}
			},
			methods: {
				log : function(){
					console.log('dashucoding')
				}
			}
		})
		new Vue({
			el: '#app',
			data: {
				
			}
		})
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue1.js" ></script>
	</head>
	<body>
		<template id="account">
			<div>
				<h1>达叔: {{name1}}</h1>
			</div>
		</template>
		<div id="app">
			<account1 :name1='name'></account1>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('account1',{
			template: '#account',
			// 接收数据
			props:{
				name1 : String
			}
		})
		new Vue({
			el: '#app',
			data: {
				name: '小达'
			}
		})
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue1.js" ></script>
	</head>
	<body>
		<template id="account">
			<div>
				<h1 @click="sendData">子组件</h1>
			</div>
		</template>
		<div id="app">
			<account1 v-on:send="getData"></account1>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('account1',{
			template: '#account',
			methods:{
				sendData(){
					this.$emit('send',123)
				}
			}
		})
		new Vue({
			el: '#app',
			data: {
				name: '小达'
			},
			methods:{
				getData(input){
					console.log(input)
				}
			}
		})
	</script>
</html>

vue-router路由:
vue2.0 下载地址：

https://unpkg.com/vue@2.2.1/dist/vue.js

https://unpkg.com/vue-router@3.0.2/dist/vue-router.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue2.js" ></script>
		<script type="text/javascript" src="js/vue-router2.js" ></script>
	</head>
	<body>
		<div id="app">
			<router-link to='/login'>登录</router-link>
			<router-link to='/register'>注册</router-link>
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript">
		//定义根组件
		var App = Vue.extend()
		//注册
		var register = Vue.extend({
			template: '<h2>注册！</h2>'
		})
		var login = Vue.extend({
			template: '<h2>登录！</h2>'
		})
		//定义路由
		var vueRputer = new VueRouter({
			routes: [
			{path:'/',redirect:'/login'},
			{path: '/login',component:login},
			{path: '/register',component:register}
			]
		})
		//使用路由
		new Vue({
			el: '#app',
			router: vueRputer
		})
	</script>
</html>

路由传值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue2.js" ></script>
		<script type="text/javascript" src="js/vue-router2.js" ></script>
	</head>
	<body>
		<div id="app">
			<router-link to='/login'>登录</router-link>
			<router-link to='/register/xiaoda'>注册</router-link>
			<router-view></router-view>
		</div>
	</body>
	<script type="text/javascript">
		//定义根组件
		var App = Vue.extend()
		//注册
		var register = Vue.extend({
			template: '<h2>注册！{{oname}}</h2>',
			data: function(){
				return{
					oname: ''
				}
			},
			created:function(){
				this.oname = this.$route.params.uname
			}
		})
		var login = Vue.extend({
			template: '<h2>登录！</h2>'
		})
		//定义路由
		var vueRputer = new VueRouter({
			routes: [
			{path:'/',redirect:'/login'},
			{path: '/login',component:login},
			{path: '/register/:uname',component:register}
			]
		})
		//使用路由
		new Vue({
			el: '#app',
			router: vueRputer
		})
	</script>
</html>

ECMAScript6简介
模块化，块级作用域，箭头函数等。

什么是JavaScript，它是一种动态类型，弱类型的脚本语言，用来给HTML网页增加的动态功能。

JavaScript由三部分组成：

ECMAScript（核心）
DOM（文档对象模型）
BOM （浏览器对象模型）

let是声明变量的关键字

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*var a=5;
			console.log(a);
			var a=6;
			console.log(a);*/
			let a=5
			console.log(a)
			// let a = 6
			// console.log(a)
			
		</script>
	</body>
</html>

let与for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li{
				background: red;
				color: white;
				fonmt-size: 20px;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>red</li>
			<li>green</li>
			<li>blue</li>
			<li>yellow</li>
		</ul>
		
		<script>
			//块级作用域
			/*function da(){
				let a=2;
				console.log(a)
			}
			da()*/ 
			// console.log(a) 作用域在括号内
			
			// var for
			/*var lis = document.querySelectorAll('li');
			for(var i=0; i<lis.length; i++){
				lis[i].onclick = function(){
					alert(i)
				}
			}*/
			
			var lis = document.querySelectorAll('li');
			for(let i=0; i<lis.length; i++){
				lis[i].onclick = function(){
					alert(i)
				}
			}
		</script>
	</body>
</html>

const:声明一个常量，一旦声明后就不能修改。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			const PI = 3.14;
			//PI = 123; Assignment to constant variable.
			const Person = {
				name : '小达',
				age: 12
			}
			console.log(Person.name,Person.age)
			Person.name = "达";
			Person.age = 123;
			console.log(Person.name,Person.age)
		</script>
	</body>
</html>

数组解构赋值：
数组的结构赋值：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			/*let [ a,b,c ] = [1,2,3]
			console.log(a,b,c);*/
			
			//let [h,,i,j] = [1,2,3]
			//console.log(h,i,j)
			// 数组的解构赋值要对应，不对应就显示undefined
			
			function da(){
				return ['red','green','blue']
			}
			let [r,g,b] = da()
			console.log(r,g,b)
		</script>
	</body>
</html>

对象赋值：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script>
			var obj = {
				id: '1',
				name: '小达',
				age: '12',
				study: function(){
					console.log('学习')
				}
			}
			let{id,name,age,study} = obj
			console.log(id,name,age,language,study)
		</script>
	</body>
</html>

字符串：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<article id="article">
			<h1></h1>
			<p></p>
		</article>
		
		<script type="text/javascript">
			// 严格模式
			'use strice'
			let obj = {
				title: '哈哈',
				content: 'dashucoding'
			}
			
			let articleElement = document.getElementById('article')
			// innerHTML
			articleElement.innerHTML = '<h1>'+obj.title+'</h1><p></p>'
			
			
		</script>
	</body>
</html>

function 用var, let, const表示

箭头函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var da = function(){
				console.log('da')
			}
			
			// 箭头函数
			var dashu = ()=>console.log('da')
			
			var da2 = a => console.log(a)
			da2('一个参数')
			
			var da3 = (a,b) => console.log(a,b)
			da3(1,2)
		</script>
	</body>
</html>

rest：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function sum(){
				var sum = 0;
				for(var i = 0;i<arguments.length;i++){
					sum+=arguments[i]
				}
				return sum
			}
			console.log(sum(1,2,3,))
			
			var str = 'abcd';
			console.log(str);
			[...str]
			console.log([...str]);
		</script>
	</body>
</html>

symbol:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var s = Symbol();
			console.log(typeof s)
			var s2 = '123'
			console.log(typeof s2)
		</script>
	</body>
</html>

set:

size 数据的长度
add() 添加数据
delete() 删除数据
has() 查找某条数据
clear() 删除所有数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/jscript">
			<!--对象 keyName:keyValue-->
			<!--重复的数据会踢掉-->
			let set = new Set([1,2,3])
			console.log(set);
			<!--set.size,set.add('a'),set.delete(1),set.has('a'),set.clear()-->
		</script>
	</body>
</html>

map数据结构:

size 数据的长度
set() 添加一条数据
delete() 删除数据
get() 获取数据
has() 查找某条数据
clear() 删除所有数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			var map = new Map(['name', 'dashu'],['age',12]);
			console.log(map)
			console.log(map.size)
			console.log(map.set(['sex','n']))
			console.log(map.delete('name'))
			console.log(map)
			console.log(map.get('age'))
			console.log(map.has('age'))
			console.log(map.clear())
			console.log(map)
		</script>
	</body>
</html>

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

作者简介

达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

努力努力再努力Jeskson

posted @ 2019-03-06 08:18 达达前端阅读(399) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

程序员哆啦A梦 🔥

我是程序员哆啦A梦，蓝胖子，简书万粉优秀创作者，掘金优秀作者、CSDN博客专家，云+社区社区活跃作者，致力于打造一系列能够帮助程序员提高的优质文章。网站@http://www.dadaqianduan.cn

vue框架入门和ES6介绍

结言

公告