Vue入门

最新推荐文章于 2024-10-30 19:10:39 发布

浩瀚无疆~

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量59

点赞数 1

分类专栏： vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/m0_73535798/article/details/130127748

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js的基本用法，包括引入依赖、数据绑定示例，如文本输入、复选框、单选按钮和下拉框的绑定，以及事件处理。此外，还展示了如何在项目中使用axios进行API调用。提供了一个简单的表格展示和分页的项目实例，进一步说明Vue在前后端分离中的应用。

摘要由CSDN通过智能技术生成

vue基本用法以下是代码实现,具体用法请访问官网,查看详情

一、vue是什么？

vue是js的一套框架,好处是通过数据去改变节点,前后端分离

二、使用步骤

1.引入依赖

具体请直接搜索vue官网,axios官网进行下载（示例）：

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>

2.基本功能的用法

<!DOCTYPE html>
<html>
<head>
    <title>Vue2</title>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <style>
        .abc {
            background-color: #2aabd2;
        }
    </style>
</head>
<body>
<div id="app">
    <input v-model="message" placeholder="默认">
    <p>{{message}}</p>
    <p>爱好</p>
    <input type="checkbox" id="xc1" v-model="arr" value="线程1">
    <label for="xc1">线程1</label>
    <input type="checkbox" id="xc2" v-model="arr" value="线程2">
    <label for="xc2">线程2</label>
    <input type="checkbox" id="xc3" v-model="arr" value="线程3">
    <label for="xc3">线程3</label>
    <input type="checkbox" id="xc4" v-model="arr" value="线程4">
    <label for="xc4">线程4</label>
    <p>{{arr}}</p>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <p>性别:{{gender}}</p>
    <input type="radio" id="na" v-model="gender" value="男">
    <label for="na">男</label>
    <input type="radio" id="nv" v-model="gender" value="女">
    <label for="nv">女</label>
    <p>下拉框</p>
    <div id="example-5">
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>

    <div>
        <button @click="btnIndex=1" v-bind:class="btnIndex==1?'abc':''">1</button>
        <button @click="btnIndex=2" v-bind:class="btnIndex==2?'abc':''">2</button>
        <button @click="btnIndex=3" v-bind:class="btnIndex==3?'abc':''">3</button>
    </div>

</div>
<script>
    let va2 = new Vue({
        el: "#app",
        data: {
            message: "helloWord",
            arr: ["线程1"],
            gender: "男",
            btnIndex: "",
            selected: 'A'
        },
        methods(){

        },
        created(){
            console.info("生命周期")
            axios.get("url",{A:this.arr})
            .then(function (response){
                console.log("成功回调")
            })
            .catch(function (error){
                console.log("失败打印")
            })
        }
    })
</script>
</body>
</html>

3.项目实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>

<div id="app" class="container">
    <a href="student-insert-vue.html" type="button" class="btn btn-primary">添加</a>
    <table class="table table-striped">
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>密码</th>
            <th>操作</th>
        </tr>
        <tbody id="bg">
        <tr v-for="s in list">
            <td>{{s.id}}</td>
            <td>{{s.username}}</td>
            <td>{{s.password}}</td>
            <td><a href="student-insert-vue.html" class="btn btn-warning">修改</a>
                <button  class="btn btn-danger">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
    <nav aria-label="Page navigation" style="text-align: center">
        <ul class="pagination">
            <li v-if="page>1" @click="goPage(page-1)">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li v-for="i in pageCount" v-bind:class="i==page?'active':''" @click="goPage(i)">
                <a href="#">{{i}}</a>
            </li>
<!--v-if可以用来判断并隐藏标签-->
            <li v-if="page<pageCount" @click="goPage(page+1)">
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            list: [],
            pageCount: 0,
            page: 1,
            user: {}
        },
        created() {//生命周期,创建对象Vue之后
            this.loadData();
        },
        methods: {
            goPage(i) {
                this.page = i;
                this.loadData();
            },
            loadData() {
                let vm = this;//也可以用=> {.then((response)=>)},这样就可以axios里面的this
//就可以表示data里面的变量了
                axios.post('student/findPage?page=' + this.page)
                    .then(function (response) {
                        console.info(this)
                        //成功时就给数据和总页数赋值
                        vm.list = response.data.data.list;
                        vm.pageCount = response.data.data.pageCount;
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            }
        }
    })
</script>
</body>
</html>