Vue基本语法篇（一）

一、什么是Vue

Vue是一套用于构建用户界面的渐进式框架；

它只关注视图层，采用自底向上增量开发的设计；

它的目标是通过尽可能的简单API实现响应的数据绑定和组合的视图组件；

二、Vue基本语法

（注意Vue每次写完语法，都要保存网页才可以加载出来快捷键为Ctrl+s）

1、数据绑定

第一种数据绑定为一组花括号{ {}}，但是这里一组指的是两个{}，为单向数据绑定。

网页图：

第二种数据绑定为v-text，v-html

网页图：

2、属性绑定

网页图：

2.1  绑定class

​
<template>
  <div id="app">
   <div v-bind:class="name"></div>

   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name:"car"
    }
  }
}
</script>

<style>
.car{
  width:150px;
  height:100px;
  border:1px solid greenyellow;
}
</style>

​

网页图

2.2  多个类进行绑定

​
<template>
  <div id="app">
   <!-- 绑定class -->
   <div v-bind:class="name"></div>
   <!-- 多个类进行绑定 -->
   <div v-bind:class="{'box1':t2,'box2':t1}"></div>
   

   </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      name:"car",
      t1:true,
      t2:false

    }
  }
}
</script>

<style>
.car{
  width:150px;
  height:100px;
  border:1px solid greenyellow
}
.box1{
  width: 200px;
  height: 150px;
  border: 1px solid red;
}
.box2{
  width: 200px;
  height: 150px;
  border: 1px solid blue;
}

</style>

​

网页图：