vue基本语法

vue基本语法

1.v-if v-else语法

<div id="app">
    <div v-if="ok">true</div>
    <div v-else>false</div>
</div>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            ok:true
        }
    });
</script>

结果

2.vue-for

<div id="app">
  <li v-for="item in items">
      <div>{{item.message}}</div>
  </li>
</div>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
           items:[
               {message:'hello vue'},
               {message:'hello 前端'}
           ]
        }
    });
</script>

结果

3.vue的事件绑定（v-on）

<!--拿数据-->
<div id="app">
   <button v-on:click="sayhai">点击我</button>
</div>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"hello vue!"
        },
        //方法必须放在vue的method中 通过v-on绑定方法
        methods:{
            sayhai:function (event) {
                alert(this.message)
            }
        }
    });
</script>

结果

4.vue的事件双向绑定（v-model）

<div id="app">
    输入<input v-model="message" type="text"> {{message}}
</div>


<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:" "
        }
    });
</script>

结果

注意: v-model 会忽略所有表单元素的value.checked,selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值!