js let
<script>
var a;
// 变量提升 js中的作用域只有在函数中 {} 才称为作用域 if/for循环都不是 都会产生变量提升
console.log(a); {
a = 2;
console.log(a)
}
console.log(a) var arr = []; for (let i = 0;i<10;i++){
arr[i] = function () {
console.log(i);
}
}
arr[3](); //选项卡 var name = 'alex';
var age = 18;
var str = '我是'+ name+',今年'+age+'岁,';
var strongstr = `我是${name},今年${age}岁` let add = (a,b)=>{
return a+b;
};
console.log(add(3,4)) //箭头函数 var f = v => v;
var f = function(v) {
return v;
}; var f = () => 5; //如果箭头函数不需要参数或者需要多个参数,就用就用一个圆括号代表参数部分
var sum = (num1,num2) => num1+num2;
function f1(){} ===> ()=>{} </script>
<script>
let person = {
name:'超哥',
age:18,
fav:function(){
alert('小包'');} }
person.fav(); 对象调方法
</script>
<script>
let person = {
name:'超哥',
age:18,
fav(){
// this指的是person
console.log(this.name);
setInterval(()=> {
console.log(this.age++);
},2000)
}
}
person.fav(); let person2 = {
name:'超哥2',
age:188,
fav:()=>{ //箭头函数 指向全局 Window
// this指的是person
console.log(this);
}
}
var a = 5;
person2.fav();
class Student{ //类
// 对象单体模式
constructor(name,age){
this.name = name;
this.age = age;
}
fav(){
console.log(this.name);
}
}
let s1 = new Student('alex',18);
s1.fav();
</script>
经常用 单体模式/箭头函数
let person = {
name:'超哥',
age:18,
fav(){
// this指的是person
console.log(this.name);
setInterval(()=> {
console.log(this.age++);
},2000)
}
}
person.fav();
Vue 渐进式框架 被设计成自下而上的逐层框架 只关注前端页面视图层
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
指令操作 为了减少DOM操作 一个库的概念
https://cn.vuejs.org/v2/guide/ 官方文档 开发/生产
https://www.bootcdn.cn/
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
/*display: none;*/
}
.box2{
background-color: green;
}
.box3{
background-color: blue;
}
div.active{
display: block;
}
</style> </head>
<body>
<div id="app">
<!--视图-->
<!--数据驱动视图-->
<!--模板语法-->
<h2>{{ name }}</h2>
<h3>{{ 1 + name }}</h3>
<p>{{ 1 < 2 ? '真的': '假的'}}</p>
<h1>{{ {name:'alex'} }}</h1> <!--指令系统所有的指令系统都是v-xxx开头的-->
<!--innerText innerHTML text() html()-->
<h4 v-text = "name"></h4>
<h4 v-html = "name"></h4>
<button v-on:click = "handlerClick">{{ text }}</button>
<button @click = "handlerClick2">隐藏</button>
<div class="box" v-if="isShow"></div> <div class="box box2" v-show="isHidden"> </div>
<div class="box box3" :class="{active:isBox3}"></div> <ul>
<li v-for = '(item,index) in menus' v-bind:key = 'index' v-bind:title="item">
<h3>{{ index }}-----{{ item }}</h3>
</li>
</ul> <!--vue提供的简写 v-on-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
var name = 'alex';
let vm = new Vue({
el:'#app', //id 选择器
data:{
//数据 属性
name:'<span>黄瓜</span>',
num: 18,
isShow:true,
isHidden:true,
text:'显示',
menus:['鱼香肉丝','黄焖鸡','胡辣汤','全家桶'],
isBox3:true
},
methods:{ //方法
handlerClick(){ //单体相当于普通函数
setInterval(()=>{
})
this.isShow = !this.isShow;
if(this.isShow === true){
this.text = '隐藏';
}else{
this.text = '显示';
}
},
handlerClick2(){
this.isHidden = false;
}
}
});
console.log(vm.name)
</script>
</body>
</html>
备注 v-if登录注册用 v-show用的多点 v-for循环用(优先执行) 控制类css class的添加v-bind
v-on 监听DOM事件 绑定属性/调用简写@ :
<body> 双向数据绑定 <form action="" id="form">
<!--<input type="text" :value="text" @input = 'inputHandler'> <!–绑定–>-->
<!--<p>{{ text }}</p>-->
<input type="text" v-model = 'text'>
<a href="#">{{ text }}</a> </form>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> <script>
let vm = new Vue({
el:'#form',
data:{
text:'超'
},
methods:{
inputHandler(e){
console.log(e.target.value);
this.text = e.target.value;
}
} }) </script>
js let的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- js学习笔记：操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- JS调用Android、Ios原生控件
在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- JS正则表达式常用总结
正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...
- 干货分享：让你分分钟学会 JS 闭包
闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...
- JS核心系列：理解 new 的运行机制
和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...
随机推荐
- Linux内核笔记：epoll实现原理（一）
一.说明 针对的内核版本为4.4.10. 本文只是我自己看源码的简单笔记,如果想了解epoll的实现,强烈推荐下面的文章: The Implementation of epoll(1) The Imp ...
- (70)Wangdao.com第十一天_JavaScript 日期对象 Date
日期对象 Date 表示一个时间 Date 对象是 JavaScript 原生的时间库 它以1970年1月1日00:00:00作为时间的零点,可以表示的时间范围是前后各1亿天(单位为毫秒) 时间零点( ...
- python开发之virtualenv与virtualenvwrapper讲解
在使用 Python 开发的过程中,工程一多,难免会碰到不同的工程依赖不同版本的库的问题: 亦或者是在开发过程中不想让物理环境里充斥各种各样的库,引发未来的依赖灾难. 此时,我们需要对于不同的工程使用 ...
- 一个bat病毒分析(part1)
之前没学过bat,这里借分析顺便学一波,分析过程可能有点啰嗦 这里的@echo off关闭回显,病毒一般都是隐秘的执行的,然后setlocal enabledelayedexpansion是设置本地变 ...
- SSM的 日常错误 之 mybatis
HTTP Status 500 - Request processing failed; nested exception is org.mybatis.spring.MyBatisSystemExc ...
- 【搜索1】P1605 迷宫
题目背景 迷宫 [问题描述] 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和 终点坐标,问: 每个方格最多经过1次,有多少种从起点坐标到终点坐标的方案.在迷宫 中移动有上下 ...
- Magic Pen 6
Problem Description In HIT, many people have a magic pen. Lilu0355 has a magic pen, darkgt has a mag ...
- OO第四次博客作业
测试与正确性论证的效果差异及其优缺点 测试是利用测试代码,通过编写测试用例来验证代码是否能正常完成所要求的功能,自动测试相较于正确性论证来说更加的直观,直接测试代码的功能,而正确性论证是在JSF的基础 ...
- [转]BT原理分析
BitTorrent协议. BT全名为BitTorrent,是一个p2p软件,你在下载download的同时,也在为其他用户提供上传upload,因为大家是“互相帮助”,所以不会随着用户数的增加而降低 ...
- Web开发——Photoshop（PSD格式截取）
Step1 将截取到的图片,存储为Web所用格式. Step2 在右上角选择存储格式为:PNG-24(PNG-8可能会出现白边).