Vue.js入门指南：MVVM、指令与组件-优快云博客

本文介绍了MVVM模式及其在Vue.js中的应用，详细讲解了Vue的v-bind、v-if、v-for和v-on指令，以及数据双向绑定的概念。还探讨了Vue的组件系统，Axios的使用以及为何在Vue项目中选择它。此外，文章提到了Vue的生命周期和三大特性：计算属性、内容分发和自定义事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是MVVM

MVVM是一种软件架构模式，是一种简化用户界面的事件驱动编程方式
核心是ViewModel层，负责转换Model中的数据对象让数据变得更容易管理和使用
简单理解：
- Model(data层，可从后端请求拿的数据，也可自己伪造)
- view：视图层
- ViewModel：相当于页面调试，与view,model双向绑定，随时更新，动态更改

MVVM特点

完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施重要的一环
前端不用专注于写数据
核心和实现了DOM监听与数据绑定

V-bind

你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”.

<span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>

v-if

<div id="app">
  <p v-if="seen">现在你看到我了</p>
  <p v-else="seen">现在你看到我了</p>
</div>
//data返回seen: true

<div id="app1">
  <h1 v-if="type==='A'">A</h1>
  <h1 v-else-if="type==='B'">B</h1>
  <h1 v-else-if="type==='C'">C</h1>
  <h1 v-else>D</h1>
</div>
data:{
type: 'A'
}

v-for

 <li v-for="item in items">{{item.message}}</li>
data:{
            items: [
                {message:"我爱你java"},
                {message:"java你爱我吗"}
            ]
        }

数组隐藏属性

<li v-for="(item,index) in items">{{item.message}}---{{index}}</li>
//输出结果
我爱你java---0
java你爱我吗---1

v-on

方法必须定义在vue的methods中

<button v-on:click="sayHi">点我</button>
var vm = new Vue({
        el:"#app",
        data:{
            message: "任建勇你好啊"
        },
        methods: {
            sayHi: function(event){
                alert(this.message);
            }
        }
    });

什么是数据双向绑定

即当数据发生变换，试图也发生变化
视图发生变换，数据也会同步变化

可以用v-model 指令在表单、、元素上创建双向数据绑定

//单行输入框，多行框
<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
<input type="text" v-model="message">{{message}}
var vm = new Vue({
        el:"#app",
        data:{
            message: "123"
        }
    });

//单选框
<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>
var vm = new Vue({
        el:"#app",
        data:{
            message: ''
        }
    });

下拉框

<div id="app">
    下拉框：
    <select v-model="selected">
        <option value="" disabled>-------请选择------</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>
        选择了{{selected}}
    </p>
</div>
var vm = new Vue({
        el:"#app",
        data: {
            selected: ''
        }
    });

组件

定义一个组件

<div id="app">
  <renjianyong></renjianyong>
</div>
<script>
    //定义一个组件，用Vue对象
    Vue.component("renjianyong",{
        template: '<li>Hello</li>'
    });
    var vm = new Vue({
        el:"#app"
    });
</script>

组件和var是同级的，所以接收数据：data中数据给items,每个item的值给组件，组件中必须用props接收

<div id="app">
  <renjianyong v-for="item in items" v-bind:aaa="item"></renjianyong>
</div>
<script>
    Vue.component("renjianyong",{
        props: ['aaa'],
        template: '<li>{{aaa}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data: {
            items: ["java","c++","前端"]
        }
    });
</script>

Axios

Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API [JS 中链式编程]
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON数据

为什么要用 Axios

由于Vue.js是一个视图层框架，严格遵守 SoC（关注度分离原则），所以vue.js并不包括 AJAX 的通信功能，推荐使用Axios 框架。少用JQuery，因为它操作Dom太频繁

Vue生命周期

一堆方法
略略略

mounted() 和 data() 方法

<style>
        [v-clock]: {//解决闪烁问题，加载资源出来前保持白屏
            display: none;
        }
</style>

<div id="app">
  {{data.name}}
  <a v-bind:href="data.obj.url"></a>
</div>
var vm = new Vue({
        el: "#app",
        data(){//此data非彼data:
            return{
                data:{
                    name:null,
                    age:null,
                    obj:{
                        aaa:null,
                        bbb:null,
                        url:null
                    }
                }
            }
        },
        mounted(){//钩子函数 链式编程  ES6新特性
            axios.get('../renjianyong.json').then(response=>(this.data=response.data));
        }
    });

Vue三大特性

计算属性

一个能够将计算结果缓存起来的属性（将行为转换成了静态的属性）
可以想象成缓存

methods中方法和computed 中方法名不能相同

<p>currentTime{{currentTime()}}</p>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message:"hello,renjianyong"
        },
        methods: {
            currentTime: function () {
                return Date.now();//返回一个事件
            }
        },
        computed: {//计算属性，可以想象成缓存
            currentTime1: function () {
                this.message;//虚拟dom：当message变换时，Date.now()重新执行，缓存中的数据变化
                return Date.now();
            }
        }
    });
</script>

内容分发

：插槽

通过插槽实现动态

<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>
<script>
    //定义三个组件
    Vue.component("todo",{
        template: '<div>\
                        <slot name ="todo-title"></slot>\
                        <ul>\
                            <slot name ="todo-items"></slot>\
                        </ul>\
                  </div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title: '任建勇爱学习',
            todoItems: ['java','c++','python']
        }
    });
</script>

自定义事件

远程调用methods中方法

组件通过this.$emit() 方法绑定前端的自定义事件（@click方法）

自定义事件事件绑定Methods中方法

<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item"
        v-bind:index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
    </todo>
</div>
<script>
    //定义三个组件
    Vue.component("todo",{
        template: '<div>\
                        <slot name ="todo-title"></slot>\
                        <ul>\
                            <slot name ="todo-items"></slot>\
                        </ul>\
                  </div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item','index'],
        template: '<li>{{item}}<button @click="remove">删除</button></li>',
        methods: {
            remove: function(index){
                //自定义事件
                this.$emit('remove',index);
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title: '任建勇爱学习',
            todoItems: ['java','c++','python']
        },
        methods: {
            removeItems: function(index){
                console.log("删除了"+ this.todoItems[index])
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    });
</script>