JS-Vue-指令 JSON Ajax

ES6语法

●变量拼接
    var num = 100;
    var flag = true;
    var str = "这是一行" + num + "字符" + flag + "串";
    //${变量}
    var s = `这是一行${num}字符${flag}串`;

●JSON对象键值对写法
	var username = "jack";
    var password = "123456";
    var json = {
        "username": username,
        "password": password
    }
    //键的名字和值的变量名称相同 可以简写如下
    var json2 = {
        username,
        password
    };

●JSON对象 键的值是一个函数时
	var json3 = {
        "username": username,
        "password": password,
        eat: function() {
            alert("eat");	
        }
    }
    json3.eat();

    //es6中 JSON对象 键的值 是一个函数 可以简写如下
    var json4 = {
        "username": username,
        "password": password,
        eat() {
        	alert("eat");
        }
    }
    json4.eat();

●形参默认值
    function show(a = 100, b = 200) {
    	alert(a + "====" + b);
    }
    show(20, 30);

●定时器this
	var jsonObj = {
        "username": "tom",
        "password": "123456"
    }
    setTimeout(function(jsonObj) {
        alert("定时器" + this)
        //定时器[object Window]
    }, 1000);

    //箭头函数 里面没有this
    //此时的this是外层的this
    setTimeout((jsonObj) => alert("定时器" + this), 3000);

●解构赋值
    var [a, b, c] = [10, 20, 30];
    alert(a + "=" + b + "=" + c);
	// 10=20=30

●箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。
    function fn() {
    window.setTimeout(() => {
    // 定义时，this 绑定的是 fn 中的 this 对象
    console.log(this.a);
    }, 0)
    }
    //var a = 20;
    // fn 的 this 对象为 {a: 18}
    fn.call({
    a: 18
    }); // 18
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

Vue第一个案例

<html>
	<head>
        <meta charset="utf-8">
		<title>title>
		<script src="js/vue.js">script>
	head>
    
	<body>
		
		<div id="box">
			{ }} 插值表达式-->
			<h1>{{msg}}h1>
		div>
	body>

	<script>
		//创建Vue实例
		var app = new Vue({
			//el Vue选择控制的那块区域 指定模板标签
			el: '#box',
			//data  Vue绑定的数据
			data: {
				msg: 'hello Vue'
			}
		});

		//进入浏览器 -> F12 -> 控制台 
		//输入app.msg 可以显示hello Vue
		//更该页面输入 app.msg='jack' 页面显示jack
		/*
		 现在数据和 DOM 已经被建立了关联，所有东西都是响应式的
		 数据一变化视图也跟着变化
		 
		 注意我们不再和 HTML 直接交互了。
		 一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #box) 
		 然后对其进行完全控制。
		 那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部
		*/
	script>
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

模板语法之插值表达式

<body>
    <div id="box">
        { }} -->
        <h1>{{msg}}h1>

        
        <h1>{{num+20*2}}h1>
        <h1>{{num+20*2>200}}h1>
        <h1>{{flag==false}}h1>

        
        <h1>{{num>100?'大于':'小于'}}h1>

        
        <h1>{{msg.split("").reverse().join("")}}h1>

        

    div>
body>
<script>
    new Vue({
        el: '#box',
        data: {
            msg: 'hello',
            num: 100,
            flag: true
        }
    })
script>
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

文本插入v-text和v-html指令

<body>
    <div id="box">
        <h1>{{msg}}h1>

        

        <h1 v-text="msg">h1>
        
        <h2 v-html="text">h2>
    div>
body>

<script>
    new Vue({
        el:'#box',
        data:{
            msg:'hello',
            text:'呵呵'
        }
    })
script>
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

不解析模板语法v-pre指令

<body>
    <div id="box">
        
        <h1 v-pre>{{msg}}h1>
    div>
body>

