<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>