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 ...
随机推荐
- 操作系统底层原理与Python中socket解读
目录 操作系统底层原理 网络通信原理 网络基础架构 局域网与交换机/网络常见术语 OSI七层协议 TCP/IP五层模型讲解 Python中Socket模块解读 TCP协议和UDP协议 操作系统底层原理 ...
- mysql报错mmap(137428992 bytes) failed; errno 12,Cannot allocate memory for the buffer pool
mysql以`systemctl start mysqld.service`的方式启动一段时间后发现突然无法启动,尝试重新启动也不能解决问题,排查问题时,先后通过`systemctl status m ...
- 程序猿必知必会Linux命令之awk
前言 对于一名专业的程序员来说,Linux相关知识是必须要掌握的,其中对于文本的处理更是我们常见的操作,比如格式化输出我们需要的数据,这些数据可能会来源于文本文件或管道符,或者统计文本里面我们需要的数 ...
- C#设计模式整理
我居然连一月一随笔都没有,啊啊啊,忙死个人 这个随笔主要是记录基于自己学习[美]James W.Cooper著的<C# Design Patterns : A Tutorial>一书中常用 ...
- 联发科AIoT平台i500处理器简介
i500是一款强大而高效的AIoT平台,专为便携式.家用或商用物联网应用而设计,这些应用需要大量的边缘处理.先进的多媒体功能.多台高分辨率相机.相连的触屏显示器和多任务操作系统. 该平台集成了Arm ...
- Android之RxJava详解
文章大纲 一.什么是RxJava二.为什么要用RxJava三.RxJava使用详解四.项目源码下载五.参考文章 一.什么是RxJava Rx(Reactive Extensions)是一个库,用来 ...
- REST API disable / enable service auto start by API
how to disable service auto start by API as the following how to enable service auto start by API as ...
- 你所不知道的 CSS 阴影技巧与细节
关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow 的用法. 最近一个新的项目,CSS-Ins ...
- Dubbo 支持哪些序列化协议？
面试题 dubbo 支持哪些通信协议?支持哪些序列化协议?说一下 Hessian 的数据结构?PB 知道吗?为什么 PB 的效率是最高的? 面试官心理分析 上一个问题,说说 dubbo 的基本工作原理 ...
- C#常见金额优选类型及其三种常用的取整方式
这两天一直在做一个商城后台的对账方面的工作,忽然发现C#真的有很多值的学习的东西: 一.C#常用的三种取整方式(主要适用于double.decimal.float这一类型的数据): Math.Roun ...