<script>
    new Vue({
        el:'#box',
        data:{
            msg:'hello'
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

解决初始化v-cloak指令

<head>
    <meta charset="utf-8" />
    <title>title>
    <style type="text/css">
        /* v-cloak指令可以解决初始化慢而导致页面闪动 */
        [v-cloak]{
            display: none;
        }
    style>
    <script src="js/vue.js">script>
head>

<body>
    <div id="box">
        {msg}}渲染完毕后 
        v-cloak就会从标签上消失
        -->
        <h1 v-cloak>{{msg}}h1>
    div>
body>

<script>
    new Vue({
        el:'#box',
        data:{
            msg:'hello'
        }
    })
script>
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

属性显示隐藏

v-show指令

<body>
    <div id="box">
        
        <div v-show="flag" style="width: 200px; height: 200px;background: green;">div>
        <button @click="change()">切换button>
        
    div>
body>
<script>
    new Vue({
        el: '#box',
        data: {
            flag: true
        },
        methods: {
            change() {
                this.flag = !this.flag;
            }
        }
    })
script>
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

条件语句v-if指令

<body>
    <div id="box">
        
        <div v-if="flag" style="width: 200px; height: 200px;background: green;">div>
        <button @click="change()">切换button>

    div>
body>
<script>
    new Vue({
        el: '#box',
        data: {
            flag: true
        },
        methods: {
            change() {
                this.flag = !this.flag;
            }
        }
    })
script>
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

条件语句v-if和v-else指令

<body>
    <div id="box">
        
        <h1 v-if="flag">我爱你h1>
        <h2 v-else>我不爱你h2>
        <button @click="change()">切换button>
    div>
body>
<script>
    new Vue({
        el: '#box',
        data: {
            msg: 'hello',
            flag: true
        },
        methods: {
            change() {
                this.flag = !this.flag;
            }
        }
    })
script>
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

条件语句v-else-if指令

<body>
    <div id="box">
        
        <input type="text" placeholder="请输入你的成绩 0---100" v-model="score">
        <h1 v-if="score>=0&&score<60">成绩不及格h1>
        <h1 v-else-if="score>=60&&score<70">成绩很差h1>
        <h1 v-else-if="score>=70&&score<80">成绩中等h1>
        <h1 v-else-if="score>=80&&score<90">成绩良好h1>
        <h1 v-else-if="score>=90&&score<100">成绩优秀h1>
        <h1 v-else-if="score=100">满分h1>
        <h1 v-else>成绩不合法h1>
    div>
body>
<script>
    new Vue({
        el: '#box',
        data: {
            score: 0
        }
    })
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

循环语句v-for指令

<body>
    <div id="box">
        
        <ul>
            <li v-for="(ele,index) in arr" v-if="index%2==0" :key="index">
                {{index}}----{{ele}}
            li>
        ul>
    div>
body>
<script>
    new Vue({
        el: '#box',
        data: {
            msg: 'hello',
            arr: [10, 20, 30, 40, 50, 60, 70]
        }
    })
script>
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

循环遍历JSON对象

<body>
    <div id="box">
        
        <ul>
            <li v-for="(value,key,index) in jsonObj" :key="index">
                {{index}}=={{key}}=={{value}}
            li>
        ul>
    div>
body>
<script>
    new Vue({
        el: '#box',
        data: {
            jsonObj:{
                "username":"jack",
                "password":"123456",
                "phone":"13510733521",
                "sex":"男"
            }

        }
    })
script>
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

循环遍历JSON数组

<body>
    <div id="box">
        
        <ul>
            <li v-for="(obj,index) in jsonArray" :key="index">
                {{obj.username}}--{{obj.password}}--{{obj.sex}}--{{obj.phone}}
            li>
        ul>
    div>
body>
<script>
    new Vue({
        el: '#box',
        data: {
            jsonArray:[
                {
                    "username":"jack",
                    "password":"123456",
                    "phone":"13510733521",
                    "sex":"男"
                },
                {
                    "username":"tom",
                    "password":"123456",
                    "phone":"13510733521",
                    "sex":"女"
                },
                {
                    "username":"smith",
                    "password":"123456",
                    "phone":"13510733521",
                    "sex":"男"
                }
            ]
        }
    })
script>
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

JSON对象增加删除属性的触发

<body>
    <div id="box">
        <ul>
            <li v-for="(value,key,index) in obj" :key="index">
                {{key}}-------{{value}}
            li>
        ul>
        <button type="button" @click="update()">
            给json对象中增加属性或删除属性要触发视图更新
        button>
    div>
body>
<script type="text/javascript">
    new Vue({
        el: '#box',
        data: {
            obj: {
                "name": "老沈",
                "age": 1,
                "sex": "男"
            }
        },
        methods: {
            update() {
                //对json对象中，原来有的属性，进行修改，可以触发视图更新
                //this.obj.name="老王";
                //this.obj.age=10;
                //this.obj.sex="女";

                //给JOSN对象 增加或删除属性 ，这样做，json对象中的属性发生变化了，但是触发不了视图的更新
                // this.obj.sal=8888;
                // delete this.obj.age;
                // console.log(this.obj);

                //使用vue提供的方法，对json对象中的属性，进行添加和删除操作，可以触发视图的更新
                // this.obj.sal=8888; 这个触发不了视图更新
                this.$set(this.obj,'sal','8888888'); //他会触发视图的更新
                this.$delete(this.obj, 'age'); //他会触发视图的更新
            }
        }
    })
script>
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

发送Ajax请求

<head>
    <script src="js/vue.js">script>
    
    <script src="js/vue-resource.min.js">script>
head>
<body>
    <div id="box">
        <h1>{{city}}h1>
        <button @click="sendAjaxRequest()">发送Ajax之GET请求button>
        <button @click="sendAjaxRequest2()">发送Ajax之POST请求button>
        <button @click="sendAjaxRequest3()">发送Ajax之JSONP请求button>
    div>
body>
<script>
    const app = new Vue({
        el: '#box', //指定模板标签
        //data 定义数据
        data: {
            msg: 'HelloWorld',
            city: '',
        },
        methods: {
            //发送get请求
            sendAjaxRequest: function() {
                //发送get请求
                this.$http.get('http://wthrcdn.etouch.cn/weather_mini?city=商洛')
                    .then(function(res) {
                    //注意：res.body 才能取得后台返回的JSON数据
                    var jsonObj = res.body;
                    this.city = jsonObj.data.city;
                }, function() {
                    console.log('请求失败处理');
                });
            },

            //发送post请求
            sendAjaxRequest2() {
                /* post 请求
					post 发送数据到后端
					需要第三个参数 {emulateJSON:true}。
					emulateJSON 的作用：如果Web服务器无法处理编码为 application/json 的请求
					你可以启用 emulateJSON 选项
					*/
                this.$http.post('/try/ajax/demo_test_post.php', {
                    name: "菜鸟教程",
                    url: "http://www.runoob.com"
                }, {
                    emulateJSON: true
                }).then(function(res) {
                    document.write(res.body);
                }, function(res) {
                    console.log(res.status);
                });
            },

            //JSONP请求
            sendAjaxRequest3() {
                let url = 'https://www.baifubao.com/callback';
                this.$http.jsonp(url, {
                    params: {
                        phone: '15850781443',
                        cmd: '1059'
                    },
                    jsonp: 'callback' 
                    //jsonp默认是callback,百度缩写成了cb，所以需要指定下 
                }).then(res => {
                    //注意如果是JSONP请求，获取后台的数据用的是data这个属性
                    console.log(res.data);
                    alert(res.data.data.area);
                });
            }
        }
    });
script>
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

Axios发送Ajax请求

<head>
    <script src="js/vue.js">script>
    
    <script src="js/axios.min.js">script>
    
    <script src="js/qs.min.js">script>
head>
<body>
    <div id="box">
        <h1>{{city}}h1>
        <h1>{{info}}h1>
        <button @click="sendAjaxRequest()">发送Ajax之GET请求button>
        <button @click="sendPost()">发送Ajax之POST请求button>
    div>
body>
<script>
    //1.获取QS对象
    var qs = Qs
    const app = new Vue({
        el: '#box', //指定模板标签
        //data 定义数据
        data: {
            msg: 'HelloWorld',
            city: '',
            info: ''
        },
        methods: {
            //发送get请求
            sendAjaxRequest() {
                axios.get('http://wthrcdn.etouch.cn/weather_mini', {
                    params: {
                        city: '商洛'
                    }
                })
                .then(response => {
                    //this.info = response;
                    console.log(response);
                    //response.data 调用data属性，才能获取到后台返回的JSON数据
                    var jsonObj = response.data;
                    this.city = jsonObj.data.city;
                })
                .catch(function(error) { // 请求失败处理
                    console.log(error);
                });
            },
            
            //发送post请求
            sendPost() {
                //把JSON形式的参数处理成 键=值&键=值 这种形式的
                var s = qs.stringify({
                    "username": "zhangsan",
                    "password": "123456"
                })
                axios.post('http://localhost:8080/login', s, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded' 
                        //这个请求头的意思就是，请求参数是 键=值&键=值形式的
                    }
                })
                .then(function(response) {
                    alert(response.data.username);
                    alert(response.data.msg);
                })
                .catch(function(error) {
                    console.log(error);
                });
            }
        }
    });
