Vue的基本使用

最新推荐文章于 2024-05-17 14:32:46 发布

似璟如你

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量363

点赞数 13

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/cfjbcg/article/details/137742068

版权

一、什么是vue

Vue.js，简称Vue，是一款构建用户界面的渐进式框架。它与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，也便于与第三方库或已有项目整合。当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，也非常容易与其它库或已有项目整合。另一方面，在与现代化工具链以及各种类库结合使用时，Vue.js 也能为复杂的单页应用提供驱动。

优势：动态数据渲染，优化dom操作，数据的双向绑定

二、引入vue.js

开发软件：vscode

下载vue.js v2.vuejs.org/js/vue.min.js，将文件另存为桌面，然后在vscode中建立一个js包

将js文件拖入进去

三、vue的运用

（1）实例化对象，接管html文件，数据渲染，插值表达式

<body>
    <div id="data">
        <!-- 插值表达式 -->
        {{msg}}
    </div>

    <script>
        // 实例化一个Vue对象
        new Vue({
            el:"#data",//绑定id
            data:{//data要管理的数据放在data里面
                msg:"你好"//对msg变量进行赋值
            }
        })
    </script>
</body>

运行结果：

（2）属性绑定 v-bind:属性名=" "，可简写为 :属性名=" "

<body>
    <div id="data">
       <!-- 以图片为例 -->
       <!-- 不简写 -->
       <img v-bind:src = "imgUrl" alt="">
       <!-- 简写 -->
       <img :src = "imgUrl" alt="">
    </div>

    <script>
        // 实例化一个Vue对象
        new Vue({
            el:"#data",//绑定id
            data:{
                imgUrl:"../images/face3.jpg"//导入图片，相对路径
            }
        })
    </script>
</body>

运行结果：

（3）循环：v-for = "(item,index) in 数组名"

 <!-- 曾经我们写ul和li在这边都是要写好几个
        数据量大的时候更是不得了，并且要做到动态渲染就更加麻烦
-->
<body>
    <div id="data">
        <!-- 这边举例一个ul和li列表 -->
        <ul v-for = "item in adminArr">
             <!--插值表达式  -->
            <li>{{item.name}}</li>
            <li>{{item.age}}</li>
        </ul>
    </div>

    <script>
        // 实例化一个Vue对象
        new Vue({
            el:"#data",//绑定id
            data:{
                adminArr:[
                     {
                        id:1,
                        account:"zhangsan",
                        name:"张三",
                        age:40,
                        status:1//启用状态
                    },
                    {
                        id:2,
                        account:"zhangsan",
                        name:"小三",
                        age:40 ,
                        status:0 
                    }
                ]
            }
        })
    </script>
</body>

运行结果：

使用这种办法就很好解决动态渲染，我们只需要在adminArr进行修改值，即可

（4）判断：v-if，v-show

<body>
    <div id="data">
        <!-- 如果值为happy则打印出今天心情真不错 -->
        <!-- 如果为false则不显示 -->
       <div v-if="happy">今天心情真不错</div>
    </div>

    <script>
        // 实例化一个Vue对象
        new Vue({
            el:"#data",//绑定id
            data:{
               happy:true
            }
        })
    </script>
</body>

这边v-if和v-show都是一样的运行结果

两者不同于：v-show是修改display值,为none，而v-if是删了这行语句

两者相同于：两者都可以隐式隐藏

如果数据经常变动就用show

（5）安装事件：v-on:事件名="方法名" 简写为---》@事件名="方法名"

注意：这个方法需要在vue的methods里面有定义过

以及v-model元素表单

//点击编辑按钮，修改表格信息
<body>
    <div id="data">
        <table border="1">
            <thead>
                <th>ID</th>
                <th>名字</th>
                <th>年龄</th>
            </thead>
            <tbody>
                <tr v-for="(item,index) in adminArr">
                    <td>{{index + 1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>
                        <input type="button" value="编辑" @click = "edit(item)">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <p>
                姓名：<input type="text" v-model = "userInfo.name">
            </p>
            <p>
                年龄：<input type="text" v-model = "userInfo.age">
            </p>
        </div>
    </div>

    <script>
        // 实例化一个Vue对象
        new Vue({
            el:"#data",//绑定id
            data:{
                userInfo:{},//当前点击编辑对象的信息
                adminArr:[
                    {
                        id:1,
                        name:"张三",
                        age:18
                    },
                    {
                        id:2,
                        name:"小二",
                        age:19
                    },
                    {
                        id:3,
                        name:"小王",
                        age:20
                    }
                ]
            },
            methods:{
                edit(obj){
                    //对象拷贝
                    // 如果直接通过this.userInfo = obj;来修改会直接修改表格内容，数据会回显，下面是进行优化的

                    // 第一种方法，不适合属性太多
                    // this.userInfo.account = obj.account;
                    // this.userInfo.name = obj.name;
                    // this.userInfo.age = obj.age;
                    
                    // 第二种方法
                    // this.userInfo = JSON.parse(JSON.stringify(obj)); 
                    
                    // 第三种方法
                    this.userInfo = Object.assign({},obj);
                }
            }
            
        })
    </script>
</body>

运行结果：

（6）双向数据绑定：v-model="变量名"（数据回显）

<body>
    <div id="data">
        <div>
            <p>
                单价:<input type="text" v-model="price">
            </p>
            <p>
                数量:<input type="text" v-model="count">
            </p>
            <p>
                总价：{{total}}
            </p>
        </div>
    </div>

    <script>
        // 实例化一个Vue对象
        new Vue({
            el:"#data",//绑定id
            data:{
                price:0,
                count:0
            },
            computed:{//计算属性
                total:function(){
                    return this.price * this.count
                }
            }
            
        })
    </script>
</body>

运行结果：

在表格输入单价数量进行动态计算总价，双向数据绑定

以上就是一些部分的基本使用

似璟如你

关注

13
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
Vue的基本使用

Vue.js，简称Vue，是一款构建用户界面的渐进式框架。当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。另一方面，在与现代化工具链以及各种类库结合使用时，Vue.js 也能为复杂的单页应用提供驱动。（5）安装事件：v-on:事件名="方法名" 简写为---》@事件名="方法名"（2）属性绑定 v-bind:属性名=" "，可简写为 :属性名=" "二、引入vue.js。
复制链接

扫一扫