Vue学习笔记(一)

已于 2022-03-02 10:32:39 修改
阅读量496 收藏 1
点赞数
分类专栏： Vue 文章标签： vue.js 前端框架 前端
于 2022-02-08 10:03:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chilanzi/article/details/122818740
版权
本文详细介绍了Vue.js的基础知识，包括数据驱动视图、双向数据绑定、MVVM原理、常用指令如v-text、v-html、v-bind、v-on、v-model、v-if/v-show、v-for，以及事件修饰符和过滤器的使用。此外，还涵盖了计算属性、axios数据请求的运用，是Vue初学者的入门指南。
摘要由CSDN通过智能技术生成

Vue学习笔记(一)

个人博客(欢迎光临)：Vue学习笔记(一)(赤蓝紫)

1. vue简介

Vue是一套用于构建用户界面的前端框架

1.1 vue的两个特性

  1. 数据驱动视图

    • 使用了vue的页面，vue会监听数据的变化，自动重新渲染页面的结构
    • 数据驱动视图是单向的数据绑定，即只能由数据来影响页面结构

  2. 双向数据绑定

    • 填写表单时，双向数据绑定可以让开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中

1.2 MVVM

vue实现数据驱动视图和双向数据绑定的核心原理。

M指的是Model，V指的是View，VM指的是ViewModel

​ Model：表示当前页面渲染时依赖的数据源

​ View：表示当前页面所渲染DOM结构

​ ViewModel：表示vue的实例，是MVVM的核心

MVVM的工作原理：ViewModel作为MVVM的核心，它把当前页面的数据源(Model)和页面的结构(View)连在一起。

  • 当数据源发生变化时，会被ViewModel监听到，VM会自动更新页面的结构
  • 当表单元素的值发生变化时，也会被VM监听到，VM会把更新的值自动同步到数据源(Model)中

2. vue的基本使用

步骤

  1. 导入vue.js文件
  2. 在页面中声明要被vue操作的DOM区域
  3. 创建vue实例对象

3. vue的指令

指令是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构

按照用途可分为6大类：

  1. 内容渲染指令
  2. 属性绑定指令
  3. 事件绑定指令
  4. 双向绑定指令
  5. 条件绑定指令
  6. 列表渲染指令

3.1 内容渲染指令

  1. v-text

    会覆盖元素内默认内容

     <div id="app">
    <p v-text="username">姓名：</p>   
     <!-- 这里的姓名会被直接覆盖成下面数据源中的username -->
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app', //表示操作的区域，值是选择器
        data: { //Model数据源
            username: 'clz'
        }
    })
</script>

  2. 插值表达式{{}}

    不会覆盖元素内默认内容

    <div id="app">
    <p>姓名：{{ username }}</p>
     <!-- 下面数据源中的username会被渲染到姓名后面 -->
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app', //表示操作的区域，值是选择器
        data: { //Model数据源
            username: 'clz'
        }
    })
</script>

  3. v-html

    可以把包含html标签的字符串渲染成页面的HTML元素

    <div id="app">
    <p>{{ test_v_html }}</p>
    <p v-text="test_v_html"></p>
    <p v-html="test_v_html"></p>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app', //表示操作的区域，值是选择器
        data: { //Model数据源
            test_v_html: '<b style="color: red">Hello!</b>'
        }
    })
</script>

    结果：

3.2 属性绑定指令

为元素的属性动态绑定属性值时，需要用到v-bind属性绑定指令

简写形式":"

vue提供的模板渲染语法，除了支持绑定简单的数据之外，还支持Javascript表达式的运算

<div id="app">
     <div>
         1 + 1 = {{ 1 + 1  }}
     </div>

     <div>
         {{ hello }} 反转后: {{ hello.split('').reverse().join('') }}
     </div>

     <div :title="'box' + index">鼠标悬浮一下</div>
     <!-- 使用属性绑定指令时，进行字符串拼接的字符串需要使用嵌套引号 -->
     <!-- 否则，会到data中找要渲染的数据，找不到会报错 -->
 </div>

 <script src="./lib/vue-2.6.12.js"></script>
 <script>
     const vm = new Vue({
         el: '#app', //表示操作的区域，值是选择器
         data: { //Model数据源
             hello: "Hello World!",
             index: 3
         }
     })
 </script>

