Vue入门

Vue初探

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。
官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

Vue快速入门

1.新建HTML页面，引入Vue.js
```
<script src="js/vue.js">script>
1
```

2.在JS代码区域，创建Vue核心对象，进行数据绑定

<script>
    //1.创建vue核心对象
    new Vue({
        el:"#app",
        data(){
            return{
                username:""
            }
        }
       /* data:function (){
            return{
                username:""
            }
        }*/
    })

script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2.编写视图

  <div id="app">
        <input v-model="username">
        
        {{username}}
    div>

1
2
3
4
5
6

Vue常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同的指令具有不同的涵义。例：v-if，v-for

常用指令：

指令	作用
v-bind	为HTML标签绑定属性值，例如：href，css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if
v-else	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else-if
v-show	根据条件展示某元素，区别在于切换的时display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

v-bind

<a v-band :href="url">点击一下a>

//v-band 
<a :href="url">点击一下a>
1
2
3
4

v-model

<input name="username" v-model="username">
1

v-on

<body>
    <div id="app">
       <input type="button" value="一个按钮" v-on:click="show()">
       <input type="button" value="别点我" @click="shows()">
    div>


<script>
    //1.创建vue核心对象
    new Vue({
        el:"#app",
        methods:{
            show(){
                alert("我被点了")
            },
            shows(){
                alert("好痛a~")
            }
        }
    })

script>
body>

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-if/else if /show

<div id="app">
   <div1 v-if="count==3">div3div1>
   <div2 v-else-if="count==2">div2div2>
   <div3 v-else>div1div3>
    <hr>
    <div v-show="count==3">div v-showdiv>
    <br>

    <input v-model="count">
div>


<script>
    //1.创建vue核心对象
    new Vue({
        el:"#app",
        data(){
            return{
                username:"",
                count:3
            }
        }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

v-for

<body>
    <div id="app">
       <div v-for="addr in addrs">
           {{addr}}<br>
       div>

        <div v-for="(addr,i) in addrs">
            {{i+1}}--{{addr}}<br>
        div>
    div>


<script>
    //1.创建vue核心对象
    new Vue({
        el:"#app",
        data(){
            return{
                username:"",
                addrs:["西安","北京","杭州","西安"]
            }
        }
    })

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

Vue生命周期

也就是Vue创建到销毁的整个过程
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子函数）

状态阶段周期
beforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后
注：mounted：挂载完成，Vue初始化完成，HTML页面渲染成功。
- 发送异步请求，加载数据
```
new Vue({
	el:"#app",
	mounted(){
	alert("Vue挂载完毕，发送异步请求");
	}
})
1
2
3
4
5
6
```

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

案例，用Vue指令，简化Dom操作

查询功能的简化

<script src="js/axios-0.18.0.js">script>
<script src="js/vue.js">script>

<script>

    //Vue 简化操作版
    new Vue({
        el:"#app",
        data(){
            return{
                brands:[]
            }
        },
        mounted(){
            //页面加载完成后发送异步请求，查询数据
            var _this=this;
            axios({
                method:"get",
                url:"http://localhost:8080/brand-demo/selectAllServlet"
            }).then(function (resp){
                _this.brands = resp.data;
            })
        }
    })

   /* //1. 当页面加载完成后发送ajax请求
    window.onload =function (){
        //2.发送ajax请求
        axios({
            method:"get",
            url:"http://localhost:8080/brand-demo/selectAllServlet"
        }).then(function (resp){
            //获取数据
            let brands = resp.data;
            let tableData = " \n" +
                "        序号\n" +
                "        品牌名称\n" +
                "        企业名称\n" +
                "        排序\n" +
                "        品牌介绍\n" +
                "        状态\n" +
                "        操作\n" +
                "    ";
            for (let i = 0; i < brands.length; i++) {
                let brand = brands[i];
                tableData += "\n"+
                    "\n" +
                    "        "+(i+1)+"\n" +
                    "        "+brand.brandName+"\n" +
                    "        "+brand.companyName+"\n" +
                    "        "+brand.ordered+"\n" +
                    "        "+brand.description+"\n" +
                    "        "+ brand.status+"\n" +
                    "\n" +
                    "        修改 删除\n" +
                    "    ";

            }
            //设置表格数据
            document.getElementById("brandTable").innerHTML=tableData;
        })
    }*/
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

添加功能的简化

<script src="js/axios-0.18.0.js">script>
<script src="js/vue.js">script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                brand:{}
            }
        },
        methods:{
            submitFrom() {
                //发送ajax请求，完成添加功能
                var _this=this;
                axios({
                   method:"post",
                   url:"http://localhost:8080/brand-demo/addServlet",
                   data:_this.brand
                    }).then(function (resp){
                    //判断响应数据是否为success
                   if (resp.data=="success"){
                     location.href='http://localhost:8080/brand-demo/brand.html';
                   }
                    })
            }
        }
    })

    // //1.给普通按钮绑定单击事件
    // document.getElementById("btn").onclick = function (){
    //     //将表单数据转为json
    //     var formData= {
    //         brandName:"",
    //         companyName:"",
    //         ordered:"",
    //         description:"",
    //         status:"",
    //     }
    //     //获取表单数据
    //     let brandName = document.getElementById("brandName").value;
    //     //设置数据
    //     formData.brandName=brandName;
    //     let companyName = document.getElementById("companyName").value;
    //     formData.companyName=companyName;
    //     //获取表单数据
    //     let ordered = document.getElementById("ordered").value;
    //     //设置数据
    //     formData.ordered=ordered;
    //     //获取表单数据
    //     let description = document.getElementById("description").value;
    //     //设置数据
    //     formData.description=description;
    //     //获取表单数据
    //     let status = document.getElementsByName("status");
    //     for (let i = 0; i < status.length; i++) {
    //         if (status[i].checked){
    //             formData.status=status[i].value;
    //         }
    //     }
    //     console.log(formData);
    //     //2.发送ajax请求
    //     axios({
    //         method:"post",
    //         url:"http://localhost:8080/brand-demo/addServlet",
    //         data:formData
    //     }).then(function (resp){
    //         //判断响应数据是否为success
    //         if (resp.data=="success"){
    //             location.href='http://localhost:8080/brand-demo/brand.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

相关阅读:
从输入URL到页面展示过程
 SpringBoot常见异步编程，你会多少？
安卓手机投屏到电视，跨品牌、跨地域同样可以实现！
【LeetCode-面试经典150题-day23】
自定义类型：结构体、枚举、联合
 OpenMV与STM32之间的通信（附源码）
杂想之一个C++内存泄露案例
 微信自动化推送天气预报信息教程【Python版源代码】
〖Python APP 自动化测试实战篇②〗 - 大话闲扯 APP 自动化工具的演进史
 合宙Air724UG LuatOS-Air LVGL API控件--下拉框 (Dropdown)
原文地址：https://blog.csdn.net/weixin_50659410/article/details/126469527