vue | 易学教程

Vue父组件向子组件传递数据

阅读更多关于 Vue父组件向子组件传递数据

引言在 vue中，子组件想要拿到父组件上的数据，该怎么拿？创建vue实例，创建子组件模板 <body> // vue实例控制区域 <div id="app"> *通过绑定子组件props上的属性，将父组件上的msg数据传递给子组件* <tem-app :mark="msg"></tem-app> </div> // 子组件模板 <template id="tem"> <div> *子组件子需要引用下自定义的mark属性，即可拿到父组件上传递过来的数据* <h3>我是子组件-----{{ mark }}</h3> </div> </template> <script> // 定义全局子组件 Vue.component('tem-app',{ template : '#tem', props : ['mark'] }) // Vue实例 var vm = new Vue({ el : "#app", data : { msg : '2017130440' } }) </script> </body> 注意 : 子组件如果想要用父组件传递过来的数据，就需要将子组件定义的属性原样的输出一下总结在子组件在props中创建一个属性，用以接收父组件传过来的值在子组件标签中添加子组件props中创建的属性父组件中注册子组件通过属性绑定的方式，把需要传给子组件的值赋给该属性来源：

vue生命周期钩子

阅读更多关于 vue生命周期钩子

vue生命周期钩子生命函数的介绍 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是 Vue 的生命周期生命函数的一一讲解 beforeCreate 实例还没有完全创建出来之前执行 created 实例创建完成后立即调用 beforeMount 在挂载之前被调用 mounted 表示内存的模板已经渲染页面中，此时数据已经可以经过Vue的编译 beforeUpdate 当页面数据发生了改变，就会去触发，当前页面的数据不会改变，内存的数据发生改变,数据没有同步 updated 当事件执行的时候，页面的数据已经和内存里面的是一致的，数据已经同步 beforeDestroy 组件销毁的时候去执行的 destroyed 事件执行后，所有的对于vue实例的指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。来源： CSDN 作者：曹豆芽链接： https://blog.csdn.net/qq_41108972/article/details/104325301

VUE系列——Chrome安装Vue调试插件

阅读更多关于 VUE系列——Chrome安装Vue调试插件

前言 Vue是一个很好用的前端，但是在浏览器上面不能直接打断点调试程序。下面介绍通过安装调试插件对程序进行调试按F12之后，出现一个Vue选项，效果如下：安装过程 step1 下载插件并解压链接：点我进入提取码：2tcj step2 进入到Chrome扩展程序页面点击开发者模式 chrome://extensions/ step3 点击加载已解压的扩展程序 step4 选择解压后的文件夹结果出现下面的效果就已经安装好了：来源： CSDN 作者： a伊雪链接： https://blog.csdn.net/u010565037/article/details/104317239

vue项目加载前空白的动画过渡效果

阅读更多关于 vue项目加载前空白的动画过渡效果

参考： https://github.com/mgbq/nx-admin 复制以下html内容到项目的index.html中即可： <style> html, body, #app { height: 100%; margin: 0px; padding: 0px; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; /* COLOR 1 */ border-top-color: #FFF; -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari

vue, webpack配置报错, vueDemoTow@1.0.0 dev: `webpack-dev-server`

阅读更多关于 vue, webpack配置报错, vueDemoTow@1.0.0 dev: `webpack-dev-server`

错误信息: npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vueDemoTow@1.0.0 dev: `webpack-dev-server` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vueDemoTow@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\wei\AppData\Roaming\npm-cache\_logs\2020-02-14T07_30_52_311Z-debug.log 我的这个报错是因为我早已经安装了cnpm i webpack-cli -g, 以为已经安装了全局了, 但是还是报错找不到愿意再重新在本地项目中, 安装 cnpm i webapck-cli 后问题就解决了解决方法: 将需要依赖的包, 在本地项目中重新安装一次, 即使是全局的包 cnpm i webpack cnpm i webpack-cli

自己写代码理解Vue的数据双向绑定

阅读更多关于自己写代码理解Vue的数据双向绑定

