Vue基础语法

首先在页面上引入需要的JS:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

第一个为开发环境版本，包含了有帮助的命令行警告，第二个为生产环境版本，优化了尺寸和速度
刚开始学习阶段建议引入开发环境版。

首先看Vue的核心：通过简洁的模板语法({{}})将数据渲染到DOM中，如下：

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

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

接下来再来看Vue的基本语法：

基本语法之v-if:

<div id="app-3">
  <p v-if="seen">现在你看到A了</p>
  <p v-else="!seen">现在你看到B了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

v-if后面写的值需要为Boolean，也可以为表达式但返回的值需要为Boolean，例如：

<div id="app-3">
  <p v-if="type=='1'">现在你看到A了</p>
  <p v-else-if="type=='2'">现在你看到B了</p>
  <p v-else="type=='3'">现在你看到C了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    type: "1"
  }
})

注意：v-if单独使用时效果与v-show相同，v-if本质是销毁DOM元素，而v-show则是设置DOM元素的style="display:none"

基本语法之v-for:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

v-for是将当前标签根据数组元素循环。以上循环部分的代码相当于：

<li>
    学习 JavaScript
</li>
<li>
    学习 Vue
</li>
<li>
    整个牛项目
</li>

其中todo相当于遍历的数组中的每一条元素，todo可以为对象也可以为字符串

同时还可以添加索引例如:

<li v-for="(todo,index) in todos">
    {{index}} - {{ todo.text }}
</li>

以上就是vue中基本语法的应用了