Vue

最新推荐文章于 2023-03-19 08:47:08 发布

Will1997

最新推荐文章于 2023-03-19 08:47:08 发布

阅读量148

点赞数

分类专栏： JavaEE学习总结

本文链接：https://blog.csdn.net/qq_42371269/article/details/82588057

版权

JavaEE学习总结专栏收录该内容

23 篇文章 9 订阅

订阅专栏

VUE: 是一套构建用户界面的渐进式框架

MVVM：

M： model 模型数据

V： view 视图（html标签-样式）

VM： view-model 用来结合模型数据和视图的，决定数据将在视图的哪个标签上显示

vue中的数据和页面上标签的内容是 “ 绑定 ”在一起的，模型数据发生变动时，视图也会发生相对应的变化（响应式框架）

使用vue：

1：创建 vue 对象 var v = new Vue();

2：绑定标签 el: "匹配标签"

3：展示数据 {{ 数据属性 }}

例子：


<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <script src="js/vue.js"></script>  <!--导入 vue.js 的包-->
    </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>

*****注意：
1. 绑定时，要把一个统一的父标签与Vue对象进行绑定
2. 不要把Vue对象和html或body标签绑定，建议和一个div标签绑定

vue的一些常用属性：

data数据属性：将视图的数据抽象出来存放在data中,存放模型数据的属性值,

el属性：用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符

computed计算属性：用来执行一些复杂的计算属性

methods方法属性: 放置页面中的业务逻辑，js方法一般都放置在methods中

<!-- 视图, 是由两个{{}}占位，到模型中找相应的数据进行展示, 匹配的是模型数据的属性名称 -->
<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>

vue一些常用的指令：

1：v-for 指令用于循环遍历对象相当于 for 循环


<div id="app"> 

    <!-- 指令 循环指令 v-for    格式： " 临时变量   in  需要遍历的对象 " -->
    <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：v-if 用于判断条件条件成立，则在视图上就显示此标签，否则该视图上不会此标签

一般与 v-else 连用

<div id="app">
                     <!-- 格式： v-if=" 条件表达式 "  -->
    <table border="1" width="100%" v-if="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>
                <td>{{p.img}}</td>
            </tr>
        </tbody>
    </table>

     <!-- v-if 一般配合 v-else 一起使用-->    
    <span v-else>暂无商品</span>
</div>

3：v-show 也是用于条件判断，如果条件成立，则在视图上显示出来，否则不显示

但不能配合 v-else 一起使用

***** v-if 与 v-show 的区别：

相同：都是用于判断条件是否成立，成立则将数据在视图中显示出来

不同：当条件不成立时，v-if 的标签不会在源代码中出现

而 v-show 则是将标签隐藏了起来，而且 v-show 不能配合 v-else 一起使用

4： 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:" 变量 "
                简化写法(省略了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>

5：v-on 用于处理事件

v-on:click = " 调用的方法 "

v-on:keyup= " 调用的方法 "

...

<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属性：放置页面中的业务逻辑，js方法一般都放置在methods中
        methods: {
            abc: function(i){
                console.log("点击了按钮", i);
            }
        }
    });
</script>

6 : v-model : 双向绑定模型的修改能够立刻反应到视图，但视图的修改也影响模型

模型 <=====> 视图

v-bind: 单向绑定，模型的修改能够立刻反应到视图，但视图的修改不能影响模型

模型 =====> 视图