第一个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. 从入门到精通，Java学习路线导航（附学习资源）

    原文链接:https://blog.csdn.net/qq_42453117/article/details/100655512 引言 最近也有很多人来向我"请教",他们大都是一些 ...

  2. cdh-完整

    安装包 CLOUDERA管理安装包 http://archive.cloudera.com/cm5/cm/5/ http://archive.cloudera.com/cm5/cm/5/clouder ...

  3. StreamWriter、StreamReader

    IO流操作文件内容,using System.IO;//引入命名空间 private void button1_Click(object sender, EventArgs e) { if (text ...

  4. 在网页中嵌套网页的方法（frame）

    在网页中嵌套网页目前通用的方法是通过 frame 框架来完成,该方法有实际的应用意义.也能很好的解决一些问题. 但是 JS 在操作的时候需要同源(不能跨域), 否则一切 js 相关的操作无法完成. 切 ...

  5. 分布式-信息方式-ActiveMQ静态网络连接多线程的consumer（消费者）访问集群

    操作如下: 1:把整个conf文件夹复制一份,比如叫做conf22:修改里面的 activemq.xml文件(1)里面的 brokerName不能跟原来的重复(2)数据存放的文件名称不能重复,比如:& ...

  6. JavaWeb--Servlet 详解

    一.基本概念 Servlet是运行在Web服务器上的小程序,通过http协议和客户端进行交互.这里的客户端一般为浏览器,发送http请求(request)给服务器(如Tomcat).服务器接收到请求后 ...

  7. 套接字之close系统调用

    close系统调用用于关闭文件描述符,其系统调用实现如下所示: / * Careful here! We test whether the file pointer is NULL before * ...

  8. 选题 Scrum立会报告+燃尽图 05

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/8749 一.小组情况组长:贺敬文组员:彭思雨 王志文 位军营 杨萍队名:胜 ...

  9. TP5 未定义变量:XXX

    TP5开发模式下报错级别非常高,哪怕变量未定义都直接抛出异常 应用公共函数文件  路径: application/common.php 在common.php文件写入 // 异常错误报错级别, err ...

  10. PHP CI 框架简单使用（二）

    我们简单认识一下CI框架的MVC.示例代码如下 //CI控制器文件Home.php <?php defined('BASEPATH') OR exit('No direct script acc ...