Vue的简单绑定、以及渲染

1.所有的内容要需要一个根节点包起来

<template>
  <div>
  </div>
</template>

2.data中定义数据（变量）

<template>
  <div>{{name}}--{{age}}</div>
</template>
<script>
export default 
{
  data () 
  {
    return 
    {
    name:'xxx',
    age:'20'
    }
  },
}
</script>

3.渲染单个变量，数组，数组嵌套
(1)v-for可以把数据中的一个数组对应为一组元素
(2)v-for 指令需要以 item in items（我这里写的是list） 形式的特殊语法,items(list)是源数据数组并且 item 是数组元素迭代的别名

<template>
  <div>{{name}}--{{age}}
<br>
<ul><li v-for="(item,index) in list" :key="index">{{item}}</li></ul>
</div>
</template>
<script>
export default 
{
  data () 
  {
    return 
    {
    name:'xxx',
    age:'20',
    list:['足球'，'篮球']
    }
  },
}
</script>
<style></style>

4.绑定数据v-text
<div v-text="name"></div>
数据data中

data () 
  {
    return 
    {
    name:'xxx',
    }
  },

5.绑定class，绑定样式
<div :class = "bangdingduixiang" ></div>
这里的bangdingduixiang是自己随意定义的一个名字！

export default{
   data(){
     return{
       bangdingduixiang :{
          active : true
      }
     }
   }  
}`

6.双向数据绑定v-model 配合Input控件使用
(1)简单的绑定name
<input type="text" v-model="name">
(2)data数据中name定义数据xxx
(3)//在这里说一下methods方法在methods的方法中进行声明，比如我们给ChangeName(){}自己定义的方法
(4)添加一个butten按钮click事件，调用方法ChangeName(){}
(5)调用方法时直接传递，我们在button上就直接可以写。
<button @click=”ChangeName()”></button>.

  <button @click="ChangeName()">改变Name</button>

<script>
export default 
{
  data () 
  {
    return 
    {
    name:'xxx',
    }
  },
   methods:{//methods方法
   ChangeName(){
this.name=this.name+'aaa'
}
},
}
</script>

**7.**当然写的可能少，大家可以看一下官方的 Vue基础的相关教程