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