Vue介绍

Vue是一套用于构建用户界面的渐进式框架。

集成Vue.js

可以直接通过script导入

• 开发环境，包含了有帮助的命令行警告 https://cdn.jsdelivr.net/npm/vue/dist/vue.js
• 生产环境，优化了size和速度 https://cdn.jsdelivr.net/npm/vue

渲染字符串模板

创建一个Vue对象，通过id关联，就可以渲染字符串模板，修改app.message后，页面上的内容也会更新，不用操作dom。

<div id="app">{{ message }}</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue'
    }
  })
</script>

v-bind:绑定元素特性(属性)

除了上面例子中的文本插值，还可以通过v-bind:绑定动态的属性值。修改app2.message，对于的信息也会更新。

<div>
  <span v-bind:title="message">
    鼠标悬停几秒查看此处动态绑定的title消息
  </span>
</div>
<script>
  var app2 = new Vue({
    el: '#app-2',
    data: {
      message: '页面加载于' + new Date().toLocaleString()
    }
  })
</script>

v-if与v-for

条件判断与循环, v-if可以控制是否显示某个元素。v-for可以遍历一个数组，修改对应的data，页面上的内容也会直接改变。

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

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
<script>
  var app3 = new Vue({
    el: '#app-3',
    data: {
      seen: true
    }
  })

  var app4 = new Vue({
    el: "#app-4",
    data: {
      todos: [
        { text: '学习js' },
        { text: '学习Vue' },
        { text: '整个项目' }
      ]
    }
  })
</script>

v-on:绑定事件、v-model绑定输入内容

• 用v-on:指令添加一个事件监听器，通过它调用在Vue实列中定义的方法。
• v-model指令，可以轻松实现表单输入和应用之间的双向绑定。

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

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
<script>
  var app5 = new Vue({
    el: '#app-5',
    data: {
      message: "Hello Vue.js!"
    },
    methods: {
      reverseMessge: function() {
        this.message = this.message.split('').reverse().join('')
      }
    }
  })

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

自定义组件

Vue.component() 创建组件并使用

<div id="app-7">
  <ol>
    <todo-item></todo-item>
  </ol>
</div>
<script>
  // 定义一个todo-item的组件
  Vue.component('todo-item', {
    template: '<li>只是个代办项</li>'
  })

  // 上面定义的组件，如果想应用到页面，<todo-item>的父元素必须绑定到vue上。
  var app7 = new Vue({
    el: '#app-7',
    data: {
    }
  })
</script>

props向组件内部传值

定义组件时，使用props定义某些特性(属性)，使用组件时通过v-bind传入该属性的值即可。

<div id="app-8">
  <ol >
    <todo-item v-bind:todo="item1"></todo-item>
    <todo-item v-bind:todo="item2"></todo-item>
  </ol>
</div>
<script>
  // 定义一个todo-item的组件
  Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
  })

  var app8 = new Vue({
    el: '#app-8',
    data: {
      item1: { text: "苹果" },
      item2: { text: "橘子" },
    }
  })
</script>

项目组件模板

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

与Web Components关系

• Web Components 规范已经完成并通过，但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下，Vue 组件不需要任何 polyfill，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。

• Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。