vue 基本语法

1.文本双向绑定：

语法：{{ var}}

实例：

文本插值

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

 

<script>

new Vue({ el: '#app', data: {

message: '<h1>菜鸟教程</h1>'

} })

</script>

2.input 输入绑定：

语法: v-model="object"

实例：

<div id="app">

<p>{{ message }}</p>

<input v-model="message">

</div>

<script>

new Vue({ el: '#app',

data: {message:'Runoob!'

} })

</script>

表单例子v-mdoel：

<div id="demo">
  <form action="/xxx" @submit.prevent="handleSubmit">
    <span>用户名: </span>
    <input type="text" v-model="username"><br>

    <span>密码: </span>
    <input type="password" v-model="pwd"><br>

    <span>性别: </span>
    <input type="radio" id="female" value="女" v-model="sex">
    <label for="female">女</label>
    <input type="radio" id="male" value="男" v-model="sex">

  </form>
</div>

<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      username: '',
      pwd: '',
      sex: '男',
      likes: ['foot'],
      allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
      cityId: '',
      info: ''
    },
    methods: {
      handleSubmit () {
        console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
        alert('提交注册的ajax请求')
      }
    }
  })
</script>

　　

3.v-for:循环数组或者对象:

例子：数组取值

<div id="app">
  <ol>
    <li v-for="vlaue in sites">
      {{ value.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

　　

对象循环：

v-for 可以通过一个对象的属性来迭代数据：

两个参数：

 三个参数 value,key,index

v-if-else:

v-bind简写 也可为   ：

例子：