3.3 事件绑定指令

vue提供v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。

<div id="app">
    <h2>count的值是: {{ count }}</h2>
    <button v-on:click="addCount">+1</button>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app', //表示操作的区域，值是选择器
        data: { //Model数据源
            count: 0
        },
        methods: {		//事件处理函数放在methods节点里
            // addCount: function () {
            //     this.count++;
            // }
            addCount() { //简便方式
                this.count++;
            }
        }
    })
</script>

v-on事件绑定指令简写形式"@"，而且如果事件处理函数的代码只有一行，可以直接写在行内

<div id="app">
    <h2>count的值是: {{ count }}</h2>
    <button @click="count += 1">+1</button>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app', //表示操作的区域，值是选择器
        data: { //Model数据源
            count: 0
        }
    })
</script>

事件参数对象：通过e.target使被点击的按钮变色

<div id="app">
    <h2>count的值是: {{ count }}</h2>
    <button @click="addCount">+1</button>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app', //表示操作的区域，值是选择器
        data: { //Model数据源
            count: 0
        },
        methods: {
            addCount(e) {
                this.count++;
                e.target.style.backgroundColor = 'red';
            }
        }
    })
</script>

传参：

<div id="app">
    <h2>count的值是: {{ count }}</h2>
    <button @click="addCount(3)">+3</button>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app', //表示操作的区域，值是选择器
        data: { //Model数据源
            count: 0
        },
        methods: {
            addCount(step) {
                this.count += step;
            }
        }
    })
</script>

可实现传参后，可以发现事件参数对象被参数覆盖了，而vue提供一个特殊变量** e v e n t ∗ ∗ ， 用 来 表 示 ∗ ∗ 原 生 的 事 件 参 数 对 象 e v e n t ∗ ∗ ， 然 后 手 动 把 ∗ ∗ event**，用来表示**原生的事件参数对象event**，然后手动把** event∗∗，用来表示∗∗原生的事件参数对象event∗∗，然后手动把∗∗event**当成参数传进去用。

<div id="app">
    <h2>count的值是: {{ count }}</h2>
    <button @click="addCount($event, 3)">+3</button>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app', //表示操作的区域，值是选择器
        data: { //Model数据源
            count: 0
        },
        methods: {
            addCount(e, step) {
                e.target.style.backgroundColor = 'red';
                this.count += step;
            }
        }
    })
</script>

事件修饰符：vue提供了事件修饰符的概念，辅组程序员更方便地对事件的触发进行控制

按键修饰符：在监听键盘事件时，如果需要判断详细的按键，可以为键盘相关事件添加按键修饰符

<div id="app">
    <input type="text" @keyup.esc="clearIpt">
    <!-- 通过按键修饰符可以判断详细的按键 -->
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app', //表示操作的区域，值是选择器
        data: { //Model数据源
        },
        methods: {
            clearIpt(e) {
                e.target.value = ''
            }
        }
    })
</script>

3.4 双向绑定指令

用来辅助开发者在不操作DOM的前提下，快速获取表单的数据

<div id="app">
    <h2>用户名是: {{ username }}</h2>

    <input type="text" v-model="username">
    <!-- 在input中填入的数据会让h2中的数据实时变化 -->
    <!-- 可以添加修饰符.lazy,实现在"change"时才更新，比如，用户把焦点移出input了 -->
    <input type="text" v-model.lazy="username">
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app', //表示操作的区域，值是选择器
        data: { //Model数据源
            username: 'clz'
        },
    })
</script>

v-model指令的修饰符

<div id="app">
    <input type="text" v-model.number="n1"> +
    <input type="text" v-model.number="n2"> =
    <span>{{ n1 + n2 }}</span>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app', //表示操作的区域，值是选择器
        data: { //Model数据源
            n1: 1,
            n2: 2
        },
    })
</script>

3.5 条件渲染指令

条件渲染指令用来辅助开发者按需来控制DOM的显示与隐藏。

有两个条件渲染指令

  • v-if
  • v-show
