10.31vue(一)
2018-10-31 19:58:45
耳机一个响一个不响,,,该换耳机了
又换个新老师预计讲五天的vue后面的路飞项目用!
这是vue参考连接: https://www.cnblogs.com/majj/category/1216624.html
这个老师小马哥是专业的前端老师!
详情可以看小马哥博客,里面很全前端资料!
贴上今天讲的东西,老师就是没有记课堂的习惯!!23333333333!
越努力,与幸运!万圣节快乐!!永远不要高估自己!
这是es6部分!
1.01-let和const
<script type="text/javascript">
// let声明变量块级作用域,不能重复声明
// let声明的变量 是块级作用域,不能重复声明
// {
// // let a = 12;
// let a = 12;
// let a = 13;
// }
// console.log(a);
// var a = [];
// for (let i = 0; i < 10; i++) {
// a[i] = function () {
// console.log(i);
// };
// }
// a[6](); // 6 10
// 不存在变量提升
console.log(foo); // 输出undefined
var foo = 2;
// const 声明常量,一旦声明,立即初始化,不能重复声明。
</script>
02-模板字符串
<script>
var a = 1;
var b = 2; // var str = "哈哈哈哈" + a + "嘿嘿嘿" + b;
var str = `哈哈哈哈${a}嘿嘿嘿${b}`;
console.log(str);
</script>
03-箭头函数
<script>
// function(){} === ()=>{} // 1.this的指向发生改变,指向了定义对象时的对象
// 2.arguments不能使用
</script>
04-对象的单体模式
<script>
var person = {
name:'张三',
age: 18, fav(){
console.log(this);
}
}
person.fav();
</script>
05-面向对象
<script>
// 构造函数的方式创建对象
// function Animal(name,age){
// this.name = name;
// this.age = age; // }
// Animal.prototype.showName = function(){
// console.log(this.name);
// }
// Animal.prototype.showName2 = function(){
// console.log(this.name);
// }
// Animal.prototype.showName3 = function(){
// console.log(this.name);
// }
// Animal.prototype.showName4 = function(){
// console.log(this.name);
// }
// var dog = new Animal('日天',18) class Animal{
constructor(name,age){
this.name = name;
this.age = age;
}
showName(){
// 一定不要加逗号
console.log(this.name)
}
}
var d = new Animal('张三',19);
d.showName();
</script>
这是用vue做的一个小小小项目!
先下载vue.js
这是index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="app">
<h3>{{title}}</h3>
</div>
<script src="vue.js"></script>
<script>
// 1.创建vue实例化对象
// 参数 var app = new Vue({
el:"#app",
// 所有的数据都放在数据属性中
data:{
title:'土豆'
}
}) </script>
</body>
</html>

10.31vue(一)的更多相关文章
- Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part3:db安装和升级
Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part3:db安装和升级 环境:OEL 5.7 + Oracle 10.2.0.5 RAC 5.安装Database软件 5. ...
- Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作
Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作 环境:OEL 5.7 + Oracle 10.2.0.5 RAC 1.实施前准备工作 1.1 服务器安装操 ...
- ArcGIS 10.0紧凑型切片读写方法
首先介绍一下ArcGIS10.0的缓存机制: 切片方案 切片方案包括缓存的比例级别.切片尺寸和切片原点.这些属性定义缓存边界的存在位置,在某些客户端中叠加缓存时匹配这些属性十分重要.图像格式和抗锯齿等 ...
- CI Weekly #10 | 2017 DevOps 趋势预测
2016 年的最后几个工作日,我们对 flow.ci Android & iOS 项目做了一些优化与修复: iOS 镜像 cocoapods 版本更新: fir iOS上传插件时间问题修复: ...
- 10个最好用的HTML/CSS 工具、插件和资料库
大家在使用HTML/CSS开发项目的过程中,有使用过哪些工具,插件和库?下面介绍的10种HTML/CSS工具,插件和资料库,是国外程序员经常用到的. Firebug Lite FirebugLite ...
- 【Win 10 应用开发】启动远程设备上的应用
这个功能必须在“红石-1”(build 14393)以上的系统版中才能使用,运行在一台设备上的应用,可以通过URI来启动另一台设备上的应用.激活远程应用需要以下前提: 系统必须是build 14393 ...
- 在Ubuntu 16.10安装mysql workbench报未安装软件包 libpng12-0错误
1.安装mysql workbench,提示未安装软件包 libpng12-0 下载了MySQL Workbench 6.3.8 在安装的时候报错: -1ubu1604-amd64.deb 提示: ...
- Ubuntu 16.10 安装byzanz截取动态效果图工具
1.了解byzanz截取动态效果图工具 byzanz能制作文件小,清晰的GIF动态效果图,不足就是,目前只能通过输入命令方式来录制. byzanz主要的参数选项有: -d, --duration=SE ...
- Ubuntu 16.10 安装KolourPaint 4画图工具
KolourPaint 4画图工具简单实用,可以绘画.视频处理和图标编辑: • 绘画:绘制图表和“手绘” • 视频处理:编辑截图和照片;应用特效 • 图标编辑:绘画剪贴和标识透明化 1.在Ubuntu ...
随机推荐
- C#设置WebBrowser IE浏览器版本
通过修改注册表的值,来指定winform程序打开的webBrowser的IE版本 1>方法一,通过程序修改注册表的值 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...
- 821. 字符的最短距离 c++实现方法
1.题目描述 给定一个字符串 S 和一个字符 C.返回一个代表字符串 S 中每个字符到字符串 S 中的字符 C 的最短距离的数组. 示例 1: 输入: S = "loveleetcode&q ...
- jquery自带的进度条功能如何使用?
弹出进度条:先做弹出的功能modal,再做进度条显示.在弹出的界面上增加进度条功能 $.ajax({ xhr: function() { var xhr = new window.XMLHttpReq ...
- java调用第三方的webservice应用实例
互联网上面有很多的免费webService服务,我们可以调用这些免费的WebService服务,将一些其他网站的内容信息集成到我们的Web应用中显示. 一些常用的webservice网站的链接地址: ...
- IntelliJ IDEA 下载安装(含注册码)
https://blog.csdn.net/mashuai720/article/details/79389314
- centos7下使用mysql离线安装包安装mysql5.7
服务器环境: centos7 x64 需要安装mysql5.7+ 一.卸载CentOS7系统自带mariadb # 查看系统自带的Mariadb [root@CDH-141 ~]# rpm -qa|g ...
- Spring HttpInvoker 从实战到源码追溯
Spring HttpInvoker 作为 Spring 家族中老牌远程调用模型,深受开发者喜爱. 其主要目的是来执行基于 HTTP 的远程调用(轻松穿越防火墙),并使用标准的 JDK 序列化机制. ...
- 微信内置浏览器submit函数无效的问题
在表单提交button被点击时.触发提交函数,代码例如以下: <form id="frm_photo" enctype="multipart/form-data&q ...
- Redis 学习之路 (011) - redis 多数据库
一台服务器上都快开启200个redis实例了,看着就崩溃了.这么做无非就是想让不同类型的数据属于不同的应用程序而彼此分开. 那么,redis有没有什么方法使不同的应用程序数据彼此分开同时又存储在相同的 ...
- ng-repeat 的重复问题
如果ng-repeat绑定的数组中元素有重复, 如 $scope.data = [1,2,2] ng-repeat="value in data" //这种写法就会报错,ngRe ...