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 中,万物皆对象,为什么还要通过 ...
随机推荐
- AngularJS_简介、特性及基本使用_及其工作原理
转自:angularJS 的工作原理 转自:通过<script>标签引入到 HTML 中,那么此时 Angular 就做为一个普通的 DOM 节点等待浏览器解析 当浏览器解析到这个节点时, ...
- scrapy入门使用
scrapy入门 创建一个scrapy项目 scrapy startporject mySpider 生产一个爬虫 scrapy genspider itcast "itcast.cn&qu ...
- nginx设置默认server
server { listen default_server; listen [::]: default_server; server_name _; root /usr/share/nginx/ht ...
- ms17_010_psexec
一.ms17_010_psexec简介 MS17-010 的psexec是针对Microsoft Windows的两款最受欢迎的漏洞进行攻击. CVE-2017-0146(EternalChampio ...
- 壁虎书3 Classification
MNIST fetch_openml returns the unsorted MNIST dataset, whereas fetch_mldata() returned the dataset s ...
- Java+Selenium向文本框输入内容以后模仿键盘的"ENTRY"
在自动化测试中我们避免不了要模仿一些键盘上按钮的操作,普通的字母,数字,特殊符号,这些都是很简单的,有时候我们也会模仿"SHIFT","ALT","C ...
- Luogu 2766 - 最长不下降子序列问题 - [LIS问题][DP+网络流]
题目链接:https://www.luogu.org/problemnew/show/P2766 题解(大量参考https://blog.csdn.net/ZscDst/article/details ...
- hive高级数据类型
hive的高级数据类型主要包括:数组类型.map类型.结构体类型.集合类型,以下将分别详细介绍. 1)数组类型 array_type:array<data_type> -- 建表语句 cr ...
- 2018-2019-2-20175303 实验二 《Java开发环境的熟悉》实验报告
2018-2019-2-20175303 实验二 <Java开发环境的熟悉>实验报告 姓名:柴轩达 学号:20175303 班级:1753 实验课程:JAV ...
- Linux常用命令之-删除文件
在测试过程中,有时候会需要删除一些文件,例如日志文件过大等,这里汇总一些删除文件常用的命 已这个系统内的文件为例 删除文件(即这个文件被删除) 单个删除:rm -f + 文件名 eg:rm -f 2 ...