<div id="app">
    <!-- v-if和v-show都是根据"="后的部分为true或false来决定是显示还是隐藏-->
    <!-- 为true时显示，为false时隐藏 -->
    <p v-if="flag">v-if</p>
    <p v-if="flag">v-if</p>
    <p v-show="flag">v-show</p>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app', //表示操作的区域，值是选择器
        data: { //Model数据源
            flag: false

        },
        methods: {

        }
    })
</script>

区别：

实现原理不同：

  • v-if是通过动态创建或移除DOM元素来控制元素在页面上的显示与隐藏，隐藏后，还贴心的把隐藏的节点所在的位置变为空注释，暗示有东西藏着
  • v-show指令会动态为元素添加或移除style="display: none;"样式，来控制元素的显示与隐藏

性能消耗不同：

  • v-if的切换开销更高，而v-show的初始渲染开销更高
  • 需要频繁切换，使用v-show
  • 运行时条件很少变化，用v-if

v-if 可以单独使用，也可以搭配v-else、v-else-if使用

<div id="app">
    <select v-model="type">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
        <option value="D">D</option>
        <option value="E">E</option>
    </select>
    <p v-if="type === 'A'">优秀</p>
    <p v-else-if="type === 'B'">良好</p>
    <p v-else-if="type === 'C'">及格</p>
    <p v-else>差</p>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app', //表示操作的区域，值是选择器
        data: { //Model数据源
            type: 'A'

        },
        methods: {

        }
    })
</script>

3.6 列表渲染指令

v-for列表渲染指令，用于实现基于一个数组来渲染一个列表结构。v-for指令需要使用item in items形式的特殊语法，items是要循环的数组，item是循环的每一项

v-for指令支持一个可选的第二个参数，即当前项的索引。语法为(item, index) in items

需要为每一项提供唯一的key属性，用于维护列表的状态

<div id="app">
    <table class="table table-bordered table-hover table-striped">
        <thead>
            <th>索引</th>
            <th>Id</th>
            <th>姓名</th>
        </thead>
        <tbody>
            <tr v-for="(user, index) in list" :key="user.id">
                <td>{{ index }}</td>
                <td>{{ user.id }}</td>
                <td>{{ user.name }}</td>
            </tr>
        </tbody>
    </table>
</div>

<script src="./lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app', //表示操作的区域，值是选择器
        data: { //Model数据源
            list: [{
                    id: 1,
                    name: "张三"
                },
                {
                    id: 2,
                    name: "李四"
                },
                {
                    id: 3,
                    name: "王五"
                }
            ]

        },
        methods: {

        }
    })
</script>

key的注意事项：

  1. key的值只能是*字符串或数字类型

  2. key的值必须具有唯一性

  3. 建议把数据项的id属性作为key的值(因为id属性的值具有唯一性)

  4. 使用v-for指令时一定要指定key的值(既可以提升性能，又可以防止列表状态混乱)

  5. 使用index的值作为key的值没有意义(因为index的值不具有唯一性)

    index的值看起来像是具有唯一性，但是这个是假唯一性

    例子：

    现在又一个数组list，list=[“张三”，“李四”]，假如选择index作为key值的话，选择key=1,即现在选中了李四，这个时候在数组的头那里插入一个新人"王五"，那么李四的key值将会变成2,而之前选的是key为1的，所以，张三就篡位了。

4. 过滤器

过滤器常用于文本的格式化，可用于插值表达式和v-bind属性绑定

过滤符由**管道符"|"**进行调用

在filters节点下定义的过滤器，是私有过滤器，只能在当前的vm实例所控制的el区域内可以使用。要实现多个vue实例之间共享过滤器，可以定义全局过滤器。

注意，全局过滤器要放在要用到的vm实例之前

注意，查看上面的结果可以发现，只有vm2控制的区域后面会跟着"全局版本",这是因为vm也有一个私有过滤器mychange，所以vm就直接用自己的了（懒得再去全局那里拿来用）

过滤器可以串联的进行调用。

{{ message | fileterA | filterB }}  //先把message的值给过滤器filterA处理，之后把处理的结果给B处理，最后再把最后的结果渲染到页面上

过滤器可以传参：过滤器本质是函数，可以传参，只不过，第一个参数已经规定好了，是管道符"|"之前的数据。

