系统学习VUE--（1）基本操作及指令、插值

最新推荐文章于 2024-09-11 09:13:55 发布

yuran1

最新推荐文章于 2024-09-11 09:13:55 发布

阅读量865

点赞数

分类专栏： VUE 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/yuran1/article/details/123913524

版权

VUE 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

先来张图，以最简单的方式分析VUE的工作流程，并提出两个问题。本文的重点就是对这两个问题进行分析。

问题1：什么是模板语法？怎么使用？

模板语法包括两个部分：指令和插值

插值表达式：{{}} 可以在视图中显示data中的数据，绑定的数据对象msg的值发生改变，插值的内容也会随之更新。

<div id="animal">
    <p>{{msg}}</p>  //str必须在data中存在，且{{}}中必须是一个表达式，而不是语句
</div>
<script>
    const vm = new Vue({
        el:'#app',//被称作挂载点
        data:{
            msg:'VUE'
             }
    })
</script>

指令：即带有v-前缀的特殊属性，其属性值是单一的js表达式。指令的职责是属性值发生变化时，在DOM中进行相应的操作。VUE提供了十几种指令，介绍几种最常见的指令：

1. v-bind 动态更新HTML元素上的属性

    <body>
        <div id="app">
            <a v-bind:href="url">跳转到百度页面</a>
            <a :href="url">跳转到百度页面</a>  //简写形式--语法糖
        </div>
        <script src="./js/vue.js"></script>
        <script>
            const app = new Vue({
                el:'#app',
                data:{
                   url:'https://baidu.com'
                }
            })
        </script>
    </body>

链接的href属性被动态设置了，当数据变化时，就会重新渲染。

    <body>
        <div id="app">
            <div v-bind:class="{'active':isActive}">你好呀</div>
            <div v-bind:class="[color,emUpper]">小修狗</div>
        </div>
        <script src="./js/vue.js"></script>
        <script>
            const app = new Vue({
                el:'#app',
                data:{
                   isActive:true,
                   color:'zhonghua',
                   emUpper:false
                }
            })
        </script>
    </body>

类名active依赖于数据isActive的值，当其值为true时，div会拥有类名active，为false则没有。当需要应用多个class时，可以使用数组语法，给v-bind:class绑定一个数组。也可以直接给元素绑定内联样式。

2. 条件渲染指令：v-if、v-else-if、v-else 可以根据表达式的值在DOM中渲染或销毁元素/组件。

    <body>
        <div id="app">
            <p v-if="status === 1">当status为1时显示该行</p>
            <p v-else-if="status === 2">当status为2时显示改行</p>
            <p v-else>否则显示该行</p>
        </div>
        <script src="./js/vue.js"></script>
        <script>
            const app = new Vue({
                el:'#app',
                data:{
                    status: 1
                }
            })
        </script>
    </body>

3. v-show 用法和v-if用法基本一致，只不过v-show是改变元素的CSS属性display。当v-show表达式的值为false时，元素会隐藏，查看DOM结构会看到元素上加载了内联样式 display:none。

    <body>
        <div id="app">
            <p v-show="status === 1">当status为1时显示该行</p>
        </div>
        <script src="./js/vue.js"></script>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    status:2
                }
            })
        </script>
    </body>

4. v-for 当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令v-for。

    <body>
        <div id="app">
            <ul>
                <li v-for="one in person">{{one.name + '-' + one.age}}</li>
            </ul>
        </div>
        <script src="./js/vue.js"></script>
        <script>
            const app = new Vue({
                el:"#app",
                data:{
                    person:[
                        {name:'yuran1',age:23},
                        {name:'yuran2',age:18},
                        {name:'yuran3',age:29}
                    ]
                }
            })
        </script>
    </body>

还有一些常见的指令：v-htm、v-text、v-cloak、v-once、v-pre。推荐B站上的一个视频，讲得十分详细，当然这个视频集包括VUE2+VUE3的全面知识点，很不错的学习资源~

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

问题2：什么是数据代理？原理是什么？

简单地说，数据代理就是通过一个对象对另一个对象中的数据进行操作。

const vm = new Vue({
    el:'#app',
    data:{
        msg:'你好呀~'
    }
})

从代码中可以看到Vue()中包含一个对象，这个对象称为配置对象。那么vm对象和配置对象是不是同一个东东？答案：NO

vm代理了配置对象中data的数据，因而vm身上也有和data当中同名的属性。在模板中访问的都是vm身上的属性，修改vm的属性数据其实就是在修改配置对象中data的数据。

学校的小猫咪太治愈了~

yuran1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录