Vue学习~1：Vue快速入门

Posted 2020-11-29 wbyixx

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>