VUE

• 这是一个后端可食用的VUE笔记，大概吧...

1. 组成

• VUE的组成主要分成两个部分

  • 视图

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

  • 脚本

    var app = new Vue({
        el: '#app',			//el属性挂载的值要跟html的id对应
        data: {
          message: 'Hello Vue!'
        }
      })
    

<div id="app-2">
  <span v-bind:title="message">
      <!--v-bind: 将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致” -->
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
  </div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

2. 条件与循环

2.1 条件

<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
  </div>

var app3 = new Vue({
    el: '#app-3',
    data: {
      seen: false
    }
  })

• 通过v-if将这个元素节点与seen进行绑定，当seen的值为true时，这句话才会显示

2.2 循环

<div id="app-4">
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
  </div>

var app4 = new Vue({
    el: '#app-4',
    data: {
      todos: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue' },
        { text: '整个牛项目' }
      ]
    }
  })

• 如果在使用 v-for 渲染列表时不提供 key 属性，Vue.js 会发出警告，提示开发者为每个列表项提供一个唯一的 key 值。这是因为不使用 key 属性可能会导致渲染错误和性能问题。

• 当不使用 key 属性时，Vue.js 无法准确地跟踪每个列表项的变化。这可能会导致列表渲染出现错误，例如列表项的顺序错误、列表项的内容错误等。此外，不使用 key 属性也会影响 Vue.js 的性能，因为 Vue.js 无法复用已有的 DOM 元素，而需要重新创建新的元素。

• 因此，强烈建议在使用 v-for 渲染列表时为每个列表项提供一个唯一的 key 值。

3. 处理用户输入

• 这里用到了v-on添加了一个事件监听器，当click事件触发的时候，执行reverseMessage的方法

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转消息</button>
  </div>

var app5 = new Vue({
    el: '#app-5',
    data: {
      message: 'Hello Vue.js!'
    },
    methods: {
      reverseMessage: function () {
        this.message = this.message.split('').reverse().join('')
      }
    }
  })

• v-model指令可以实现表单输入和应用状态的双向绑定，图示案例中v-model通过监听message变量的变化，从而实时更新message的值

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

4. 组件化应用构建

• 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例

//这里定义了一个todo-item的组件
Vue.component('todo-item', {
    // todo-item 组件现在接受一个
    // "prop"，类似于一个自定义 attribute。
    // 这个 prop 名为 todo。
    props: ['todo'],
    //这里定义了这个组件的模板
    template: '<li>{{ todo.text }}</li>'
  })

<div id="app-7">
    <ol>
      <!--
        现在我们为每个 todo-item 提供 todo 对象
        todo 对象是变量，即其内容可以是动态的。
        我们也需要为每个组件提供一个“key”
		在 Vue.js 中，当使用 v-for 渲染列表时，需要为每个列表项提供一个唯一的 key 属性。这是因为 Vue.js 使用一种基于“就地更			新”的策略来更新列表渲染，即当数据发生变化时，Vue.js 会尽量复用已有的 DOM 元素，而不是重新创建新的元素。
		为了实现这种复用，Vue.js 需要能够区分不同的列表项。这就是 key 属性的作用。通过为每个列表项提供一个唯一的 key 值，				Vue.js 能够准确地跟踪每个列表项的变化，并进行高效的更新。
      -->
      <todo-item
              v-for="item in groceryList"
              v-bind:todo="item"
              v-bind:key="item.id"
      ></todo-item>
    </ol>
  </div>

var app7 = new Vue({
    el: '#app-7',
    data: {
      groceryList: [
        { id: 0, text: '蔬菜' },
        { id: 1, text: '奶酪' },
        { id: 2, text: '随便其它什么人吃的东西' }
      ]
    }
  })