持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

1. MVVM

定义： MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

1. 例子引入：

<!--view层 模板-->

<div id="app">

    {{message}}

</div>

<!-- 导入vue.js-->

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>

    var vm = new Vue({

        el: "#app",

        // model

        data: {

            message: "hello vue!"

        }

    });

</script>

ViewModel在浏览器控制台，双向绑定

ViewModel与控制台内容相同

那改变控制台内容呢？

在控制台输入 vm.message="love";

大家就都变成     'love' 了

message Vue实现了dom监听和数据绑定

2. 也可使用 v-bind 指令实现绑定

<div id="app">

    <span v-bind:title="message">

        鼠标悬浮看效果

    </span>

</div>

在鼠标悬浮时，显示hello vue!

在控制台更改后，显示更改后内容

如，

在控制台输入 `vm.message="love";`
则在鼠标悬浮时，显示 love

注意：v-bind可简写为： ":"

3. Vue if判断语句

在用法上，基本与其他的if判断一致

有if else if else

<div id="app">

    <h1 v-if="type==='A'">A</h1>

    <h1 v-else-if="type==='B'">B</h1>

    <h1 v-else-if="type==='D'">D</h1>

    <h1 v-else>C</h1>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>

    var vm = new Vue({

        el: "#app",

        // model

        data: {

            type:'A'

        }

    });

</script>

此时，ViewModel与控制台都为 A

若，向控制台更改，则为更改后内容

如，

在控制台输入 `vm.type="B";`
则在鼠标悬浮时，显示 B

4. Vue for循环语句

<div id="app">

    <li v-for="(item,index) in items">

        {{item.message}}--{{index}}

    </li>

</div>

<!-- 导入vue.js-->

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>

    var vm = new Vue({

        el: "#app",

        // model

        data: {

             items:[

                 {message:'java'},

                 {message:'pythoon'},

                 {message:'sql'}

             ]

        }

    });

</script>

显示结果如下图所示

5. Vue绑定事件 v-on:click=

可简写为 @click

<div id="app">

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

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            message:"前端"

        },

        method:{//方法必须定义在vue的methon对象中

            sayHi:function (){

                alert(this.message);

            }

        }

    });

</script>

实现效果为：

点击按钮后出现警告弹窗，内容为前端

内容可通过在控制台更改message实现

6. Vue双向绑定 v-model

<div id="app">

    <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>

    {{message}}

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            message: "123"

        },

});

 

可以在textarea中修改内容，也可以在控制台修改，都可以实现相同效果

6.1 v-model 绑定单选框并显示

<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 src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            message: ""

        },

    });

</script>

6.2 v-model 绑定复选框并显示

<div id="app">

    下拉框：

    <select v-model="message" name="" id="">

        <option disabled value="">--请选择--</option>

        <option>A</option>

        <option>B</option>

        <option>C</option>

    </select>

    <span>value:{{message}}</span>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            message: ""

        },

    });

</script>