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 ...
随机推荐
- ASP.NET Core实现 随处可见的基本身份认证
概览 在HTTP中,基本认证(Basic access authentication,简称BA认证)是一种用来允许网页浏览器或其他客户端程序在请求资源时提供用户名和口令形式的身份凭证的一种登录验证方式 ...
- 频率学派与贝叶斯学派(先验分布与后验分布,MLE和MAP)
频率学派(古典学派)和贝叶斯学派是数理统计领域的两大流派. 这两大流派对世界的认知有本质的不同:频率学派认为世界是确定的,有一个本体,这个本体的真值是不变的,我们的目标就是要找到这个真值或真值所在的范 ...
- Asp.Net Core中HttpClient的使用方式
在.Net Core应用开发中,调用第三方接口也是常有的事情,HttpClient使用人数.使用频率算是最高的一种了,在.Net Core中,HttpClient的使用方式随着版本的升级也发生了一些变 ...
- Java集合详解8:Java集合类细节精讲
今天我们来探索一下Java集合类中的一些技术细节.主要是对一些比较容易被遗漏和误解的知识点做一些讲解和补充.可能不全面,还请谅解. 本文参考:http://cmsblogs.com/?cat=5 具体 ...
- [翻译 EF Core in Action 1.10] 应该在项目中使用EF Core吗?
Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...
- [深度应用]·实战掌握Dlib人脸识别开发教程
[深度应用]·实战掌握Dlib人脸识别开发教程 个人网站--> http://www.yansongsong.cn/ 项目GitHub地址--> https://github.com/xi ...
- Go:学习笔记兼吐槽(1)
Go:学习笔记兼吐槽(1) Go:学习笔记兼吐槽(2) Go:学习笔记兼吐槽(3) 自动添加分号 在很多其他的编程语言中,每一行代码的结尾都必须有分号(假设一行中只有一句代码),Golang 的开 ...
- Java并发编程面试题 Top 50 整理版
本文在 Java线程面试题 Top 50的基础上,对部分答案进行进行了整理和补充,问题答案主要来自<Java编程思想(第四版)>,<Java并发编程实战>和一些优秀的博客,当然 ...
- 阿里云ECS云服务器的简单使用
随着云服务的推广与普及,越来越多的人开始接触到云服务器.然而有些人购买后却不知从何下手,今天就来看下阿里云服务器的使用吧! 一.购买完阿里云服务器后进入阿里云官网首页点击控制台 找到所购买的云产品项点 ...
- 部署远程jupyter
1.直接执行 pip3 install jupyter 2.无法执行jupyter notebook后报错 “jupyter:command not found” 3.找到安装的位置,一般都在pyth ...