js基本语法&vue基本语法

First Post:

Last Update: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript学习</title>
</head>
<body>
    <!-- 对象的增删改查 -->
    <script>
        // 创建一个对象
        let obj={}
        let obj2={}

        // 添加属性
        obj.a=1
        console.log(obj)
        obj2.a=2
        console.log(obj2)
        // 删除属性
        delete obj.a
        console.log(obj)

        // 添加属性
        let user={
            name:'张三',
            age:18,
            sex:'男'
        }
        // 添加属性
        user["address"]="北京"
        console.log(user)

        console.log("深拷贝1")
        let teacher={}
        // 把user里面的属性转给teacher,安全的对象转移方式
        Object.assign(teacher,user) //深拷贝
        console.log("user===",user)
        console.log("teacher===",teacher)

        // 深拷贝方式2
        console.log("深拷贝2")
        let teacher1=JSON.parse(JSON.stringify(user))
        console.log("teacher1===",teacher1)
        teacher1.xxx="测试"
        console.log("teacher1===",teacher1)
        console.log("user===",user)
        // 深拷贝方式3
        console.log("深拷贝3")
        let teacher2=Object.assign({},user)
        console.log("teacher2===",teacher2)
        teacher2.xxx="测试"
        console.log("teacher2===",teacher2)
        console.log("user===",user)
        // 浅拷贝
        console.log("浅拷贝")
        let teacher3=teacher2 //浅拷贝
        teacher3.yyy="测试" // teacher3和teacher2指向同一个对象
        console.log("teacher3===",teacher3)
        console.log("teacher2===",teacher2)



        //从对象中拿到属性
        let user1={
            name:'张三',
            age:18,
            sex:'男'
        }
        console.log("从对象中拿到属性")
        // 三种方式
        console.log("方式1")
        console.log(user1.name)
        console.log("方式2")
        console.log(user1["name"])
        console.log("方式3")
        console.log("解构语法")
        let {name} = user1
        console.log(name)


        let a=null
        //let c=a.x
        //console.log("c===",c)
        console.log("拿到空数据")
        console.log("使用?.解决拿到空数据报错问题")
        let b=a ?.x
        console.log("b===",b)


        console.log("使用??解决拿到空数据报错问题")
        let d=null
        let e=1
        let f= d ?? e
        console.log("f===",f)

        console.log(localStorage.getItem("user"))
        let n=JSON.parse(localStorage.getItem("user")??"{}")
        console.log("n===",n)

        console.log("使用||解决拿到空数据报错问题")
        let res;
        let res1=res||{}
        console.log(res1.name)


        console.log("左边为null则取右边的值")
        a=1
        b=null
        console.log(a ??= b)


        let jsObj={
            name:"张三",
            age:18,
            sex:"男",
            1:"1",
            2:"2"
        }
        console.log(jsObj[1])
        // debugger
        for (const key in jsObj){
            console.log("key===",key)
            jsObj[key]+="---测试"
            console.log("jsObj[key]===",jsObj[key])
            if (key==="name"){
                console.log("name===",jsObj[key])
            }
        }
    </script>
    <!-- 数组的增删改查 -->
    <script>
        let arr=new Array()
        arr.push(1)
        console.log(arr)
        let arr1=[1,2,3,4,5]
        console.log(arr1)

        //arr增加元素
        console.log("arr增加元素")
        arr1[0]=1
        console.log(arr1)
        arr1.push(2)
        console.log(arr1)

        //修改元素
        console.log("修改元素")
        arr1[0]=3
        console.log(arr1)


        //删除元素
        console.log("删除元素")
        console.log("pop尾部删除")
        arr1.pop()
        console.log(arr1)
        console.log("shift头部删除")
        arr1.shift()
        console.log(arr1)
        console.log("splice左闭右开区间删除")
        arr1.splice(0,2)
        console.log(arr1)


        //切片
        console.log("切片--截取元素，左闭右开")
        let arrNew=[1,2,3]
        let arrNew1=arrNew.slice(0,2)
        console.log("arrNew===",arrNew)
        console.log("arrNew1===",arrNew1)
        //合并数组
        console.log("合并数组")
        let arrNew2=[1,2,3]
        let arrNew3=[4,5,6]
        let arrNew4=arrNew2.concat(arrNew3)
        console.log("arrNew2===",arrNew2)
        console.log("arrNew3===",arrNew3)
        console.log("arrNew4===",arrNew4)

        //split
        console.log("split")
        let str="1,2,3,4,5"
        let arrNew5=str.split(",")
        console.log("arrNew5===",arrNew5)
        str="ceshi,shigfd"
        console.log(str.split(","))

        //join
        console.log("join")
        let arrNew6=["1","2","3","4","5"]
        console.log(arrNew6.join(","))
        console.log(arrNew6.join(""))
        console.log(arrNew6.join("---"))

        //sort 排序排的是字典序 unicode码
        console.log("sort 排序")
        let arrNew7=[1,2,10,15,22,20,11,8,9,6,5]
        console.log(arrNew7.sort())
        console.log("按照数值大小排序")
        console.log(arrNew7.sort((a,b)=>a-b))
        console.log(arrNew7.sort((a,b)=>b-a))

        //reverse
        console.log("reverse")
        console.log(arrNew7.reverse())
        console.log(arrNew7.sort((a,b)=>b-a))//降序

        //indexOf
        console.log("indexOf")
        let arrNew8=[1,2,3,4,5]
        console.log(arrNew8.indexOf(3))//没有返回-1，有返回下标

        //filter
        console.log("filter")
        let arrNew9=[1,2,3,4,5]
        console.log("查找大于3的元素")
        let arrNew10=arrNew9.filter(item=>item>3)
        console.log(arrNew10)

        let arrNew11=[{name:"张三",age:18},{name:"李四",age:19},{name:"王五",age:20}]
        console.log("查找大于18岁的元素")
        let arrNew12=arrNew11.filter(item=>item.age>18)
        console.log(arrNew12)

        //删除数组的某一项
        console.log("删除数组的某一项")
        let arrNew13=[{name:"张三",age:18},{name:"李四",age:19},{name:"王",age:20}]
        console.log(arrNew13)
        let arrNew14= arrNew13.filter(item=>item.name!=="王")
        console.log(arrNew14)

        //find
        console.log("find")
        let arrNew15=[{name:"张三",age:18},{name:"李四",age:19},{name:"王五",age:20}]
        console.log("查找李四")
        let arrNew16=arrNew15.find(item=>item.name==="李四")
        console.log(arrNew16)
        //findIndex
        console.log("findIndex")
        let arrNew17=[{name:"张三",age:18},{name:"李四",age:19},{name:"王五",age:20}]
        console.log("查找李四的下标")
        let arrNew18=arrNew17.findIndex(item=>item.name==="李四")
        console.log(arrNew18)

        //map
        console.log("map")
        let arrNew19=[{name:"张三",age:18},{name:"李四",age:19},{name:"王五",age:20}]
        console.log("遍历数组")
        let arrNew20=arrNew19.map(item=>{return {name:item.name, age:item.age+1}})
        console.log(arrNew20)
        console.log("遍历数组，只取name")
        let arrNew21=arrNew19.map(item=>{return item.name})
        console.log(arrNew21)
        console.log("遍历数组，只取name，并拼接")
        let arrNew22=arrNew19.map(item=>{return item.name+"---"})
        console.log(arrNew22)
        let arrNew23=arrNew19.map(item=>item.name+"---")
        console.log(arrNew23)

        //forEach
        console.log("forEach")
        let arrNew24=[{name:"张三",age:18},{name:"李四",age:19},{name:"王五",age:20}]
        console.log("遍历数组")
        arrNew24.forEach(item=>{console.log(item)})

        //reduce
        console.log("reduce")
        let arrNew25=[1,2,3,4,5]
        console.log("求和")
        //pre 前一个值 cur 当前值
        let sum=arrNew25.reduce((pre,cur)=>{return pre+cur},0)
        console.log(sum)
        //统计
        console.log("统计出现的次数")
        let count=arrNew24.reduce((pre,cur)=>{
            if (cur.name in pre){
                pre[cur.name]++
            }else{
                pre[cur.name]=1
            }
            return pre
        },{})
        console.log(count)


        //json
        let json={
            "name":"张三",
            "age":18,
            "sex":"男",
            "address":{
                "province":"四川",
                "city":"成都"
            },
            "hobby":["吃饭","睡觉","打豆豆"],
            "children":[
                {"name":"张三","age":18},
                {"name":"李四","age":19},
                {'name':"王五","age":20}
            ]
        }
        console.log(json)
        console.log("[]是引用类型，{}是值类型")

        //http://www.json.cn/ json验证
    </script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <div>
            {{num}} <!--运算会有问题尽量不要在这里做运算-->
        </div>
        <div>
            {{bool}}
        </div>
        <div>
            {{bool ? 'a':'b'}}
        </div>
        <div>
            {{bool2 ? 'a':'b'}}
        </div>
        <div>
            {{arr[0].name}}
        </div>
        <div>
            {{arr.find(item=>item.name==="张三")}}
        </div>
        <div v-html="htmlStr"><a>v-html渲染</a></div>
        <div>
            <input type="text" v-model="value">
            <a>v-model是双向绑定的</a>
            <div>{{value}}</div>
        </div>
        <div>
            <div v-if="color==='red'">红色</div>
            <div v-if="color==='绿色'">绿色</div>
            <div v-else-if="color==='蓝色'">蓝色</div>
            <div v-else>黑色</div>
        </div>
        <div>
            <a v-bind:href="url">搜索一下</a>
            <a>v-bind:href可以简写成:href</a>
            <a :href="url">搜索一下</a>
        </div>
        <div id="von" style="width: 100px;height: 100px;background-color: red;" @click="clickDiv">
            <a id="von1" >v-on绑定事件简写@</a>
        </div>
        <div>
            <a v-for="item in fruits">{{item}}</a><br/>
            <a v-for="(item,index) in fruits">{{index+1}}:{{item}}</a><br/>

            <a v-for="(item,index) in fruitsS">{{index+1}}:{{item.name}}:{{item.price}}</a><br/>
            <a v-for="(item,index) in fruitsS" v-bind:key="index">{{index+1}}:{{item.name}}:{{item.price}}</a>
        </div>

        <div style="display: flex;margin-top: 30px;">
            <select v-model="cur_menu">
                <option v-for="item in menu" :key="item">{{item}}</option>
            </select>
            <div style="padding: 0 10px" :class="{'active':item ===cur_menu}"
                 v-for="item in menu" :key="item">{{item}}</div>
        </div>
    </div>
    <script>
        var app=new Vue({
            el:"#app",   // 绑定元素
            data: {
                msg: "hello vue",
                num:1,
                bool:true,
                bool2:false,
                arr:[{name:"张三",age:18}],
                htmlStr:"<a href='http://www.baidu.com'>百度</a><br/><strong>v-html渲染</strong>",
                value:"",
                color:'red',
                url:"https://www.baidu.com",
                fruits:["苹果","香蕉","西瓜"],
                fruitsS:[{name:"苹果",price:5},{name:"香蕉",price:3},{name:"西瓜",price:10}],
                menu:["首页","详情","购物车","我的"],
                cur_menu:'首页',
            },
            methods:{
                clickDiv(){
                    console.log("点击了div")
                    let color=document.getElementById("von").style.backgroundColor
                    document.getElementById("von").style.backgroundColor= color === "red" ? "green" : "red"
                    let color1=document.getElementById("von1").style.backgroundColor
                    document.getElementById("von1").style.backgroundColor= color1 === "red" ? "green" : "red"
                }
            }
        })
    </script>
</body>
</html>