vue day1

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_30897079

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lwwnuo/p/7763303.html

本文介绍了Vue.js框架的基本概念及其特点，包括简单的上手难度、轻量级的设计以及丰富的组件资源。此外还详细讲解了Vue.js中常用的数据绑定与控制指令，如v-text、v-html、v-if、v-show等。

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

一、什么是vue
    是一个mvvm模型的js框架(m--->model v-->view)
    model本质上来说就是数据
    view就是视图（及最终展现给客户的页面）

    mv   model--->view(由数据驱动视图)
    vm   view---->model(由视图通过事件更新数据)

    特点是
        01.简单上手容易
        02.比较的轻量级（相对于AngularJs、ReactJs...）
        03.组件齐全，文档便于阅读
二、vue的一些基本指令
    01->v-text
        绑定标签的内容,如果变量中有特殊字符，会进行转义直接以字符串的形式输出到标签中
    02->v-html
        绑定标签内容，变量中的内容不会进行转义
    03->v-if
        v-if="value"
        value Boolean true/false
        控制元素的显示与隐藏
    04->v-show
        控制元素的显示与隐藏

        v-if（虚拟dom元素）和v-show有什么区别？

    05->v-for 列表渲染
        01.渲染数组 v-for="item in arr"
        02.渲染对象 v-for="item in obj"

    06.v-bind
        1->为标签绑定属性
            new Vue({
                el:".box",
                data:{
                    src:"img/1.jpg
                }
            })
            <img v-bind:src="src" />
        2->v-bind的简写形式
            <img :src="src" />
    07.v-bind绑定class类名
        <div :class=""></div>