vue

全局安装/配置API更改 在Vue2.x中对全局属性和全局API函数是这么玩的 import Vue from 'vue' import App from './App.vue' Vue.config.ignoredElements = [/^app-/] Vue.use(/* ... */) Vue.mixin(/* ... */) Vue.component(/* ... */) Vue.directive(/* ... */) new Vue({ render: h => h(App) }).$mount('#app') 现在，让我们看看它如何在Vue 3中运行： import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) app.config.ignoredElements = [/^app-/] app.use(/* ... */) app.mixin(/* ... */) app.component(/* ... */) app.directive(/* ... */) app.mount('#app') 您可能已经注意到，每个配置都限于使用定义的某个Vue应用程序createApp。 它可以使您的代码更易于理解，并且不易出现由第三方插件引起的意外问题。当前

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child }, methods: { fatherMethod() { console.log('测试'); } } }; </script> 子组件 <template> <div> <button @click="childMethod()">点击</button> </div> </template> <script> export default { methods: { childMethod() { this.$parent.fatherMethod(); } } }; </script> 第二种方法是在子组件里用 $emit 向父组件触发一个事件，父组件监听这个事件就行了。 父组件 <template> <div> <child @fatherMethod="fatherMethod"></child> </div> </template> <script> import child from '~

vue中如果父组件想调用子组件的方法，可以在子组件中加上ref，然后通过this.$refs.ref.method调用，例如： 父组件： <template> <div @click="fatherMethod"> <child ref="child"></child> </div> </template> <script> import child from '~/components/dam/child.vue'; export default { components: { child }, methods: { fatherMethod() {this.$refs.child.childMethods(); } } }; </script> 子组件： <template> <div>{{name}}</div> </template> <script> export default { data() { return { name: '测试' }; }, methods: { childMethods() { console.log(this.name); } } }; </script> 来源： https://www.cnblogs.com/wangbin96/p/12585624.html

路由跳转 this.$router.push('/course'); this.$router.push({name:'course'}) this.$router.go(-1) // js逻辑使用history,完成返回上一页 this.$router.go(1) // 前进一页 <router-link to="/course">课程页</router-link> <router-link :to="{name:'course'}">课程页</router-link> 路由传参 第一种 router.js routes: [ // ... { path: '/course/:id/detail', name: 'course-detail', component: CourseDetail }, ] 跳转.vue <template> <router-link :to="`/course/${course.id}/detail`">{{ course.name }}</router-link> </template> <script> // ... goDetail() { this.$router.push(`/course/${this.course.id}/detail`); } </script> 接受.vue created() { let id = this.

Dom模版 dom模版直接写在dom结构中，例如： <div id="box"> <name></name> </div> <!-- 父组件模版 --> <template id="name"> <h2>{{msg}} => {{string}}</h2> <age :data-msg='msg' :data-string='string'></age> </template> <!-- 子组件模版 --> <template id="age"> <h2>18</h2> <span>{{dataMsg}} => {{dataString}}</span> </template> <script> var vm = new Vue({ data:{ }, components:{ 'name':{ data(){ return { msg:'我是父组件数据', string:'我是父组件的另外一个数据' } }, template:'#name', components:{ 'age':{ props:['dataMsg','dataString'], template:'#age' } } } } }).$mount('#box'); </script> 字符串模版 字符串模版写在template属性中，例如： <div id="box"> <aaa></aaa> </div>

