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>
结言
好了，欢迎在留言区留言，与大家分享你的经验和心得。
感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。
作者简介
达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。
vue框架入门和ES6介绍的更多相关文章
- day76 vue框架入门
目录 一.vue.js快速入门使用 1 vue.js库的下载 2 vue.js库的使用 3 vue.js的M-V-VM思想 4 显示数据 二.常用指令 1 操作属性 2 事件的绑定 3 样式操作 3. ...
- Vue.js 入门指南之“前传”（含sublime text 3 配置）
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...
- 一篇文章带你了解网页框架——Vue简单入门
一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...
- SSM 框架集-01-详细介绍-入门问题篇
SSM 框架集-01-详细介绍-入门问题篇 刚开始了解 SSM,首先先解决几个基础问题 1.什么是 SSM 框架集? SSM(Spring+SpringMVC+MyBatis)框架集由 Spring. ...
- vue框架介绍
vue框架介绍 一.vue 概念 vue 是一种开发用户界面的渐进式开发框架.渐进式指的是:你可以将vue作为一部分嵌入到web应用中,带来丰富的交互体验 二.vue特点及常见开发中的高级功能 1.解 ...
- Vue框架的介绍及使用
Vue框架 定义:渐进式 JavaScript 框架 渐进式:可以控制一个页面的一个标签,可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前台项目. 通过对框架的了解与运用程度,来决定其在整个 ...
- vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- vue新手入门之使用vue框架搭建用户登录注册案例，手动搭建webpack+Vue项目（附源码，图文详解，亲测有效）
前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...
随机推荐
- SpringBoot框架与MyBatis集成，连接Mysql数据库
SpringBoot是一种用来简化新Spring应用初始搭建及开发过程的框架,它使用特定方式来进行配置,使得开发人员不再需要定义样板化的配置.MyBatis是一个支持普通SQL查询.存储和高级映射的持 ...
- SpringBoot集成Lombok，应用＋源码解析，让代码优雅起来
一.Lombok简介 (1)Lombok官网(https://projectlombok.org/)对lombok的介绍 (2)GitHub项目地址:https://github.com/rzwits ...
- Python猫荐书系列之五：Python高性能编程
稍微关心编程语言的使用趋势的人都知道,最近几年,国内最火的两种语言非 Python 与 Go 莫属,于是,隔三差五就会有人问:这两种语言谁更厉害/好找工作/高工资…… 对于编程语言的争论,就是猿界的生 ...
- SpringBoot自动配置原理
前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 回顾前面Spring的文章(以学习的顺序排好): S ...
- Android 里的adb命令
ADB的全称为Android Debug Bridge,就是起到调试桥的作用. adb调试手机需要把usb调试打开 Android studio模拟器有的也要把模拟器usb调试打开,工具要灵活运用, ...
- 常见dos命令行
查找本地端口占用情况 是否8080端口被占用netstat -aon|findstr "8080" 在1.txt文档当中查找java字符串type 1.txt|findstr 'j ...
- python 简史
---恢复内容开始--- Python的作者,Guido von Rossum,确实是荷兰人.1982年,Guido从阿姆斯特丹大学(University of Amsterdam)获得了数学和计算机 ...
- July 06th. 2018, Week 27th. Friday
Life has no limitations, except the ones you make. 生命无限,除非你自我设限. From Les Brown. There would be no l ...
- CSS Sprites(基本写法，怎样使用)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/XTQueen_up/article/details/37601361 说白就是用样式表切一个大图片 ...
- 开发vue但不使用vue-cli和webpack相关注意事项
1.绑定vue组件使用new Vue() 2.new Vue()需要在dom结构生成之后才有效(毕竟有需要el) 3.Vue.component注册全局组件在vue容器组件挂载之前才有效 4.当然,可 ...