script>
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

Vue的所有生命周期函数

请添加图片描述

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script src="js/vue.js">script>
	head>
	<body>
		<div id="box">
			{{data}}
			<button type="button" @click="xiaohui()">销毁button>
		div>
		
		
			 
		<script type="text/javascript">
			var vm = new Vue({
				el: "#box",
				data: {
					data: "这是一个数据",
					info: "这是另一个数据数据"
				},
				methods: {
					xiaohui() {
						this.$destroy();
					}
				},

				beforeCreate: function() {
					console.log("beforeCreate（）创建前========")
					console.log("数据：" + this.data)
					console.log("模板：" + this.$el)
				},

				created: function() {
					//可以在这个生命周期函数中，发送Ajax请求，去请求后台的时候数据
					//发送AJax请求，请求一些后台数据
					console.log("created（）已创建========")
					console.log("数据：" + this.data)
					console.log("模板：" + this.$el)
				},

				beforeMount: function() {
					console.log("beforeMount（）mount之前========")
					console.log("数据：" + this.data)
					console.log("模板：" + this.$el)
				},

				mounted: function() { //一次
					//生命周期函数 ,Vue模板挂载完成，数据也初始化好了
					console.log("mounted（）mounted========")
					console.log("数据：" + this.data)
					console.log("模板：" + this.$el)
				},

				//多次调用
				beforeUpdate: function() {
					console.log("beforeUpdate（）更新前========");

				},

				//多次调用
				updated: function() {
					console.log("updated（）更新完成========");
				},

				//销毁之前调用
				beforeDestroy: function() {
					//可以在这个生命周期函数中做一些善后工作
					console.log("beforeDestroy（）销毁前========")
					console.log("数据：" + this.data)
					console.log("模板：" + this.$el)
				},

				//已经销毁调用
				destroyed: function() {
					console.log("destroyed（）已销毁========")
					console.log("数据：" + this.data)
					console.log("模板：" + this.$el)
				}
			})
		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