这个是因为node-sass没安装好，所以要重新安装 windows下运行命令：npm install node-sass --registry=https://registry.npm.taobao.org 来源： https://www.cnblogs.com/syingBlog/p/12580163.html

  Vue是数据驱动的框架，在修改数据时，视图会进行更新。数据响应式系统使得状态管理变的简单直接，在开发过程中减少与DOM元素的接触。而深入学习其中的原理十分有必要，能够回避一些常见的问题，使开发变的更为高效。 一、实现简单的数据响应式系统   Vue使用 观察者模式 （又称 发布-订阅模式 ）加 数据劫持 的方式实现数据响应式系统，劫持数据时使用 Object.defineProperty 方法将 数据属性 变成 访问器属性 。Object.defineProperty 是 ES5 中一个无法 shim 的特性，因此Vue 不支持 IE8 以及更低版本浏览器。   Vue源码中对数据响应式系统的实现比较复杂，在深入学习这部分源码之前，先实现一个较为简单的版本更有助于后续的理解。代码如下所示： let uid = 0 // 容器构造函数 function Dep() { // 收集观察者的容器 this.subs = [] this.id = uid++ } Dep.prototype = { // 将当前观察者收集到容器中 addSub: function(sub) { this.subs.push(sub) }, // 收集依赖，调用观察者的addDep方法 depend: function() { if(Dep.target){ Dep.target.addDep(this)

　　这一段时间工作上不是很忙，所以让我有足够的时间来研究一下VueJs还是比较开心的 (只要不加班怎么都开心)，说到VueJs总是让人想到双向绑定，MVVM，模块化，等牛逼酷炫的名词，而通过近期的学习我也是发现了Vue一个很神奇的方法$watch，第一次尝试了下，让我十分好奇这是怎么实现的， 为什么变量赋值也会也会触发回调？这背后又有什么奇淫巧技？怀着各种问题，我看到了一位大牛，杨川宝的文章，但是我还是比较愚笨，看了三四遍，依然心存疑惑，最终在杨大牛的GitHub又看了许久，终于有了眉目，本篇末尾，我会给上链接 　　在正式介绍$watch方法之前，我有必要先介绍一下实现基本的$watch方法所需要的知识点，并简单介绍一下方便理解： 　　　　1） Object.defineProperty ( obj, key , option) 方法 　　　　　　　　这是一个非常神奇的方法，同样也是$watch以及实现双向绑定的关键 　　　　　　　　总共参数有三个，其中option中包括 set(fn), get(fn), enumerable(boolean), configurable(boolean) 　　　　　　　　set会在obj的属性被修改的时候触发，而get是在属性被获取的时候触发，（ 其实属性的每次赋值，每次取值，都是调用了函数 ） 　　　　2） Es6 知识，例如Class，()

Vue工作原理&实现双向绑定MVVM 本文能帮你做什么？ 1、了解vue的双向数据绑定原理以及核心代码模块 2、缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现，本文相关代码主要摘自 vue源码 , 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环依赖等，也难免存在一些问题，欢迎大家指正。不过这些并不会影响大家的阅读和理解，相信看完本文后对大家在阅读vue源码的时候会更有帮助< 本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm 相信大家对mvvm双向绑定应该都不陌生了，一言不合上代码，下面先看一个本文最终实现的效果吧，和vue一样的语法，如果还不了解双向绑定，猛戳 Google <div id="mvvm-app"> <input type="text" v-model="word"> <p>{{word}}</p> <button v-on:click="sayHi">change model</button> </div> <script src="./js/observer.js"></script> <script src="./js/watcher.js"></script> <script src="./js/compile.js"></script> <script src="./js

1.安装 cnpm i vue-seamless-scroll -S 2.组件调用 import vueSeamless from "vue-seamless-scroll"; （或者全局注册） 3. https://www.npmjs.com/package/vue-seamless-scroll https://chenxuan0000.github.io/vue-seamless-scroll/index.html#/routerOne 例子 <vueSeamless :data="testList" :class-option="defaultOption" class="seamless-warp" ref="seamless"> <div class="scorll-content" v-for="(item,index) in testList" :key="index"> <div>{{ index + 1 }}</div> <div>{{ item.xx}}</div> <div>{{ item.xx}}</div> <div>{{ item.xx}}</div> <div>{{ item.xx}}</div> <div>{{ item.xxx}}</div> <div>{{ item.xxx}}</div> </div> </vueSeamless>