Vue学习笔记

1. 声明式渲染

插值绑定

<div id="app">
  {
   {
    message }}
</div>

<script>
var app = new Vue({
   
  el: '#app',  //记得加#
  data: {
   
    message: 'Hello Vue!'
  }
})
 </script>

v-bind

单向绑定（v-bind）：数据只能从data流向页面

<div id="app-2">
//title 属性是一种用于提供额外文本描述的 HTML 属性，当用户将鼠标悬停在具有 title 属性的元素上时，浏览器会显示该属性的值作为工具提示。
  <span v-bind:title="message">//指令带有前缀 v-
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

<script>
var app2 = new Vue({
   
  el: '#app-2',
  data: {
   
    message: '页面加载于 ' + new Date().toLocaleString()
    // "页面加载于 " 加上当前日期和时间的本地化字符串
  }
})
 </script>

缩写：

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

2. 条件渲染与列表渲染

v-if

 <div id="app-3">
        <p v-if="seen">现在你看到我了</p>
    </div>
    
    <script>
        var app3 = new Vue({
   
            el: '#app-3',
            data: {
   
                seen: true
            }
        })
    </script>

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？

可以把一个 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 元素。

<template v-if="ok">
  <h1></