Vue入门

最新推荐文章于 2024-09-14 09:50:15 发布

玥骋

最新推荐文章于 2024-09-14 09:50:15 发布

阅读量222

点赞数

分类专栏： Vue初学文章标签： vue.js java web

本文链接：https://blog.csdn.net/weixin_50659410/article/details/126469527

版权

Vue初学专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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

</script>

2.编写视图

  <div id="app">
        <input v-model="username">
        <!--插值表达式-->
        {{username}}
    </div>

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>

v-model

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

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>

v-if/else if /show

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

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


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

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>

Vue生命周期

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

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

状态	阶段周期
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 = " <tr>\n" +
                "        <th>序号</th>\n" +
                "        <th>品牌名称</th>\n" +
                "        <th>企业名称</th>\n" +
                "        <th>排序</th>\n" +
                "        <th>品牌介绍</th>\n" +
                "        <th>状态</th>\n" +
                "        <th>操作</th>\n" +
                "    </tr>";
            for (let i = 0; i < brands.length; i++) {
                let brand = brands[i];
                tableData += "\n"+
                    "<tr align=\"center\">\n" +
                    "        <td>"+(i+1)+"</td>\n" +
                    "        <td>"+brand.brandName+"</td>\n" +
                    "        <td>"+brand.companyName+"</td>\n" +
                    "        <td>"+brand.ordered+"</td>\n" +
                    "        <td>"+brand.description+"</td>\n" +
                    "        <td>"+ brand.status+"</td>\n" +
                    "\n" +
                    "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                    "    </tr>";

            }
            //设置表格数据
            document.getElementById("brandTable").innerHTML=tableData;
        })
    }*/
</script>
</body>
</html>

添加功能的简化

<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';
    //         }
    //     })
    // }