Vue learning ~ 1: Vue Getting Started

What is 0. Vue

Is a progressive frame for constructing a user interface
with other large frame difference is, Vue is designed to be applied from the bottom up layer by layer
Vue core library only concerned view layer, not only easy to use, and also facilitate third party libraries or both projects to integrate
the other hand, when used in conjunction with a modern tool chain and various support libraries, Vue also fully capable of providing drive for complex one-page application

1. Simple introduction vue

In the introduction page:

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

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

2. Statement rendering

The core Vue.js that allows the use of a simple declarative syntax template to render data into the DOM system
for example, we first create a div:

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

Then define a Vue Object Management this div:

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

In this code, the objects in the specified Vue is this option Vue el area managed object
{{message}}here is to use the data in the message attribute instance Vue options defined in the value of the message is inserted into here, the effect is the div the place will automatically fill in the contents of the message

3. The property is bound v-bind

v-bindYou can bind many attributes of HTML elements to dynamically change these properties vue examples
v-bind:xxxcan be abbreviated as:xxx

4. Rendering v-if condition

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

v-if you can write an expression inside js, you can use data options defined data, etc.

When the v-if in the condition is true, this element will be loaded
v-if can be replaced with v-show, the difference is:

v-if only condition is true when it creates a load element
v-show no matter what the elements are loaded, just not displayed via CSS properties only

5. Render v-for list

If you want to display an array, one by one, certainly not rendered, the following is a rendering of an image array

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