zoukankan      html  css  js  c++  java
  • 参考书籍《Vue.js快跑:构建触手可及的高性能Web应用》第1章 Vue.js基础-----1-3模板(Template)、数据(Data)和指令(Directive)

    Vue的核心是将数据显示在页面上,这一功能通过模板实现。为正常的HTML添加特殊的属性——被称作指令——借助它来告诉Vue我们想要实现的效果以及如何处理提供给它的数据。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>模板,数据和指令</title>
    </head>
    
    <body>
      <div id="app">
        <p>第二本书的名字:{{ books[1] }}</p>
        <p>所有书的名字:{{ books }}</p>
    
    
        <p v-if="path === '/'">你正位于首页</p>
        <p v-else>{{ path }}</p>
    
        
      </div>
    
      <script src="https://unpkg.com/vue"></script>
      <script>
        new Vue({
          el: "#app",
          data: {
            path: location.pathname,
            books:["《茶馆》", "《龙须沟》", "《四世同堂》", "《骆驼祥子》"]
          }
        })
      </script>
    </body>
    
    </html>

    重点:

    1. data对象,我们通过它告诉Vue想在template上显示哪些内容。
    2. 在template中使用v-if指令来根据变量的值显示,v-if属性的元素只有传递给指令的值为真时才会显示。
    3. v-else。当用在带有v-if指令的元素之后时,它的表现和一个if-else语句中的else语句一样。
    4. 如果将整个数组或对象输出到页面上,Vue会输出JSON编码后的值。在调试时,这样做比将日志输出到控制台更加有效,因为页面显示会随着值的变化而更新。
  • 相关阅读:
    账户余额查询SQL(分类帐)
    基本值集定义
    EBS 各模块数据传送至总帐 需要运行的请求
    OU、库存组织与子库存
    AP 付款凭证
    WIP 完工入库单
    R12客户表结构分析
    ORACEL R12 总账和子账的关系
    JavaScript(转)
    ftp服务自动上传6410版子上的开发环境的设置
  • 原文地址:https://www.cnblogs.com/cuilichao/p/14892507.html
Copyright © 2011-2022 走看看