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 中,万物皆对象,为什么还要通过 ...
随机推荐
- __x__(38)0909第五天__雪碧图的制作
1. 用ps打开目标图片若干. 2. 调整合适的画布大小. 3. 将图片拖曳到一张里. 4. 存储为Web所用格式,选择 png24 .
- [LeetCode] Chalkboard XOR Game 黑板亦或游戏
We are given non-negative integers nums[i] which are written on a chalkboard. Alice and Bob take tu ...
- javaweb 与jsp页面的交互流程 (初次接触时写)
javaweb 与jsp页面的交互流程 javaweb项目目录 1. javaweb项目的一般目录: 2. jsp 页面一般情况下放在 top(前台页面) back(后台页面) 3. 后台代码 放在s ...
- linux下压缩解压缩命令
zip/gzip 命令 linux zip命令参数列表: -a 将文件转成ASCII模式 -F 尝试修复损坏的压缩文件 -h 显示帮助界面 -m 将文件压缩之后,删除源文件 -n 特定字符串 ...
- Myeclipse的使用技巧
1.1.MyEclipse自定义注释 一.修改进入路径: Window->Preference->Java->Code Style->Code Template-> ...
- php 一行代码解决二维数组去重
array_unique($array, SORT_REGULAR);
- 关于Python中迭代器的作用
迭代器的定义:含有__iter__()方法和__next__()方法的就是迭代器,即(iterate) 含有__iter__()方法就可以使用for循环,即iterable(可迭代的) Iterabl ...
- halcon 图片加载和设置XY轴滑动块的先后顺序
//必须先加载图片,然后执行 hWndControl.setGUICompRangeX( new int[]{ XTrackBar.Minimum, XTrackBar.Maximum}, XTrac ...
- IntelliJ IDEA 指定Java编译版本
在IntelliJ IDEA 15中使用Maven时,IDEA将默认的编译版本.源码版本设置为jdk5.编译项目的时候出现警告:”Warning:Java: 源值1.5已过时, 将在未来所有发行版中删 ...
- js的一些注意点
18-12-24 oninput事件: 在用户输入时触发,它是在元素值发生变化时立即触发: 该事件在 <input> 或 <textarea> 元素的值发生改变时触发. 缺陷: ...