3 min read 次阅读

使用

CDN

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

数据绑定

括号绑定

{{message}} //括号中可使用表达式 如 {{message+ message}}

指令式绑定

<div v-bind:id="message"></div>

简写形式

<div :id="message"></div>

这里我们遇到了一点新东西。你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message 属性保持一致”。

响应式

可以这样理解：当一个状态改变之后，与这个状态相关的事务也立即随之改变，从前端来看就是数据状态改变后相关 DOM 也随之改变。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。

v-if v-else v-show v-for

  <body>
    <div id="app">
      {{message}}{{message+ message}}
      <div :id="message"></div>
      <ul>
        <li v-for="item in list">
          <span v-if="!item.del">{{item.title}}</span>
          <span v-else style="text-decoration: line-through;">{{item.title}}</span>
          <button v-show="!item.del">删除</button>
        </li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          message: "Hello World",
          list: [
            {
              title: "课程1",
              del: false,
            },
            {
              title: "课程2",
              del: true,
            },
          ],
        },
      });
    </script>
  </body>
HTML

组件

     Vue.component("todo-item",{
        props:{
          title: String,
          del: {
            type: Boolean,
            default: false,
          },
        },
        template: `
         <li >
          <span v-if="!del">{{title}}</span>
          <span v-else style="text-decoration: line-through;">{{title}}</span>
          <button v-show="!del">删除</button>
        </li>
        `,
          data: function(){
            return {}
          },
          methods: {

          },
      })

      Vue.component("todo-list", {
          template: `
           <ul>
            <todo-item v-for="item in list" :title="item.title" :del="!item.del"></todo-item>
          </ul>
        `,
          data: function () {
            return {
              list: [
                {
                  title: "课程1",
                  del: false,
                },
                {
                  title: "课程2",
                  del: true,
                },
            ]}
          }
        })
HTML

组件中data 不能使用同一个data,因为pass by reference ，在一个地方改变，其他地方也会改变。data要求唯一化。

I am a real pikachu!