5. 侦听器

允许开发者监视数据的变化，从而针对数据的变化做特定的操作

<div id="app">
    <input type="text" v-model="username">
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            username: 'admin'
        },
        watch: {
            username(newVal, oldVal) { //要监听谁，就把谁的名字作为方法名，新值在前，旧值在后
                console.log(newVal, oldVal);
            }
        }
    });
</script>

5.1 immediate选项

默认情况下，组件在初次加载完时，不会调用watch侦听器。想要watch侦听器立即被调用，需要把immediate选项变为true(默认值为false)，这个时候的侦听器应该是对象形式的。

<div id="app">
    <input type="text" v-model="username">
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            username: 'admin'
        },
        watch: {
            username: {		//对象形式
                handler(newVal, oldVal) {
                    console.log(newVal, oldVal);
                },
                immediate: true //实现初次加载完成时也会调用监听器
            }
        }
    });
</script>

5.2 deep选项

如果watch监听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。（就像是监视一个人，只能看到他干了什么，没法看到他里面的消化系统在干什么），这个时候需要把deep选项变为true

<div id="app">
    <input type="text" v-model="info.username">
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            info: {
                username: 'admin'
            }
        },
        watch: {
            info: {
                handler(newVal) {
                    console.log(newVal.username);
                },
                immediate: true,
                deep: true
            },
        }
    });
</script>

上面的例子，如果只是想监听单个属性的变化，可以不变化deep选项，按以下方式即可

<div id="app">
    <input type="text" v-model="info.username">
</div>

<script src="./lib/vue-2.6.12.js"></script>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            info: {
                username: 'admin'
            }
        },
        watch: {
            'info.username': { //监听单个属性需要用字符串形式
                handler(newVal) { //这个时候的新值newVal，就是属性变化后的值
                    console.log(newVal);
                },
                immediate: true,
            },
        }
    });
</script>

6. 计算属性

计算属性是指通过一系列计算之后，最终得到一个属性值，这个动态计算出来的属性值可以被模板结构或methods方法使用。

特点：

  1. 计算属性声明的时候被定义为方法，但是计算属性的本质是一个属性
  2. 只要计算属性依赖的数据源变化了，那么计算属性就会自动重新求值
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Myself</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <span>R: </span>
            <input type="text" v-model.number="r">
        </div>

        <div>
            <span>G: </span>
            <input type="text" v-model.number="g">
        </div>

        <div>
            <span>B: </span>
            <input type="text" v-model.number="b">
        </div>

        <hr>

        <div class="box" :style="{backgroundColor: rgb}">  
            {{ rgb }}
            <!-- 使用时，就和普通属性一样用法 -->
        </div>
        <button @click="showColor">按钮</button>

    </div>

    <script src="./lib/vue-2.6.12.js"></script>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                r: 0,
                g: 0,
                b: 0
            },
            methods: {
                showColor() {
                    console.log(this.rgb);
                }
            },
            computed: {	
                rgb() {	//计算属性，声明时是函数形式
                    return `rgb(${this.r}, ${this.g}, ${this.b})`
                }
            }
        });
        console.log(vm);
    </script>
</body>

</html>

7. axios

axios是一个专注于数据请求的库。

基本使用：

安装命令

npm install axios -S

<script src="lib/axios.js"></script>
 <script>
     //axios()方法返回一个promise对象
     axios({
         method: 'get', //请求方式
         url: 'http://www.liulongbin.top:3006/api/getbooks', //请求路径
     }).then((result) => {
         console.log(result); //这里得到的result不是得到的数据，result.data才是，result是数据被axios包装后得到的
         console.log(result.data);
     })
 </script>

  1. 发起get请求

    <script src="lib/axios.js"></script>
<script>
    //axios()方法返回一个promise对象
    axios({
        method: 'get', //请求方式
        url: 'http://www.liulongbin.top:3006/api/getbooks', //请求路径
        params: { //查询参数，即请求方式为get时的参数
            id: 1,
        },
        // data: {
        //     //请求体参数：post时的参数，和params二选一
        // }
    }).then((result) => {
        console.log(result.data);
    })
</script>

  2. 发起post请求

    <button>发起POST请求</button>
