MVVM

什么是MVVM？

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

View层：

Model层：

ViewModel层：

options

文本插值

    

        
文本插值
        

        显示字符串的值

        msg={{msg}}

    


    export default({
        name: 'Mustache',
        //全局变量，整个页面可以访问
        data(){
            return {
                msg: '这是一个字符串变量'
            }
        },
    })

绑定属性

Vue.js 在数据绑定内支持全功能的 JavaScript 表达式，如下

{{ number + 1 }}
{{ age >= 18 ? '成年' : '未成年' }}
{{ message.split('').reverse().join('') }}

表达式将在所属的 Vue 实例的作用域内计算。每个绑定只能包含单个表达式。

{{ var a = 1 }}

{{ if (ok) { return message } }}

计算属性

    

        
文本插值
        

        显示字符串的值

        msg={{msg}}

        a={{a}},b={{b}}


     
    


    export default({
        name: 'Mustache',
        //全局变量，整个页面可以访问
        data(){
            return {
                msg: '这是一个字符串变量',
                a:1,
            }
        },
        /*
            计算属性：
            在computed里面定义的变量不允许在data里面定义，在compted里面定义的变量与在data里面定义的变量效果是一样的

            说明：
                computed计算属性内部必须定义函数
                b()相当于一个b变量的get方法；
                在data中定义的变量名称不能与computed中定义的函数同名，但可以当做data中定义的变量一样使用

        */
        computed:{
            //相当于变量b的get方法，既是定义变量b，同时也是定义变量b的get方法
            //不允许使用data中定义的变量对自己赋值
            b(){
                return this.a+1;
            }
           
        }

    })

结果：a=1, b=2

说明：

computed
计算属性内部必须定义函
数

b()
相当于一个
b
变量的
get
方法；

在
data
中定义的变量
名称
不能与
computed
中定义的函数同名，但可以当做
data
中定义的变量一样使用

指令插值

v-html指令

    

        
文本插值
        

        显示字符串的值

        msg={{msg}}

        msg1={{msg1}}

        number={{number}}

        number={{number+1}}

        你的年龄是{{this.age}}岁,你是{{age>18?'成年':'未成年'}}人。

        a={{a}},b={{b}}


        
        
        
    


    export default({
        name: 'Mustache',
        //全局变量，整个页面可以访问
        data(){
            return {
                msg: '这是一个字符串变量',
                msg1: '这是字符串变量2',
                age:16,
                number:1,
                a:1,
                score:90
            }
        },
        /*
            计算属性：
            在computed里面定义的变量不允许在data里面定义，在compted里面定义的变量与在data里面定义的变量效果是一样的

            说明：
                computed计算属性内部必须定义函数
                b()相当于一个b变量的get方法；
                在data中定义的变量名称不能与computed中定义的函数同名，但可以当做data中定义的变量一样使用

        */
        computed:{
            //相当于变量b的get方法，既是定义变量b，同时也是定义变量b的get方法
            //不允许使用data中定义的变量对自己赋值
            b(){
                return this.a+1;
            }
           
        },
        //生命周期
        created(){

        },
        methods:{
            test(){
                return "
使用-v-text属性返回函数值"
            },
            test2(){
                return "
使用v-html属性的返回值"
            }
        }

    })

本人从事软件项目开发20多年，2005年开始从事Java工程师系列课程的教学工作，录制50多门精品视频课程，包含java基础，jspweb开发，SSH,SSM，SpringBoot，SpringCloud,人工智能，在线支付等众多商业项目，每门课程都包含有项目实战，上课PPT，及完整的源代码下载，有兴趣的朋友可以看看我的在线课堂

讲师课堂链接：https://edu.csdn.net/lecturer/893

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net