vue框架入门和ES6介绍
2019-03-06 本文已影响20人
魔王哪吒
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
