Vue学习~1：Vue快速入门

0. Vue是什么

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

1. 简单地引入vue

在页面引入：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2. 声明式渲染

Vue.js 的核心是一个容许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
例如咱们先建立一个div：

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

而后定义一个Vue对象管理这个div：

var app = new Vue({
  el: '#app', // 指定要管理的元素的id
  data: { // 这个选项里声明一些数据
    message: 'Hello Vue!'
  }
})

在这段代码中，Vue对象里指定了的el选项就是这个Vue对象所管理的区域
{{message}} 这里是使用了Vue实例里data选项里定义的message属性，将message的值插入到此处，效果就是这个div的地方会自动填入message的内容

3. 属性绑定 v-bind

v-bind 能够绑定不少HTML元素的属性，经过vue实例来动态改变这些属性
v-bind:xxx 能够简写为 :xxx

4. 条件渲染 v-if

<xxx v-if="..."></xxx>

v-if里面能够写js的表达式，能够使用data选项定义的数据等等

当 v-if里的条件为真的时候，这个元素才会被加载
v-if也能够换成v-show，区别是：

• v-if 只在条件为真的时候才建立加载元素
• v-show 不论怎样都会加载元素，只是经过CSS的属性不进行显示而已

5. 列表渲染 v-for

若是要将一个数组进行显示，一个一个渲染确定不行的，以下是渲染一个图像数组

<div>
    <image v-for="(img,index) in imgList" :key="index" :src="img" />
</div>