Vue 入门

Vue入门

渡劫，vue入门

What`s vue?

• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

  这是官网对vue的介绍，说实话每个字我都认识，但是我不理解，这算是个问题，入门以后再看吧。

How to use?

入门

• vue的入门代码很简单，如下：

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: "hello vue!"
        }
    });
</script>

• 这段看起来只是渲染字符串的代码，其实已经包含了vue的核心。vue的核心是允许采用简介的模板来声明式的将数据渲染进DOM，此时数据和DOM已经建立起了关联，所有的东西都是响应式的。

• 在控制台中，对数据的修改都会实时的显示到页面上:

  

• 什么是指令？

  • 在vue中提供了很多，v-xxx的属性，称为指令，以表示它们是VUE提供的特殊attribute，每个指令都有不同的作用，下面会列举一些常见的。
    • v-bind, <span v-bind:title="message"> -> 表示vue的message属性绑定到span title的属性，随着message的变化，span tittle也会随着变化；
    • v-if,<p v-if="seen">现在你看到我了</p> -> 判断；
    • v-for, <li v-for="todo in todos"> -> 循环；
    • v-on,<button v-on:click="reverseMessage">反转消息</button> -> 监听，比如click/blur，等等；
    • v-model,<input v-model="message"> -> 实现与表单的双向绑定；

• 什么是组件？

  • 组件的特点：小型，独立，通常可以复用。
  • 下面先看一个demo

  <div id='app1'>
      <ol>
          <demo
                  v-for="item in groceryList"
                  v-bind:todo="item"
                  v-bind:key="item.id"
          ></demo>
      </ol>
  </div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
      Vue.component('demo', {
              props: ['todo'],
              template: '<li>{{ todo.text }}</li>'
          }
      )
  
      const app = new Vue({
              el: '#app1',
              data: {
                  groceryList: [
                      {id: 0, text: '蔬菜'},
                      {id: 1, text: '奶酪'},
                      {id: 2, text: '随便其它什么人吃的东西'}
                  ]
              }
          }
      )
  </script>
  

  1. 首先先定义好组件，'demo'是组件的名称，定义好以后就可以直接在标签中引用，props是Vue自定义的属性，用于其他地方调用组件时传入动态的参数，template是组件展示的内容；
  2. 引用组件后，可以使用指令对组件进行渲染。 el的id不知道为什么我在两个页面写的，但相同以后还是出了问题；
  • 至此就定义了一个可以动态变化的组件；