vue：实例，挂载，模板语法，数据绑定，Object.defineProperty使用

 
    <script src="../JS库/vue.js">script>

        new Vue({
            el: '',
            data: {
            }
        })

    
"app" v-if="isshow">
        
        {{massage}}
    

容器（一块view的区域盒子）与vue实例映射的方式可以是id，class：

el:'#app'
el:'.app'
el:document.getElementById('app')
...
也可以不写el键值对，将vue实例存在变量里，再修改变量的$mount('value')挂载的容器id

我们来看以下代码：

 
    <div id="app" v-if="isshow">
        
        {{massage}}
    div>
    <div id="cdd">
        <span v-text="message">
        span>
    div>
    <div id="cpp">
        {{clazz}} {{name}}
    div>
    <script>
        // 阻止vue启动时产生生产提示信息
        Vue.config.productionTip = false
 
        // 创建Vue对象的方法 ：
        //  el根据css选择器指定挂载容器（可以为class类选择器也可以为id选择器） data存储对象数据供el指定的容器使用（注意作用范围）
        new Vue({
            // 比较傻乎乎的写法，根据Id获取dom对象来建立映射关系 
            // el: document.getElementById('app'),
            el: '#app',
            data: {
                // 对象式声明data
                massage: '我是第一个vue实例',
                isshow: true
            }
        })
        new Vue({
            el: '#cdd',
            data: {
                message: '我是第二个vue实例'
            },
            //生命周期函数，根据单词意思就是在vue实例创建后执行的函数
            // created: function () {
            //     alert('我是创建实例之后的钩子函数')
            // }
        })
        new Vue({
            el: '#cpp',
            data() {
                // 函数式声明data
                return {
                    clazz: '193',
                    name: '黄林春'
                }
            }
        })
    script>

其中涉及到一些常用的vue命令，例如v-if与v-text命令，它们在vue的模板语法中都叫做命令语法，即解析标签的属性，绑定事件，标签内容等特性的命令规范。现在不列举命令语法中的命令，只作为比较插值语法来聊，至于插值语法，我们可以看到{{data中的属性名}}就能在标签体中获取到这部分的属性中进行渲染，当然不要在挂载该vue实例的容器中取别的vue实例的数据。

这里我们也能发现里面有两种data的声明方式—函数式声明与对象式声明：

         new Vue({
            el:'#app',
            data(){
               //函数式声明data
                return{
                    name:'黄林春'
                }
            }
         })
 
        new Vue({
            el: '#app',
            data: {
                // 对象式声明data
                isshow: true
            }
        })

看起来，函数式声明对我们java程序员比较耐看且友好。

其次我们来看看基础中的数据绑定：

    <div id="app">
        
        单向数据绑定<input type="text" v-bind:value="name"/><br/>
        
        双向数据绑定<input type="text" v-model:value="name">
        <hr/>
        <h2 v-bind:x="name">你好！h2>
        
        
    div>
    <script>
        new Vue({
            el:'#app',
            data(){
                return{
                    name:'黄林春'
                }
            }
        })
    script>
body>

这里提到了两种绑定的命令：v-bind:value=“dat中的key” 以及 v-model:value="data中的key"，二者的区别也说的清除，前者属于从data中拿数据渲染到标签内容也就是页面，后者则是在前者功能的基础上还可以实现从页面上修改vue实例中的data键值。这也就是单向数据绑定与双向数据绑定。

前面我们提到el挂载的几种写法中有一种先将vue实例出来存储到变量里再修改其属性的方法（$mount挂载）:

// 这种挂载的方式则大相径庭，先将vue实例创建出来再通过V变量的属性$mount去管理容器
        const v = new Vue({
            data(){
                return{
                    name:'huanglinchun'
                }
            }
        })
        // v.$mount('#app')
        // 这样的挂载方式会灵活的改变页面数据的时间
        // 写个定时函数去改变页面的值,加载页面之后过了1s才会显示name的值
        setTimeout(() => {
            v.$mount('#app')
        },1000)

