# 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 组件提供了纯自定义元素所不具备的一些重要功能,最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

上次更新: 10/29/2020, 10:59:19 PM