Vue.js(Ⅰ）

最新推荐文章于 2024-09-19 20:02:26 发布

zhanghuali2019

最新推荐文章于 2024-09-19 20:02:26 发布

阅读量218

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js

本文链接：https://blog.youkuaiyun.com/zhanghuali0210/article/details/79532529

vue.js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了Vue.js框架的核心概念及基本用法，包括Vue对象的属性、数据绑定、条件渲染、列表渲染、事件处理等关键特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、什么是vue.js?

官网的定义是：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、vue.js的基本语法。

注意：编写vue.js代码之前应该先添加vue.js库。

1. Vue对象里的属性有那些？

<body>
    <div id="start"></div>
    <script>
        new Vue({
            el:"#start",            //相当于vue.js作用的开始
            data:{
                a:"hello",          //a,b,c相当于定义的变量，用来存储数据
                b:[
                    {"name":"张三","sex":"女"},
                    {"name":"李四","sex":"男"}
                ],
                c:"Tom"
            },
            method:{
                //里面存储各种方法
                add:function(){
                    return this.a+this.c
                }
            },
            computed:{  
                //这是计算属性
            }
        })
    </script>
</body>

2. 那么vue()中的数据怎么在页面显示呢？是通过一些指令来实现的。

（1）v-bind :这是对标签属性的绑定操作。

<body>
    <div id="start">
        <a v-bind:href="a">百度</a>
     a:"http://www.baidu.com"
            },
        })
    </script>
</body>

<a :href="a>百度</a>                //这是v-bind的缩写

（2）v-model :给input使用，数据绑定模块。

<body>
    <div id="start">
        <input v-model="msg">
        <p>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el:"#start",            //相当于vue.js作用的开始
            data:{
               msg:"hello"
            },
        })
    </script>
</body>

结果如下：

如果我们修改文本框的内容，那么文本框下面的内容也会改变，所以我们可以知道数据的绑定是双向的。

（3）v-if：条件循环指令。

<body>
    <div id="start">
        <p v-if="msg">hello</p>
    </div>
    <script>
        new Vue({
            el:"#start",            //相当于vue.js作用的开始
            data:{
               msg:true
            },
        })
    </script>
</body>

如果msg的值为true则显示文本内容hello，如果为false，则文本不现实。

（4）v-for:循环指令。

<body>
    <div id="start">
        <p v-for="da in student">
            <span>{{da.name}}</span> <span>{{da.sex}}</span>
        </p>
    </div>
    <script>
        new Vue({
            el:"#start",            //相当于vue.js作用的开始
            data:{
               student:[
                   {"name":"Tom","sex":"男"},
                   {"name":"Jeery","sex":"女"},
                   {"name":"Bob","sex":"男"}
               ]
            },
        })
    </script>
</body>

为了看到效果我们可以看浏览器便宜的结果：

（5）v-on：用于监听DOM事件。

<body>
    <div id="start">
        <input type="text" id="in">
        <input type="button" value="查询" v-on:click="time()">
    </div>
    <script>
        new Vue({
            el:"#start",            //相当于vue.js作用的开始
            data:{
               time:function(){
                   var date=new Date();
                   $("#in").val(date)
               }
            },
        })
    </script>
</body>

点击页面上的查询an'n结果显示为：

（6）v-html：添加html元素。

<body>
    <div id="start" v-html="list"></div>
    <script>
        new Vue({
            el:"#start",            //相当于vue.js作用的开始
            data:{
               list:"<p>v-html指令添加元素</p>"
            },
        })
    </script>
</body>

查看浏览器编译结果：

（7）v-text：向页面添加文本信息。

<body>
    <div id="start" v-text="list"></div>
    <script>
        new Vue({
            el:"#start",            //相当于vue.js作用的开始
            data:{
               list:"<p>v-html指令添加元素</p>"
            },
        })
    </script>
</body>

页面显示结果为：

（8）v-once：执行一次性插值。

注意：当数据改变时，数据不会继续更新。

<body>
    <div id="start">
        <input type="text" v-model="msg">
        <p v-once>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el:"#start",            //相当于vue.js作用的开始
            data:{
               msg:"hello"
            },
        })
    </script>
</body>

结果显示，如果我们修改文本框的值，并不会改变文本框下面的值，当去掉v-once，则文本框下面的值会随之改变。