vue中的vm是什么

2024-09-06

Vuejs vm对象详解

Vuejs vm对象详解 vue数据是怎么驱动视图的?一堆数据放在那里是不会有任何作用的,它必须通过我们的View Model(视图模型)才能操控视图. 图中的model其实就是数据,一般我们写成js对象的格式: 中间的这个所谓View Model,就是 var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})我们把数据放到了vm里,然后把各种directive放到视图里,这样我们就可以以vm为媒介,通过改变数据来改变视图.

vue中export default 在console中是this.$vm

vue中export default 在console中是this.$vm 用vue-cli搭出框架,用webstorm进行开发,参考vue2的官网进行教程学习, 在vue-cli中是用es6的export default写法写的,所以vue2教程中的 var app2 = new Vue({ msg:'Weilcome !!' }) 就变为了 export default{ name: 'app2', data(){ return { msg:'Welcome!!' } } } 而教程中说的在

Vue中comoputed中的数据绑定

Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep.notify进行发布通知,实现视图的更新. 1.在vue中$option.data中定义的数据是都是响应式的,在初始化生命周期的时候就已经实现了数据双向绑定,通常在view中只是用一个表达式语句,当绑定时的逻辑比较复杂是可以通过计算属性的方式实现.但是在computed中定义的属性只具有get方法,

【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据

前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向绑定的的用法, 于是决定写一篇文章, 再次总结下“Vue中的父子组件通信”. 前面提示:本文文字略少,代码略多父子组件通讯,可分为两种情况: 1. 父组件向子组件中传递数据2. 子组件向父组件中传递数据一般情况下, 1中情况可通过props解决数据传递的问题, 这里就不多赘述了. 主要谈谈2中情景的实现,

理解Vue中的Render渲染函数

理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现如下html: <div id="container"> <h1> <a href="#"> Hello world! </a> </h1> </div> 我们会如下使用: <!DOCTYPE

vue中什么样的数据可以是在视图中显示

1. Vue中不可以添加不存在的属性,因为不存在的属性是没有getter和setter的. <div id="app"> {{msg.a}} {{msg.b}} </div> <script src="js/vue.js"></script> <script> let vm = new Vue({ el: "#app", data: { msg: { a: 1 } } }) vm.msg

Vue.js-11：第十一章 - Vue 中 ref 的使用

一.前言在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取到的 DOM 元素进行操作.但是,当我们开始在前端项目中使用 Vue 这类的 MVVM 框架之后,对于 DOM 的操作我们就应当完全的交给框架,而我们只需要关注于数据.难道,在 Vue 中就不能手动获取到页面上的 DOM 元素了吗,答案当然是可以手动获取到 DOM 元素的,在 Vue 中我们可以通过

Vue学习笔记七：Vue中的样式

目录两种样式 class样式内联样式两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w

Vue中ajax返回的结果赋值

这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, created:function(){ $.ajax({ url:'', data:'', dataType:'json', success:function(res){ this.msg = res.data; } }) } }) 原因在于在ajax的success函数中,this的指向不再是vue的实例

vue 源码学习三 vue中如何生成虚拟DOM

vm._render 生成虚拟dom 我们知道在挂载过程中, $mount 会调用 vm._update和vm._render 方法,vm._updata是负责把VNode渲染成真正的DOM,vm._render方法是用来把实例渲染成VNode,这里的_render是实例的私有方法,和前面我们说的vm.render不是同一个,先来看下vm._render定义,vm._render是通过renderMixin(Vue)挂载的,定义在src/core/instance/render.js: // 简

checkbox在vue中的用法小结

关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插件中用到过的checkbox也只是别人写好的组件,这次在自己实现时走了很多坑,特意写这篇文章记录下来,给后来者提供一个参考在这之前,先看看原生checkbox搭配jquery取值的用法 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <input type="check

【转】简单理解Vue中的nextTick

前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一.示例先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. 模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="

Vue源码之----为什么Vue中Array的pop，push等方法可以reactive，而Array[0]='a'这样的方法不会reactive?

这就要从reactive开始讲起了,粗略的说,js的操作能引起页面上显示的改变,是因为该操作引起了组件的重新渲染,渲染会生成新的虚拟节点,新节点和旧节点会对比,操作浏览器的node进行改变. vue实例以下简称vm 说具体点 data()方法的返回值以及watch,props,computed里面的属性,,在这之前都会被defineReactive方法重写get和set方法(get方法重写为调用的时候收集Dep这个静态变量指向的watcher,set方法调用的时候会notify收集的watche

vue中具名插槽的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的具名插槽的使用</title> </head> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script&

Vue中观察者模式的实现

Vue中实现观察者模式的方法可以有三种: 1.v-on方法 exp: <div id='test'> <button v-on:event='functionName'>buttonName</button> </div> var vm = new Vue({ el:'#test', method:{ functionName: function(){}; } } v-on 可以将DOC中发生的事件与相应的函数绑定,当事件发生时,绑定的函数会被调用! 2.c

3-7 Vue中的列表渲染

举个案例:循环data中的list的值在div中,并显示相应的index值. 关于数组的循环: //显示效果如下图: //一般的列表渲染最好带一个key值,要把key值设置为唯一值的话,可以选择index.但在频繁操作DOM元素相对应的数据的时候,它还是有点浪费性能,可能让Vue没法充分复用DOM节点,所以不太建议用index来做key值 //所以一般的项目中的后端会传递过来一些数据,这些数据可以把它作为key值来使用(一般会携带一个后端或数据库相关的一个唯一的数据条目标识符,例如:id) /

简单理解Vue中的nextTick

Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一.示例先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. 模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1&q

vue中Axios的封装和API接口的管理

前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axios查看更多关于 axios 的文章的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和nod

vue中的单文件组件

之前都是在html文件中写组件的css,组件的js,组件的模板来演示vue组件的语法,下面介绍以.vue结尾的单文件组件.vue-loader是一个Webpack的loader,可以将单文件组件转换为JavaScript模块.一.基本组成单文件组件中包含<template>.<script>.<style>三种代码块.<template>默认语言是html,内容将被提取为字符串,编译结果作为Vue组件的template选项,一个.vue文件最多包含一个<

Vue中computed，methods 和watch

Vue中的计算属性和方法属性 1.计算属性 computed 模版中可以使用表达式 <div id="example"> {{ message.split('').reverse().join('') }} </div> 但是模版中的表达式太长,逻辑稍微复杂,应该使用计算属性例如: html <div id="example"> <p>Original message: "{{ message }}&quo

checkbox在vue中的用法总结

前言关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于vue中用到过的checkbox也只是别人写好的组件,这次在自己实现时走了很多坑,特意写这篇文章记录下来,给后来者提供一个参考在这之前,先看看原生checkbox搭配jquery取值的用法 <input type="checkbox" name="hobby"

vue中的vm是什么

热门专题