过滤器

<body>
    <div id="box">
        <h1>{{msg|myfilterQJ|myfilterJB}}h1>
        <h1>{{str|myfilterJB}}h1>
    div>
body>
<script>
    //全局过滤器
    Vue.filter('myfilterQJ', function(value) {
        return value.charAt(0).toUpperCase()
            .concat(value.substring(1).toLowerCase())
    })

    new Vue({
        el: '#box',
        data: {
            msg: 'hello',
            str: '123456'
        },
        //局部过滤器
        filters:{
            'myfilterJB':function(value){
                return value.split('').reverse().join('');
            }
        }
    })
script>
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

相关阅读:
对xgboost进行可视化，解决中文乱码问题
 多文件上传
 【django framework】ModelSerializer+GenericAPIView，如何在提交前修改某些字段值
 go语言之不必要的拷贝
 Linux内核4.14版本——drm框架分析(11)——DRM_IOCTL_MODE_ADDFB2（drm_mode_addfb2）
CMU15-213农民工学CSAPP
milvus和相似度检索
 [架构之路-14]：目标系统 - 硬件平台 - CPU、MPU、NPU、GPU、MCU、DSP、FPGA、SOC的区别
 读书郎通过上市聆讯：平板业务毛利率走低，2021年利润同比下滑11%
* 论文笔记【Wide & Deep Learning for Recommender Systems】
原文地址：https://blog.csdn.net/m0_51318597/article/details/126487725

JS-Vue-指令 JSON Ajax

文章目录

ES6语法

Vue第一个案例

模板语法之插值表达式

文本插入v-text和v-html指令

不解析模板语法v-pre指令

解决初始化v-cloak指令

属性显示隐藏

v-show指令

条件语句v-if指令

条件语句v-if和v-else指令

条件语句v-else-if指令

循环语句v-for指令

循环遍历JSON对象

循环遍历JSON数组

JSON对象增加删除属性的触发

发送Ajax请求

Axios发送Ajax请求

Vue的所有生命周期函数

过滤器