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 中,万物皆对象,为什么还要通过 ...
随机推荐
- java重构四则运算
package 重构四则运算; import java.io.IOException; public class Test { public static void main(String[] arg ...
- java反射机制的简单使用
java 反射机制 反射机制简介 参考地址 什么是反射机制 反射机制指程序在运行时能够获取自身的信息.在java中只要给定类的名字,就可以通过反射机制获得类的所有信息 反射机制的优缺点 首先了解一下动 ...
- kafka安装与测试
基于linux-Centos7.0环境先进行测试学习 Producer即生产者,向Kafka集群发送消息,在发送消息之前,会对消息进行分类,即Topic, Topic即主题,通过对消息指定主题可以将消 ...
- Dev_VGridControl的使用
这个控件适合GridControl 控件相对应的,用来竖排显示用户数据,具体效果如下图: 实现这个效果用户可以参见官方帮助文档中的如下图所示的内容: 这里我对我用到的Category Rows(分类显 ...
- SSIS - 2.使用脚本任务弹出对话框
步骤如下: 1.打开Visual Studio 2012或者SSDT工具->单击“文件”->选择"新建"打开创建新工程的对话框如下: 2.在"Business ...
- day 24 二十四、组合、继承、方法重写和重用、super（）
一.组合 1.定义:自定义类的对象作为类的属性 A类的对象具备某一个属性,该属性的值是B类的对象 基于这种方式就把A类与B类组合到一起 对象既能使用A类中的数据与功能,也能使用B类中的数据与功能 2. ...
- PAT甲级1022 Digital Library
题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805480801550336 题意: 每一本书有一个id, 书名,作 ...
- sqlserver 表循环-游标、表变量、临时表
SQL Server遍历表的几种方法 阅读目录 使用游标 使用表变量 使用临时表 在数据库开发过程中,我们经常会碰到要遍历数据表的情形,一提到遍历表,我们第一印象可能就想到使用游标,使用游标虽然直观易 ...
- 处理 Archlinux 报错
failed to kernel 1 sudo pacman -S linux-headers tpm_crb, uvcvideo 等错误 sudo vim /etc/modprobe.d/black ...
- 常用数据类型的方法--str、int、list、dict
一.字符串类型(str) class str(basestring): """ str(object='') -> string Return a nice str ...