第一个vue程序

<body>

    <div class="app">

        {{message}}--{{message+','+message}}

        <div :id='message' v-if="showMessage">{{title}}</div>

        <div v-else style="text-decoration: line-through;">{{title}}--{{title}}</div>

        <div :id='message' v-show="showMessage">{{title}}</div>

    </div>

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

    <script>

        var vm = new Vue({

            el:'.app',

            data:{

                message:'hello world',

                showMessage:false,

                title:"是否删除"

            }

        })

    </script>

</body>
  • 里面的el可以是id属性，也可以是class属性，如id="app",则el:'#app',如果class="app",则el:'.app'
  • 指令v-if和v-show:v-if判断为false，则不加入到页面dom节点中，而v-show则只是设置该div或其他标签的display:none

第一个vue程序(极客时间Vue视频笔记)的更多相关文章

  1. 极客时间-vue开发实战学习（ant-design vue作者）

    vue基础 属性 事件 插槽 指令(Directives) 生命周期 底层原理 vue生态 路由管理器vue Router 状态管理器vuex 同构Nuxt vue实战 实战项目-ant-desing ...

  2. vue插槽用法(极客时间Vue视频笔记)

    vue插槽 插槽是用来传递复杂的内容,类似方法 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. vue组件事件(极客时间Vue视频笔记)

    vue组件核心:事件 <body> <div class="app"> <todo-list></todo-list> {{mess ...

  4. vue组件注册(极客时间Vue视频笔记)

    vue组件注册 组件是为了方便代码复用,只需引入组件即可在不同的地方使用想同的功能代码 <body> <div class="app"> <todo- ...

  5. java爬虫系列第四讲-采集"极客时间"专栏文章、视频专辑

    1.概述 极客时间(https://time.geekbang.org/),想必大家都知道的,上面有很多值得大家学习的课程,如下图: 本文主要内容 使用webmagic采集极客时间中某个专栏课程生成h ...

  6. 极客时间_Vue开发实战_汇总贴

    视频地址: https://time.geekbang.org/course/intro/163 https://github.com/tangjinzhou/geektime-vue-1 电脑dem ...

  7. 左耳朵耗子：我为什么要在极客时间 App 开设独家专栏？

    参考链接:https://www.infoq.cn/article/2018/01/why-geektime 不少朋友都知道我在极客时间App 上开了一个收费专栏<左耳听风>,这个专栏会开 ...

  8. 极客时间 Mysql实战45讲 07讲行锁功过：怎么减少行锁对性能的影响笔记 极客时间

    极客时间 Mysql实战45讲 07讲行锁功过:怎么减少行锁对性能的影响笔记 极客时间极客时间 Mysql实战45讲 07讲行锁功过:怎么减少行锁对性能的影响笔记 极客时间 笔记体会: 方案一,事务相 ...

  9. Mysql实战45讲 06讲全局锁和表锁：给表加个字段怎么有这么多阻碍 极客时间 读书笔记

    Mysql实战45讲 极客时间 读书笔记 Mysql实战45讲 极客时间 读书笔记 笔记体会: 根据加锁范围:MySQL里面的锁可以分为:全局锁.表级锁.行级锁 一.全局锁:对整个数据库实例加锁.My ...

随机推荐

  1. buunctf@reverse2

  2. jsp九大内置对象及四个作用域【转】

    1.Request对象 该对象封装了用户提交的信息,通过调用该对象相应的方法可以获取封装的信息,即使用该对象可以 获取用户提交的信息. 当Request对象获取客户提交的汉字字符时,会出现乱码问题,必 ...

  3. FM算法详解

    https://blog.csdn.net/jediael_lu/article/details/77772565 https://blog.csdn.net/bitcarmanlee/article ...

  4. k8s-for批量拉取国内镜像并做tag标签

    kubeadm config images list  ##查看所需镜像 如果是1.15 或者是其他就需要改改 又或者是下面的国内的镜像地址不能用了 百度完改改就ok   #!/bin/bash im ...

  5. vue-upload 封装组件-上传组件

    我后端的,刚接触vue个星期,根据需求写了个上传控件,很灵活的.没有看element el-upload源码,样式用的element的.感觉vue确实好用. 先看样子: <!-- 单文件上传组件 ...

  6. SpringBoot项目中，异常拦截

    SpringBoot自带异常拦截@ControllerAdvice 1.创建一个SellerExceptionHandler类打上@ControllerAdvice标签 @ControllerAdvi ...

  7. poj 1017 装箱子（模拟+贪心）

    Description A factory produces products packed in square packets of the same height h and of the siz ...

  8. python实现的一个中文文本摘要程序

    文本摘要方法有很多,主要分为抽取式和生成式,应用比较多的是抽取式,也比较简单,就是从文本中抽取重要的句子或段落.本方法主要是利用句子中的关键词的距离,主要思想和参考来自阮一峰的网络日志http://w ...

  9. spring aop 实现controller 日志

    @Aspect @Component @Slf4j public class ControllerAspact { @Pointcut("execution(public * com.exa ...

  10. UE4添加模块

    添加模块在这篇文章里已经有详细的描述了: https://orfeasel.com/creating-custom-modules/ 但是这篇文章中少写了一个步骤: 最后要在 <工程名>E ...