Vue.js初识

1.什么是Vue.js

是一个用来构建用户界面的框架,轻量级的MVVM框架(Model-View-ViewModel)框架，其实就是数据的双向绑定,容易上手、小巧，通过简单的API可以实现响应式的数据绑定和组合的视图组件，数据驱动+组件化的前端开发(核心思想)。

2.什么是指令

用来扩张html标签的功能

3.Vue常用指令

v-model:双向数据绑定，常用于表单元素

v-for: 对数组或对象进行循环操作

v-on:时间绑定,用法：v-on:事件

1.v-for:循环数组对象

<div id="itany">
    <ul>
        <li v-for="val in arrs">
            {{val.num}}
            {{val.name}}
            {{val.price}}
        </li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            arrs:[
                {num:1,name:'苹果',price:3},
                {num:2,name:'香蕉',price:2},
                {num:3,name:'鸭梨',price:1}
            ]
        }
    })
</script>

2.v-on:时间绑定

<div id='itany'>
    <button v-on:click='alt'>按钮</button>
</div>
<script src="js/vue.js"></script>
<script>
    var vm=new Vue({
        el:'#itany',
        data:{
            msg:'hello vue'
        },
        methods:{
            alt:function(){
                alert(vm.msg)
                alert(this.msg)
            }
        }
    })
</script>

3.v-model

<div id='itany'>
    <input type="text" v-model='msg'>
    <p>{{msg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            msg:''
        }
    })
</script>