Vue 基础知识01

Vue 是现阶段最火爆的前端语言, 作为一名开发人员,有必要熟悉这些语言新贵,方能在技术快速迭代的浪潮中不被时代抛弃。

只要你懂得前端的三驾马车和 jQuery,那么 Vue 将会快速上手。

一、Vue 的语言模板格式

作为一种在客户端处理逻辑运算和渲染的前端语言,Vue 会和HTML 语言绑定在一起。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

// 导入 Vue 的框架

<script src="./libs/vue.js"></script>

</head>

<body>

    <div id="app">

    <p>{{ msg }}</p>

    </div>

    <script>

        var vm = new Vue({
        
        // el用来绑定一个范围

        el:'#app',
        
        // data 用来定义在 HTML 中渲染的数据        

        data:{

            msg:'欢迎学习 Vue'

        }

        })

    </script>

</body>

</html>

二、常用的几个指令

v-cloak 用来解决网速比较慢的时候,前端页面出现未渲染的原始代码闪烁问题。

v-text 默认不会出现闪烁问题,会将差值表达式替换为自己的占位符。

v-html 用来将一段字符串按照 HTML 格式渲染。

v-bind 用来动态绑定一个属性,可以简写为:,只是一个单项绑定。

v-on 用来绑定一个点击事件,可以简写为@。

v-model 双向数据绑定(是 Vue 中的唯一一个有此功能的指令)。可以实现表单元素和 model 中数据的双向绑定。请注意:v-model只能运用在表单元素中。

v-for 在2.2.0+的版本中,当在组件中使用v-for时,key 是必须的。循环的时候,key属性只能会用 number类型或者string类型。key 在使用的时候,必须使用v-bind 属性绑定的形式,指定key的值。

v-if 每次都会重新删除或重建元素,有较高的的切换性能消耗。

v-show 每次不会重新进行 DOM 的创建和删除操作,只是切换了元素的dispaly:None样式。有较高的初始渲染消耗。

三、事件修饰符

常用的事件修饰符有如下几种:

.stop 组织冒泡。

.prevent 阻止默认事件。

.capture 添加事件监听器时使用事件捕获模式。

.self 只当事件在该元素本身触发时触发回调。

.once 事件只触发一次。

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值