小白学 VUE 系列之vue 是什么

Vue 是什么

是一套用于构建用户界面的渐进式框架 ,Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合

包含了如下特点

  • 条件
  • 循环
  • 组件
  • 用户输入
  • 计算属性
  • 样式
  • 组件

等特点响应式处理。

条件判断

<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>

用户输入

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

计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

样式

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<div v-bind:class="[activeClass, errorClass]"></div>

组件

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

通过插件

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。