前面也提到过容器作为view层，data作为model层（其实含有的不止是data还有vue实例的属性与方法以及函数都可以进行访问），vue实例则作为viewmodel层实现MVVM模型的构建，我们不难看到这个模型，特别是在我们的后端开发中，其中我们的dao层就是作为传递数据的model层（不是数据来源的层），我们的前端页面就是典型的view层，我们的controller层就是控制层也相当于MVVM模型中的viewmodel层，这个我们的spring中是有一个对象modelandview对象，可以控制视图也可以传递数据，不就相当于这里的vue实例吗？

那么接下来就是我今天总结的最后一个（Object.definePropet()方法的使用）：

    <script>
        // 简单的JS数据代理方法使用
        // 定义对象
        let person = {
            naem: '张三',
            sex: '男'
        }
        //     // 传递三个参数：你需要操作的对象，对象需要添加的属性，该属性的配置项：例如value
        //     Object.defineProperty(person, 'age', {
        //         value: 18,
        //         // 这里的enumerable默认为false即不可枚举的
        //         enumerable: true,
        //         // 这里writeable是默认为false即不可修改的
        //         writeable:true,
        //         // 这里的configurable默认是false即不可删除的
        //         configurable:true
        //     })
        //     // 经过这样的方法之后person = {naem,sex,age} 但是这样得来的age是
        // 默认不能参与遍历的， 默认不能更改，默认不能删除
        //     // 需要在配置项里设置 enumerable: true 实现可遍历，writeable:true 实现可修改， configurable:true 实现可删除
        //     console.log(person)
        //     // Object.keys(对象名)可以将对象的属性名提取出来放到一个Array数组中
        //     console.log(Object.keys(person))
 
        let number = 20
        // 如果这里需要让number等于person的年龄属性并实现可以随着number的改变而改变age
        Object.defineProperty(person, 'age', {
            // 当读取age属性的时候将调用getter函数，返回值返回给age
            get: function () {
                console.log('正在读取geter方法')
                return number
            },
            // 当改变age属性的时候将调用setter函数，且会获取到具体修改的值，
            // 这里需要在函数内部异步修改number变量的值
            set(value) {
                console.log('修改age的值为' + value)
                number = value
            }
        })
    script>

Object.definePropet()方法的作用是什么呢？即在指定的对象内部添加新的属性，我们可以对属性的配置进行设置，例如初始值，可修改，可删除，可枚举等等。

这里的代码就是对person对象新增age属性的一些操作：

 // 传递三个参数：你需要操作的对象，对象需要添加的属性，该属性的配置项：例如value
            Object.defineProperty(person, 'age', {
                value: 18,
                // 这里的enumerable默认为false即不可枚举的
                enumerable: true,
                // 这里writeable是默认为false即不可修改的
                writeable:true,
                // 这里的configurable默认是false即不可删除的
                configurable:true
            })

那么这些都是最简单的，因为我们如果想修改它的值给的配置比较多，这里我们可以通过setter与getter的方式对配置项进行修改：

        let number = 20
        // 如果这里需要让number等于person的年龄属性并实现可以随着number的改变而改变age
        Object.defineProperty(person, 'age', {
            // 当读取age属性的时候将调用getter函数，返回值返回给age
            get: function () {
                console.log('正在读取geter方法')
                return number
            },
            // 当改变age属性的时候将调用setter函数，且会获取到具体修改的值，
            // 这里需要在函数内部异步修改number变量的值
            set(value) {
                console.log('修改age的值为' + value)
                number = value
            }
        })

这里我们不难看出我们是在用Object对象的方法去修改person的属性，这种方式我们在java设计思想中叫做代理思想（AOP开发用cglib做代理，bean的实例化可以用动态或者静态工厂做代理，这都是代理思想的体现，实际上就是相当于结婚典礼交给婚庆公司一样，要的结果就是结婚，无非找第三方来做结婚这件事）。