Vue的入门——基本语法（上）

Vue 基本语法

(一) 声明式渲染

一般简单的语法是两组大括号包裹值，来声明式地将数据渲染进 DOM 的系统，接下来是指令式。

绑定元素的方式：使用指令

<title>Title</title>

 </head>
  <body>
    <div id="hello">
      <span v-bind:title="content">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
      </span>
    </div>
    <script>
      var vm = new Vue({
        el: "#hello",
        data: {
          content: "哈哈哈哈哈哈哈哈" ,

        },
      });
    </script>

观察结果，我们将鼠标悬停在文字上方，被绑定的数据就会出现

看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute，代码的意思就是将这个元素节点的 title attribute 和 Vue 实例的 content property 保持一致”

如果在控制台进行修改 vm.content 的值，绑定的数据会发生变化

注：使用 v-bind 需要头部引入一个约束

(二) 条件判断

条件判断使用的指令就是 v-if 、v-else-if、v-else

先看两个例子，首先是对于 true 或者 false 的判断

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="hello-3">
      <h2 v-if="isBoy">是男孩</h2>
      <h2 v-else>是女孩</h2>
    </div>

    <script>
      var vm = new Vue({
        el: "#hello-3",
        data: {
          isBoy: true,
        },
      });
    </script>

默认显示是的是男孩，在控制台修改为false，即使女孩

对于值的判断，我们拿一个比较成绩的例子，数值不够严谨，理解就好。

 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <div id="hello-3">
    <h2 v-if="score < '60'">成绩不及格</h2>
    <h2 v-else-if="score >= '60' && score < '80'">成绩及格</h2>
    <h2 v-else>成绩优秀</h2>
  </div>
  <script>
    var vm = new Vue({
        el: "#hello-3",
        data:{
            score: 66
        }
    })
  </script>