Vue基本语法

前缀带有v-，表示他们是vue提供的特殊指令，他们会渲染在DOM上应用特殊的响应式行为。

绑定元素特性

v-bind

<!--视图(view)层-->
<div id="app">
    {{message}}         <!--绑定信息-->
    <span v-bind:title="message">
        鼠标悬浮在我这可以看到message动态绑定的信息
    </span>
</div>

判断、循环

v-if、v-else

<!--视图(view)层-->
<div id="app">

    <h1 v-if="type===A">A</h1>
    <H1 v-else-if="type == B">B</H1>
    <h1 v-else>ERROR</h1>

</div>

<script>
    var vm = new Vue({
        el: '#app',
        /* Model层 数据 */
        date: {
            type:'B'
        }
    });
</script>

for

<!--第一步，导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--视图(view)层-->
<div id="app">

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

</div>

<script>
    var vm = new Vue({
        el: '#app',
        /* Model层 数据 */
        date: {
            items:[
                {message:'库里'},
                {message:'KD'},
                {message:'欧文'},
                {message:'詹老头'}
            ]
        }
    });
</script>

监听事件

v-on

<!--第一步，导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--视图(view)层-->
<div id="app">

    <button v-on:click="sayHi">click me</button>

</div>

<script>
    var vm = new Vue({
        el: '#app',
        /* Model层 数据 */
        date: {
            message: "今天是什么天气"
        },
        methods: {      //方法必须定义在methods对象中
            sayHi: function(event){
                alert(this.message);
            }
        }
    });
</script>

双向绑定

Vue.js是一个MVVM框架，即数据的双向绑定，当数据发生变化的时候，视图也会发生变化，反之亦然。
可以使用v-model标签在表单<input>、<textarea>、<select>元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。

<!--第一步，导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--视图(view)层-->
<div id="app">

    输入文本:<input type="text" v-model="message"> {{message}}
</div>

<script>
    var vm = new Vue({
        el: '#app',
        /* Model层 数据 */
       data:{
           message:" "
       }
    });
</script>

<!--第一步，导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--视图(view)层-->
<div id="app">

    性别:<input type="radio" name="Sex" value="男" v-model="message">男
        <input type="radio" name="Sex" value="女" v-model="message">女

    <p>
        选中了:{{message}}
    </p>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        /* Model层 数据 */
       data:{
           message:" "
       }
    });
</script>

<!--第一步，导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--视图(view)层-->
<div id="app">
    下拉菜单:
    <select v-model="selected">
        <option value="" disabled>--请选择--</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>

    <span>value:{{selected}}</span>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        /* Model层 数据 */
       data:{
           selected:" "
       }
    });
</script>