<script src="lib/axios.js"></script>
<script>
    document.querySelector("button").addEventListener("click", async () => {
        // //axios()方法返回一个promise对象
        // axios({
        //     method: 'post', //请求方式
        //     url: 'http://www.liulongbin.top:3006/api/post', //请求路径

        //     data: {
        //         name: '张三',
        //         age: 11
        //     }
        // }).then((result) => {
        //     console.log(result.data);
        // })


        //不用then，简化版本
        //如果调用某个方法的返回值时Promise实例，则前面可以加await
        //await只能在被async修饰的方法中
        const {
            data: result
        } = await axios({ //使用解构赋值,把data属性结构出来,并重命名为result
            method: 'post',
            url: 'http://www.liulongbin.top:3006/api/post',

            data: {
                name: '张三',
                age: 11
            }
        });
        console.log(result);
    })
</script>

7.1 axios.get()

语法：

axios.get('url地址', {
 params: {
     get参数
 }
})

<button class="get">get</button>
<script src="lib/axios.js"></script>
<script>
    document.querySelector(".get").addEventListener("click", async () => {
        const {
            data: result
        } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
            params: {
                id: 1
            }
        });
        console.log(result.data);
    })
</script>

7.2 axios.post()

语法：

axios.post('url', {
	请求体参数   //注意，这里不需要写在data里面
})

<button class="post">post</button>
<script src="lib/axios.js"></script>
<script>
    document.querySelector(".post").addEventListener("click", async () => {
        const {
            data: result
        } = await axios.post('http://www.liulongbin.top:3006/api/post', {
            name: '张三',
            age: 21
        });
        console.log(result);
    })
</script>

学习链接：

黑马程序员Vue全套视频教程

Vue.js (vuejs.org)

