Vue笔记

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <span>hello.{{name}}</span>
    </div>   
</body>
<script type="text/javascript">
    // 创建一个vue实例
    new Vue({
        el : "#root", // el用于指定当前的Vue实例为 '#root' 容器服务
        // data 属性用于存储数据，提供给 '#root' 容器使用
        data:{
            name: "word"
        }
    })
</script>

1）、el的两种使用方式

创建Vue实例时挂载指定容器。

    // 创建一个vue实例
    new Vue({
        el : "#root", // 挂载容器
        data:{
            urlName: "Vue2官网地址",
            url: "https://v2.cn.vuejs.org/v2/guide/index.html",
            type: "_blank",
            value: "双向数据绑定"
        }
    })

通过Vue原型实例方法$mount()方法进行挂载。

    // 创建一个vue实例
    const vm = new Vue({
        // el : "#root", 
        data:{
            urlName: "Vue2官网地址",
            url: "https://v2.cn.vuejs.org/v2/guide/index.html",
            type: "_blank",
            value: "双向数据绑定"
        }
    })
    vm.$mount("#root"); // 将dom节点挂载在vue实例上

2）、data的两种使用方式

对象式

    // 创建一个vue实例
    const vm = new Vue({
        el : "#root", 
        data:{
            urlName: "Vue2官网地址",
            url: "https://v2.cn.vuejs.org/v2/guide/index.html",
            type: "_blank",
            value: "双向数据绑定"
        }
    })

函数式

   // 创建一个vue实例
    const vm = new Vue({
        el : "#root", 
        data(){
            return{
                urlName: "Vue2官网地址",
                url: "https://v2.cn.vuejs.org/v2/guide/index.html",
                type: "_blank",
                value: "双向数据绑定"
            }
        }
    })

2、模板语法

（1）、插值语法

①、文本插值 {{ value }}

        <span>hello.{{mag}}</span> <!-- mag对应Vue实例中data属性的mag值 -->

②、v-once指令

        <span v-once>这个将不会改变: {{ msg }}</span>

③、{{ }}中使用Js表达式

        <span>hello.{{name.toUpperCase()}}</span><br> // hello.VUE
        <span>{{num+1}}</span><br> // 19
        <span>{{arr[1]}}</span> // 13

    // 创建一个vue实例
    new Vue({
        el : "#root", // el用于指定当前的Vue实例为 '#root' 容器服务
        // data 属性用于存储数据，提供给 '#root' 容器使用
        data:{
            name: "vue",
            num: 18,
            arr: [12,13,14]
        }
    })

（2）、指令语法

HTML标签的每一个属性都有自己独特的功能，但Vue认为HTML标签原生的属性不能满足实际开发需求，所以Vue为HTML标签新增很多自定义属性，每一个属性v-(指令)都可以实现一个强大的功能。

①、v-bind

v-bind指令用于绑定HTML标签标准属性的值。

语法：v-bind:href = "url"，url值可为Js表达式。

    <body>
        <!-- 准备一个容器 -->
    <div id="root">
            <a v-bind:href = "url" :target="type">{{urlName}}</a>
    </div>   
    </body>
    <script type="text/javascript">
        // 创建一个vue实例
        new Vue({
            el : "#root", // el用于指定当前的Vue实例为 '#root' 容器服务
            // data 属性用于存储数据，提供给 '#root' 容器使用
            data:{
                urlName: "Vue2官网地址",
                url: "https://v2.cn.vuejs.org/v2/guide/index.html",
                type: "_blank"
            }
        })
    </script>

②、v-model

v-model指令用于实现表单类元素的value属性值的双向数据绑定（当页面中的value发生改变，同时会影响到Vue实例中data属性中的值）。

    <!-- 准备一个容器 -->
    <div id="root">
        输入框：<input v-model= "value">data中value的值：{{value}}
    </div>

    // 创建一个vue实例
    new Vue({
        el : "#root", // el用于指定当前的Vue实例为 '#root' 容器服务
        // data 属性用于存储数据，提供给 '#root' 容器使用
        data:{
            value: "双向数据绑定"
        }
    })

Vue中的两种数据绑定的方式

单向绑定（v-bind）：数据只能从data流向页面;
双向绑定（v-model）：数据的流向是双向的，数据既可以从data流向页面，又可以从页面流向data。

注：

双向数据绑定一般用于在表单类元素上（如input、select等）；

v-model:value 可简写为v-model。

3、MVVM

（1）、介绍

M模型（Model）：对应vue中data属性中的数据；
V视图（View）:对应vue中的模板/页面；
VM视图对象模型（ViewModel）:对应vue实例对象

DOM Listeners(Dom监听)：用于监听Dom结构中的数据；
Data Bindings(数据绑定)；将Model中的数据绑定到View中。

（2）、Object.defineProperty() -数据代理

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

<script type="text/javascript">
    let propName = "你好";

    // 创建对象
    const obj = {
        value: "1",
        text: "one"
    }
    // 通过Object.defineProperty给obj对象添加属性，该方法添加的属性默认是不可枚举的
    Object.defineProperty(obj, "name",{
        /* 配置项
            enumerable: true, // 可枚举
            value: "vue", // 属性值
            writable: true, // 属性值可修改
        */
        // 获取属性值时执行
        get(){
            return propName;
        },
        // 设置属性值时执行--val是属性被赋予的新值
        set(val){
            propName = val;
        }
    })
</script>