重要代码的作用都写在代码注释中了。核心点： 1、Object.defineProperty()，相当于给相关属性在取值和赋值时增加proxy，可以执行proxy中的功能，这里就是在get是进行双向绑定 2、Compiler的本质就是遍历html文档，把按照vue规范定的字段找出来做处理。比如{{deep.a}}取出来之后，从vm实例中拿出真实的值把{{deep.a}}替换掉。 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > Title </ title > </ head > < body > < div id = " app " > < div > {{deep.a}} </ div > < input v-model = " deep.a " > </ div > < script > class Dep { static target = null static targetStack = [ ] static pushTarget ( _target ) { if ( Dep . target ) { Dep . targetStack . push ( Dep . target ) } Dep . target = _target }

VUE中常见的面试题目

阅读更多关于 VUE中常见的面试题目

1.vue 的双向绑定原理关于MVC 和MVVM 结构 2.vue-router vue-router的实现主要为了解决单页面应用的问题，实现了页面跳转但是不重新发送请求，vue-router的实现模式包括了 1.hash模式 hash模式主要利用浏览器中输入的URL#之后的内容改变，页面也不会刷新, 2. h istory.pushState 利用h5中的history.pushState()API可以不产生#但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。 vue-router的使用 1.动态路由匹配可以通过在path中添加:id来对有不同id的页面进行匹配，可以通过this.$routrt.params.id来获取不同页面的id 2.路由的嵌套可以通过children来匹配路由 3.编程式的导航， this.$router.push(path:'' query:) 路由导航守卫可以用router.beforeEach()来注册一个全局前置守卫 router.beforeEach((to, from, next) => { // ... }) 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve

Vue组件之间的传值的方式

阅读更多关于 Vue组件之间的传值的方式

父子组件之间的传值方法一：props 和 $emit 父组件：传值count给子组件 <template> <div class="hello">  <Header @func="Receive" :count="msg"></Header>  </div> </template> <script> import Header from '@/components/header/index.vue' export default { name: 'index', data(){ return { msg: "你好，我是父组件传过来的值" } }, components:{ Header }, methods:{ Receive(msg){ console.log(`父组件：${msg}`); } } } </script> <style scoped> </style> 子组件接收：子组件通过props接收父组件传来的值 export default { name: 'Header', props:{ count: String }, data(){ return { title: 'hello' } } } 子组件向父组件传值子组件：子组件点击之后通过$emit传值给父组件 <template> <div class=

vue修改数组某一个值

阅读更多关于 vue修改数组某一个值

起初想当然以为this.checked[item] == true ;可以修改数组的值，屡试无果后来改成 this.$set(this.checked,item,true) 完美修改数组的某一个值具体原因不清楚，反正问题解决了[狗头][狗头][狗头] 来源： https://www.cnblogs.com/comedy/p/12310523.html

Vuejs——（2）Vue生命周期，数据，手动挂载，指令，过滤器

阅读更多关于 Vuejs——（2）Vue生命周期，数据，手动挂载，指令，过滤器

（八）传入的数据绑定先创建一个对象（假如是obj ），然后将他传入 Vue 实例中，作为 data 属性的值，那么 ① obj 的值的变化，将影响 Vue 实例中的值的变化； ②相反一样； ③可以在 Vue 实例外面操纵 obj ，一样对 Vue 实例有影响； ④获取 obj.a 的值（假如他有这个属性），可以通过 Vue 实例（例如变量 vm ）， vm.a 这样的形式来获取（他们是等价的，也是绑定的）； ⑤后续添加的数值是无效的例如： <div id= > {{a}} >+1</button> obj = {a: 1} vm = Vue({ el: , add() { </script> add 函数中两条语句效果是等价的，都可以让显示的值 +1 但若将代码改成这样： var var Vue({ , data: obj function } 那么在点击按钮后，并不会显示值（没有绑定）。注意：即使修改为vm.a=1 也是无效的准确的说，在Vue 实例创建后，添加新的属性到实例上，是不会触发视图更新的。在以上情况下， obj.a === vm.a ，注意，a 之前没有 data 。函数： function (vm.a === obj.a) { } 其判断条件是true （九）Vue 实例暴露的接口在上一篇中，提到vm.a=obj.a 这个；然而我们并没有获取全部的

订阅 vue