Vue 2 上手（一）

还要继续搬砖

已于 2024-04-16 11:10:23 修改

阅读量304

点赞数 5

分类专栏： Vue2 java 文章标签： vue.js 前端

于 2024-04-14 23:07:50 首次发布

本文链接：https://blog.csdn.net/weixin_59095264/article/details/137756945

版权

java 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

一、Vue的基础引入与使用

再web文件夹中导入vue2的js，再相应的html引入vue的js

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

在要配置的父级DIV中设置一个id，此id用于被vue引用。

<body>
    <div id="app">
    </div>

  <script>
        var vue1 = new Vue({
            el: "#app", //绑定元素，界面中id为app的元素都给vue管理
            data: { //数据
                price: 0,//数据源
                num: 0,//数据源
                show: false,//数据源
                userIfon: {},//数据源
                inputValue: "请输入",//数据源
                msg: "hello",//数据源
                imgUrl: "../imgs/qqHeader.jpg",//图片对象
                adminArr: []  //对象
            },
            computed: {//计算属性
               //一般放置计算方法
            },
            methods: { //方法
               //这里用于放置被引用div需要使用的方法
            }
        })

    </script>
</body>

二、基础使用

1、 {{msg}} 使用双括号在对应块中可引用对应的数据源

            <p>
                账号： {{account}}
            </p>

2、对于地址类可直接使用

<img :src="imgUrl">

3、对于对象类的使用，需要先遍历对象数组中的对象，在获取对象中的属性

使用v-for

 <ul v-for="item in adminArr" style="display: flex;list-style: none;">
            <li>{{item.id}}</li>
            <li>{{item.name}}</li>
            <li>{{item.age}}</li>
            <li>{{item.account}}</li>

        </ul>

判断的使用v-if、v-else、v-else-if

v-on:click的使用可简化为@click

<tr v-for="(item,index) in adminArr">
                <td>{{index+1}}</td>
                <td>{{item.account}}</td>
                <td>{{item.age}}</td>
                <td v-if="!item.status">
                    <button disabled v-on:click=changheStatus(item)>启动</button>
                    <button v-on:click=changheStatus(item)>禁用</button>
                    <button @click="edit(item)">编辑</button>
                </td>
                <td v-else-if="item.status">
                    <button v-on:click=changheStatus(item)>启动</button>
                    <button disabled v-on:click=changheStatus(item)>禁用</button>
                    <button @click="edit(item)">编辑</button>
                </td>
            </tr>

v-bind

此用法用与单向绑定可简写为 “：”

a href="#" :class=

v-model

此用法是用于双向绑定，可实现数据的传递

 <p>
   姓名： <input type="text" v-model="userIfon.name">
 </p>

计算方法

数据的实时计算还可以使用计算方法，使用双括号可直接相乘，或者可以在vue的相关位置写相关方法，在总价的位置填写方法名即可

             <p>
                单价 <input type="text" v-model="price">
            </p>
            <p>
                数量 <input type="text" v-model="num">
            </p>
            <p>
                总价 {{price * num}}
            </p>