Vue.js

Posted 2021-02-04 allenj

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

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

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

var app = new Vue({
  el: ‘#app‘,
  data: {
    message: ‘Hello Vue!‘
  }
})

指令:

v-bind  : 绑定数据

v-if ： 根据条件判断DOM以及子元素是否显示，或者删除 ，v-if = “isTrue”

v-on:click ： 绑定鼠标点击事件 ， Vue提供简单的写法 @click

v-model ： 能轻松实现表单输入和应用状态之间的双向绑定 , v-model = "name" , 当改变name的值的时候。Vue会重新渲染，显示新的值

v-for : 绑定数组列表 ， v-for = "item in items"

v-html ： 如果显示包含html，使用{{}} 指令，Vue将会当做字符串来处理。所以需要使用 v-html = ‘htmlstring‘ 来显示