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接口自动化（十三）--cookie绕过验证码登录（详解）
简介 有些登录的接口会有验证码:短信验证码,图形验证码等,这种登录的话验证码参数可以从后台获取的(或者查数据库最直接).获取不到也没关系,可以通过添加cookie的方式绕过验证码.(注意:并不是所有的 ...
- HttpClient Received an unexpected EOF or 0 bytes from the transport stream
请求https链接时报错,奇怪的是pc1正常,pc2异常 Unhandled Exception: System.AggregateException: One or more errors occu ...
- python——矩阵的奇异值分解，对图像进行SVD
矩阵SVD 奇异值分解(Singular Value Decomposition)是一种重要的矩阵分解方法,可以看做是对方阵在任意矩阵上的推广.Singular的意思是突出的,奇特的,非凡的,按照这样 ...
- Java_基础篇（数组的反转）
数组反转也是Java的基础. 数组反转要求掌握的是: 1).创建一个数组,在内存中申请一块空间. 2).实例化数组. 3).对数组的了解.如:数组的长度,数组的下标,数组的表示方法. 4).数组的交换 ...
- PXE安装windows系统，pxe-e55：ProxyDhcp service did not reply to request on port 4011
这个pxe-e55" 错误表示 pxe 客户端已向端口4011上的代理 dhcp 服务器发送请求, 但未收到答复.似乎只有在dhcp 服务器上设置了 dhcp 类标识符选项 #60, 但同一 ...
- PHP错误：SQLSTATE[HY000] [2054] The server requested authentication method unknown to the client
使用PHP连接MySQL 8的时候,可能会发生如标题所示的错误: SQLSTATE[HY000] [2054] The server requested authentication method u ...
- Android 音视频开发学习思路
Android 音视频开发这块目前的确没有比较系统的教程或者书籍,网上的博客文章也都是比较零散的.只能通过一点点的学习和积累把这块的知识串联积累起来. 初级入门篇: Android 音视频开发(一) ...
- Ubuntu 18.04.1 LTS + kolla-ansible 部署 openstack Rocky all-in-one 环境
1. kolla 项目介绍 简介 kolla 的使命是为 openstack 云平台提供生产级别的.开箱即用的自动化部署能力. kolla 要实现 openetack 部署分为两步,第一步是制作 do ...
- Vue(day5)
一.监听数据变化的三种形式 假设我们需要提供两个输入框,分别输入姓和名,然后自动拼接为姓名.这样,我们就需要监听输入框的数据变化,让完整的姓名跟随输入的变动而变化.我们可以使用以下三种方式: 1.结合 ...
- vue学习笔记2
Vue.js - Day2 品牌管理案例 添加新品牌 删除品牌 根据条件筛选品牌 1.x 版本中的filterBy指令,在2.x中已经被废除: filterBy - 指令 <tr v-for=& ...