vue2 基础指令、事件修饰符

最新推荐文章于 2024-05-01 11:45:00 发布

paidaboluo

最新推荐文章于 2024-05-01 11:45:00 发布

阅读量267

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/paidaboluo/article/details/126159582

版权

Vue.js是一套构建用户界面的渐进式框架。不仅易于上手，还便于与第三方库或既有项目整合。最重要的是在Vue中，核心的概念就是响应式，让程序员可以更多的时间去关注业务逻辑；

既我们再js中操作修改数据等等，页面自动渲染更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        // 视图
    </div>
</body>
</html>
<script src="./js/vue-2.4.0.js"></script>
<script>
let vue = new Vue({ // vue 实例
    el:'#box', // 控制的视图id
    data:{  // 数据
    },
    methods:{} // 事件
})
</script>

插值表达式、v-text、v-html、v-mode

插值表达式供我们再html代码中直接访问在vue定义好data 语法{ {}}；

后两者和js 的innerText innerHtml 一致替换元素中的内容，html后缀的能解析富文本，语法和普通指令一致如下

最后的 v-model 是数据实现双向绑定既在js中操作数据页面中的数据会变，修改页面中的数据js中定义的数据也会一起改变，故称双向

// html
<div v-cloak id="box">
    <div>插值表达式{
  {msg}}</div>
    <div v-text="'v-text文本'

最低0.47元/天解锁文章

paidaboluo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2 基础指令、事件修饰符

vue2 基础指令、事件修饰符
复制链接

扫一扫