vue

最新推荐文章于 2025-04-07 10:26:32 发布

Wolves_7

最新推荐文章于 2025-04-07 10:26:32 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Wolves_7/article/details/82763624

本文介绍Vue.js的基础概念，包括MVVM架构、基本操作、计算属性、指令如v-for和v-if的使用，以及事件处理和双向绑定等核心知识点。

vue

一种js框架

1.职责划分-MVVM

Model 模型 - 数据
View 视图 - html 标签,样式
ViewModel 用来结合模型和视图 - 决定数据展示在哪个标签上

2.vue入门基础知识

2.1 vue使用的基本操作

i.先导入vue.js
ii.Vue,实例化一个vue实例化对象(new Vue({}))
1. 新建一个vue实例化对象（Vue是一个构造函数）
2. 执行vue构造函数中每一句代码
3. 将新创建的vue实例化对象赋值给vue构造函数中的this
iii. 往vue实例化对象中传入一个对象（Vue实例化传入的对象里面的值也都为对象，以键值形式对存在，如data对象）
例如 :

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!-- 视图, 是由两个{{}}占位，到模型中找相应的数据进行展示, 匹配的是模型数据的属性名称 -->
<div id="app">{{name}}</div>

<script>
    // 每个页面要创建一个Vue对象（实例）
    var vue = new Vue({
        // 模型数据存储于data之中，其中多个属性，可以配合{{}}进行显示
        data: {
            name: "hello, world"
        },
        // el 对应的dom元素，把数据和视图结合在一起
        el:"#app"
    });
</script>
</body>
</html>

注意 :

绑定时,要把一个统一的父标签与Vue对象进行绑定
不要把Vue对象和html或body标签绑定,建议和一个div标签绑定

2.2 计算属性

{{}}中的表达式可以进行简单的运算,例如

<p>{{name.split("").reverse().join("")}}</p>
<p>{age+1}</p>

为了不要直接在视图执行这些过于复杂的计算，可以把这些计算的逻辑通过计算属性来表示

例如：

<!-- 视图, 是由两个{{}}占位，到模型中找相应的数据进行展示, 匹配的是模型数据的属性名称 -->
<div id="app">
    <p>{{nameReverse}}</p>
    <p>{{age+1}}</p>
    <div>
        <span>{{sex}}</span>
    </div>
</div>

<script>
    // 每个页面要创建一个Vue对象（实例）
    var vue = new Vue({
        // 模型数据存储于data之中，其中多个属性，可以配合{{}}进行显示
        data: {
            name: "hello, world",
            age: 18,
            sex: "男"
        },
        // el 对应的dom元素，把数据和视图结合在一起
        el:"#app",
        computed: {
            /* 计算属性，对应一个函数，由普通属性计算而来 */
            nameReverse : function(){
                // this 代表vue对象
                return this.name.split("").reverse().join("");
            }
        }
    });
</script>

2.3 v-for指令

<div id="app">
    <!-- 指令 循环指令 v-for -->
    <p v-for="p in list"> {{p.name}} , {{p.price}}, {{p.img}}</p>
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            list:[
                {name:"商品1", price:3000.00, img:"图片名1.jpg"},
                {name:"商品2", price:4000.00, img:"图片名2.jpg"},
                {name:"商品3", price:2000.00, img:"图片名3.jpg"}
            ]
        }
    });
</script>

2.4 v-if指令

<div id="app">
    <!-- 指令 循环指令 v-for -->
    <p v-for="p in list"> <div v-if="p.price>=3000">{{p.name}} , {{p.price}}, {{p.img}}</div></p>
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            list:[
                {name:"商品1", price:3000.00, img:"图片名1.jpg"},
                {name:"商品2", price:4000.00, img:"图片名2.jpg"},
                {name:"商品3", price:2000.00, img:"图片名3.jpg"}
            ]
        }
    });
</script>

v-show 指令

根据条件决定表示是否显示
注意
1.与v-if的区别在于，条件不成立时，标签根本不会出现
2.v-show是条件不成立时，隐藏了标签
3.v-show不能配合v-else 使用

2.6 v-bind 绑定属性

<table border="1" width="100%" v-show="list.length>0">
    <tbody>
        <!-- p代表数组中第i个元素，i是下标值-->
        <tr v-for="(p,i) in list">
            <td>{{i+1}}</td>
            <td>{{p.name}}</td>
            <td>{{p.price}}</td>
            
            <!-- {{}} 语法只能用来占位内容，不能作为标签的属性(特性)
                要绑定标签的属性，需要使用 v-bind:属性名="变量"

                简化写法(省略了v-bind)：
                :属性名="变量"
             -->
             
            <td><img width="110" v-bind:src=" 'images/' + p.img" :title="p.title"></td>
            <td><img width="110" :src=" 'images/' + p.img"></td>
        </tr>
    </tbody>
</table>

2.7 事件处理

<div id="app">

    <!-- 格式：        v-on:事件名
         简化写法：    @事件名
         还可以实现参数传递
    -->
    
    <input type="button" value="点我" v-on:click="abc(50)">
    <input type="button" value="点我" @click="abc(100)">
</div>

<script>
    var vue = new Vue({
        el:"#app",
        data: {
        },
        methods: {
            abc: function(i){
                console.log("点击了按钮", i);
            }
        }
    });
</script>