赤蓝紫
关注
专栏目录
Vue学习笔记（尚硅谷天禹老师）
qq_55593227的博客
08-15 32万+
Vue学习笔记（尚硅谷天禹老师讲解） 1. Vue核心 1.1. Vue简介 1.1.1. 官网 英文官网 中文官网 1.1.2. 介绍与描述 动态构建用户界面的渐进式JavaScript框架 作者：尤雨溪 1.1.3. Vue的特点 遵循MVVM模式 编码简洁，体积小，运行效率高，适合移动/PC端开发 它本身只关注UI，可以引入其它第三方库开发项目 1.1.4.与其他JS框架的关联 借鉴 Angular 的模板和数据绑定技术 借鉴 React 的组件化和虚拟DOM
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
简单理解vue中实例属性vm.$els
11-30
vue实例属性vm.$els到底是什么？有哪些需要注意的？具体请阅读本文。 不需要表达式 参数： id（必需） 用法： 为 DOM 元素注册一个索引，方便通过所属实例的 $els 访问这个元素。 注意： 因为 HTML 不区分大小写，camelCase 名字比如 v-el:someEl 将转为全小写。可以用 v-el:some-el 设置 this.$els.someEl。 我的理解：$els类似于document.querySelector(‘.class’)的功能,可以拿到指定的dom元素。 Eg: <div></div> var _dom = thi
vue vm.$attrs 使用
weixin_33841722的博客
09-21 431
1、vm.$attrs 说明 https://cn.vuejs.org/v2/api/#vm-attrs 将父组件的属性（除去在props中传入的属性）传递给子组件。 2、代码分析 以下是element-ui input源码 &lt;input :tabindex="tabindex" v-if="type !== 'textarea'" ...
Vue.js vm对象详解
Andrew_SJ的博客
05-25 1489
转载自：@大自然的流风 原文链接：https://www.cnblogs.com/zdz8207/p/vue-vm-viewmodel.html vue数据是怎么驱动视图的? 一堆数据放在那里是不会有任何作用的，它必须通过我们的View Model（视图模型）才能操控视图。 图中的model其实就是数据，一般我们写成js对象的格式； 中间的这个所谓View Model，就是 var vm = new Vue({ el: ‘#app’, data: { message: ‘Hello Vue!’ } })
vue——VM对象和基础指令
qq_56668869的博客
08-29 2407
vue、VM对象和基础指令、插值表达式、文本指令、属性绑定
Vue——VM对象和基础指令（面试）
qq_52499745的博客
09-28 575
VM对象和基础指令
Vue学习笔记
04-29
Vue的学习笔记通常会包含以下核心知识点： 1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命周期、虚拟DOM等。数据绑定允许开发者用双大括号`{{ }}`在HTML中直接展示Vue实例中的数据。指令系统...
vue3学习笔记，亲测有效，持续更新
06-14
这篇学习笔记将逐步介绍如何从零开始搭建一个 Vue3 项目，以及在开发过程中遇到的关键概念和功能。 首先，Vue3 的安装是通过命令行工具 CMD 来完成的。在你希望创建项目的位置打开终端，然后使用 Vue CLI 或 Vite ...
VUE学习笔记
07-17
Vue的学习笔记将涵盖其核心概念、基本用法以及实际应用。 一、Vue的核心概念 1. 双向数据绑定：Vue采用MVVM（Model-View-ViewModel）模式，通过`v-model`指令实现了视图与数据模型之间的双向绑定，使得数据变化时...
深入浅出vue.js----实例方法与全局API的实现原理---生命周期相关的实例方法-vm.$mount
xuan的博客
12-23 351
一、概述 （1）不常用该方法，原因是如果在实例化Vue.js时设置了el选项，会自动把Vue.js实例挂载到DOM元素上。 （2）但是，无论我们在实例化Vue.js时是否设置了el选项，想让Vue.js实例具有关联的DOM元素，只有使用vm.$mount方法这一途径。 二、使用方式 vm.$mount( [elementOrSelecotr] ) （1）参数 { Element }...
vue源码阅读---vm实例上的属性
csdnWhyTrouble的博客
08-21 1251
vnode.$slot：组件实例里插槽的内容；组价开始标签和组件结束标签里包裹的内容；vnode.children：普通元素组件的子节点；vnode.componentInstacne：指向组件vnode的实例；在子组件实例化时，会有一个const child = vnode.componentInstance = createComponentInstanceForVnode；所以组件vnode的componentInsatcne就有值了。
VUE框架VM对象数据代理机制的实现原理------VUE框架
最新发布
春风若有怜花意，可否许我再少年
11-23 788
VUE框架VM对象数据代理机制的实现原理------VUE框架
vue vm格式适配移动端
qq_39216281的博客
12-27 475
npm install postcss-px-to-viewport --save-dev "postcss": { "plugins": { "autoprefixer": {}, "postcss-px-to-viewport": { "viewportWidth": 375, "unitPrecision": 3, "viewport...
Vue中的vm和VueComponent的实例对象
m0_50122836的博客
06-07 6540
大哥vm和他的小弟vc
简单概述理解vue的MVVM模型
见证自己学习,成长的记录
10-06 1657
M：模型(Model) ：对应 data 中的数据V：视图(View) ：模板VM：视图模型(ViewModel) ： Vue 实例对象它包括 DOM Listenters 和 Data bindings，前者实现了页面与数据的绑定，当页面操作数据的时候 DOM 和 Model 也会发生相应的变化。后者实现了数据与页面的绑定，当数据发生变化的时候会自动渲染页面。MVVM模型1 M:模型(Model)：data中的数据2 V:视图(View)：模板数据。
Vue学习之理解MVVM
wubin8518的博客
04-10 1048
理解MVVM
关于对Vue的MVVM的理解
weixin_45687036的博客
02-28 4403
关于对Vue的MVVM的理解
vue中MVVM的理解
Isabeldeng的博客
11-07 1940
M就是：模型（Model）：数据模型；负责数据存储。泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。 V就是：View 视图，负责页面展示，也就是用户界面。主要由 HTML 和 CSS 来构建 VM就是：视图模型（View-Model）：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示 通过vue类创建的对象叫Vue实例化对象，这个对象就是MVVM模式中的VM层，模型通过它可以将数据绑定到页面上，视图可以通过它将数据映射到模型上 ViewModel 是由前端开发人员组织
Vue学习笔记：核心概念与生命周期解析
"个人学习vue笔记，包含作者在学习和工作中整理的重要知识点，涵盖vue的指令、生命周期、计算属性等内容" Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。以下是对标题和描述中提及知识点的详细说明： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值