Vue.js 的基本语法与属性

最新推荐文章于 2023-08-04 19:23:38 发布

sl105105

最新推荐文章于 2023-08-04 19:23:38 发布

阅读量286

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/sl105105/article/details/126043364

版权

先了解vue 是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

有兴趣的同学也可去Vue官网去了解一下,地址黏贴如下:

Vue.js 官方网址: 介绍 — Vue.js

我们在使用Vue要先引入vue,在官方他给出了两种引入方式:

第一种:

开发环境版本

这种对于我们新手来说更适合,因为样式相对来说较全面,而且会有对应注释,帮助我们理解,比较推荐

< script src = " https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js " > </ script >

第二种:

生产环境版本

这个在我们熟练掌握就可以使用如下的引入,性能比较节约,方便我们打包,速度较快

< script src = " https://cdn.jsdelivr.net/npm/vue@2 " > </ script >

引入过后我们来了解一下如何运用

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统,如下,我们已经创建了第一个vue的应用,vue里面的数据与DOM已经建立了关联,所有东西都是响应式的.

注意点是我们不在和HTML直接交互了,我们会将HTML通过Vue的el挂载点的方式将div挂载在Vue上,在通过{{}}的方式插值在元素上.这样简单地响应式交互就完成了

<body>

</div>

let app = new Vue({

// 挂载点

el: "#app",

// 定义数据

// 数据驱动视图

data: {

msg: "小明"

}

})

</script>

</body>

data是定义数据,以数据驱动视图

methods是定义方法,对于方法的定义都可以放在 methods里面存放

对于函数我们也可以使用es6的方式简写,对比如下,节省代码,也是比较推荐的写法,在工作中我们也是大量运用的

重点:关于在vue使用this的关键点在于,其中的this指向的是vue上下环境中的元素,获取的是vue中的属性与方法,所以有这个了解我们在调用方法或者属性才能手拿把掐.

vue的指令

添加一个事件监听器:v-on:事件

可以简写为@事件,注意点不论是什么事件都不要在加on,我们以点击事件来做个举例说明,如下:

添加文本或标签v-text / v-html

这两个注意点是一个只能添加文本内容 v-text,而 v-html则可以在插入文本内容的时候解析标签

更改元素样式,动态绑定:v-bind:src=""(简写:src="")

还有多重样式绑定如下:了解一下就行

还有动态绑定style,如果样式多还是推荐使用class引入样式,如果不多可使用行内样式style,如下:

条件与循环: v-if=""/v-else=""/v-else-if

一般用来判断条件,可以增加条件,也可多重判断


<body>
    <div id="app">
        <button @click="add">+</button>
        <span>{{status}}</span>
        <span v-if="status>=5">你可真棒,小伙计</span>
        <span v-else="status<=6">还得是你,小老弟</span>
        <button @click="sub">-</button>
    </div>
    <script src=" https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let app = new Vue({
            // 挂载点
            el: "#app",
            // 定义数据
            // 数据驱动视图
            data: {
                status: 1
            },
            methods: {
                add() {
                    // console.log(this.add);
                    if (this.status < 10) {
                        this.status++
                    } else {
                        this.status = 10
                    }
                },
                sub() {
                    // console.log(this.sub);
                    if (this.status > 1) {
                        this.status--
                    } else if (this.status = 1) {
                        this.status = 1
                    }
                }
            }
        })
    </script>
</body>

用于元素的显示与隐藏v-show=""

一般是通过判断条件,来切换显示与隐藏

v-if和v-show的区别

v-if频繁的切换,因为是通过删除元素节点的方法,比较消耗性能,推荐在首次渲染的时候使用

v-show在频繁切换的时候,因为是通过样式的控制,对性能的影响更小,适合频繁的切换

绑定数组的数据: v-for

可以绑定数组的数据来渲染一个项目的列表

在使用v-for时必须提供key,要用字符串或者数值类型的值

实现表单输入和应用状态的双向绑定:v-model

获取value的语法糖,来取代@input=""

sl105105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 的基本语法与属性

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统,如下,我们已经创建了第一个vue的应用,vue里面的数据与DOM已经建立了关联,所有东西都是响应式的.注意点是我们不在和HTML直接交互了,我们会将HTML通过Vue的el挂载点的方式将div挂载在Vue上,在通过{{}}的方式插值在元素上.这样简单地响应式交互就完成了。v-show在频繁切换的时候,因为是通过样式的控制,对性能的影响更小,适合频繁的切换。在使用v-for时必须提供key,要用字符串或者数值类型的值。...
复制链接

扫一扫