MVVM

        什么是MVVM？

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

        View层：

Model层：

ViewModel层：

options

文本插值

<template>
    <div>
        <h2 align="center">文本插值</h2>
        <hr>
        显示字符串的值<br>
        msg={{msg}}<br>
    </div>
</template>
<script>
    export default({
        name: 'Mustache',
        //全局变量，整个页面可以访问
        data(){
            return {
                msg: '这是一个字符串变量'
            }
        },
    })
</script>

绑定属性

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

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

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

{{ var a = 1 }}
{{ if (ok) { return message } }}

计算属性

<template>
    <div>
        <h2 align="center">文本插值</h2>
        <hr>
        显示字符串的值<br>
        msg={{msg}}<br>
        a={{a}},b={{b}}<br>
 
     
    </div>
</template>
<script>
    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;
            }
           
        }
 
    })
</script>

结果：a=1, b=2

说明：

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

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

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

指令插值

v-html指令

<template>
    <div>
        <h2 align="center">文本插值</h2>
        <hr>
        显示字符串的值<br>
        msg={{msg}}<br>
        msg1={{msg1}}<br>
        number={{number}}<br>
        number={{number+1}}<br>
        你的年龄是{{this.age}}岁,你是{{age>18?'成年':'未成年'}}人。<br>
        a={{a}},b={{b}}<br>
 
        <!--
           v-html 指令类似于 v-text 指令;
            它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
            v-html 指令应尽量避免使用，否则会带来危险(XSS攻击 跨站脚本攻击),一般只在可信任内容上使用 v-html，永不用在用户提交的内容上;
        -->
        <span v-text="test()"></span>
        <span v-html="test2()"></span>
    </div>
</template>
<script>
    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属性的返回值
"
            }
        }
 
    })
</script>

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

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