前端笔记(JS+VUE+HTML)实时更新

前端笔记

语法

1、声明变量

// var 声明的变量没有局部作用域
// let 声明的变量 有局部作用域
// var 可以声明多次
// let 只能声明一次
// const声明之后不允许改变

{
var a = 0
let b = 1
}
console.log(a)  // 0
console.log(b)  // ReferenceError: b is not defined

var m = 1
var m = 2
let n = 3
let n = 4
console.log(m)  // 2
console.log(n)  // Identifier 'n' has already been declared

// 1、声明之后不允许改变    
const PI = "3.1415926"
PI = 3  // TypeError: Assignment to constant variable.
// 2、一但声明必须初始化，否则会报错
const MY_AGE  // SyntaxError: Missing initializer in const declaration

2、解构赋值

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

let [x, y, z] = [1, 2, 3]

let user = {name: 'Helen', age: 18}
let { name, age } =  user//注意：结构的变量必须是user中的属性

3、模板字符串

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，
还可以用来定义多行字符串，
还可以在字符串中加入变量和表达式。
。
/

/ 1、多行字符串
let string1 =  `Hey,
Girl`

// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "DongZL"
let age = 24
let info = `My Name is ${name},I am ${age+1} years old.`
console.log(info)
// My Name is DongZL,I am 25 years old.
// 3、字符串中调用函数
function f(){
    return "敌军还有三十秒到达战场!"
}
let string2 = `Game start,${f()}`

4、声明对象

创建 声明对象简写.html

const age = 25
const name = "DongZL"

// ES6
const person = {age, name}
console.log(person) //{age: 25, name: "DongZL"}

5、定义方法

const person2 = {
    sayHi(){
        console.log("Hi")
    }
}

6、对象拓展运算符

// 1、拷贝对象
let person1 = {name: "DongZL", age: 25}
let someone = { ...person1 }
console.log(someone)  //{name: "DongZL", age:25}
// 2、合并对象
let age = {age: 25}
let name = {name: "DongZL"}
let person2 = {...age, ...name}
console.log(person2)  //{age: 25, name: "DongZL"}

7、箭头函数

// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f1 = (a,b) => {
    let result = a+b
    return result
}
console.log(f1(6,2))  // 8

var f2 = (a,b) => a+b

Vue

1、数据渲染

 
1.  插值表达式  {{message}}
2.  单向数据绑定 v-bind，简写 冒号（:）
3.  双向数据绑定 v-model
4.  时间处理  v-on ，  v-on:click 表示处理鼠标点击事件  简写形式 @ 
5.  条件指令 v-if v-else、v-else-if v-show 
	v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
	因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
6. 	列表循环指令 v-for


 <!-- <tr v-for="item in userList"></tr> -->
 <tr v-for="(item, index) in userList">
     <td>{{index}}</td>
     <td>{{item.id}}</td>
     <td>{{item.username}}</td>
     <td>{{item.age}}</td>
 </tr>