vue中组件的引用嵌套通过export import语法链接 Nodejs中的 export importP1.jsexport default {name: ‘P1‘ } index.jsimport P1 from‘./P1.js‘alert(P1.name);P1.name的内容就是P1.js文件中name的值‘P1‘/opt/wks/vue/01_webpack/node_modules/.bin/webpack-cli index.js --output build.js$ cat index.html <html><head><meta charset="utf-8"></head><body><script type="text/javascript" src="build.js" charset="utf-...
目录基础使用小剧场基础使用vue-router是vue中的路由，使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。vue-router的官方文档：https://router.vuejs.org/zh/guide/在vue文件中，即通过<router-view></router-view>或者<router-view />来渲染路由匹配到的组件。路由文件index.js中： {path...
watch: { ‘$route‘(to, from) { if (from.name === ‘addPurchase‘) { } if (to.name === ‘addPurchase‘) { } else {} } }原文：https://www.cnblogs.com/wssdx/p/11506303.html
在vue中，由于是单页面SPA，所以需要使用锚点来定位，在vue的官方文档中提到过也可以不使用锚点的情况，就是在vue-router中使用history模式，这样，在url中就不会出现丑陋的#了，但是这样的缺点在于不能再页面中再使用自己设定的锚点（利用href、name或id）并且需要后台的支持，所以一般我们使用带#的形式就可以了。 而在这之中一种比较特殊的情况在于，如果查询字符串和vue中的锚点同时出现，那么他们的位置关系是怎样的问题，...
在版本2中这样定义的1、 .enter （回车键）2、 .tab 3、.delete （捕获”删除“和”退格“键）4、 .esc （退出键）5、 .space （空格键）6、 . up 7、 .dowm 8、 .left 9、 .right （右箭头） 可以通过 Vue.config.keyCodes.f2=113 自定义按键修饰符 f2 是自定义的名称 ，113是键盘对应的码值 原文：https://www.cnblogs.com/Progress-/p/12005738.html
vue中的provide和inject（依赖注入）一、名词解析provide：Object | () => Objectinject：Array | { [key: string]: string | Symbol | Object }provide：提供依赖``是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。inject:注入依赖一个字符串数组，或者一个对象，属性值可以是一个对象，包含from和default默认值说明：provide和inject主要在开发高阶插件/组件库时使用，并不推荐用于...
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script><script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script></head><div id="app" style="width: 100%;height: auto;font-size:20px;"><p id="id1"></p><p id="id2"></p></div><script type="text/javascript">var message ="Hello!";var app =new Vue({el:"#app",data:{message: "...
1. 文本框绑定v-module 1 <div id="app">2 <input type="text" v-model="msg" value="666"> // 表单使用v-mode时value会失效3 {{msg}}4 </div>5 6 <script src="js/vue.js"></script>7 <script>8 let vm = new Vue({9 el: "#app", 10 data: { 11 msg: ‘‘ 12 } 13 }) 14 </script>2. 单选按钮绑定v-module <div id="app...
let ok = ref(true)watchEffect( onInvalidate => {// 代码一console.log(‘执行一些代码‘, ok.value) console.log(‘执行更多的代码‘); // 代码二 onInvalidate(()=>{ console.log(‘除了在初始运行时不被调用，我总是在【执行一些代码】之前被执行(调用)‘); }) })1、watchEffect参数的定义, 一层一层的，每一层都是一个函数指针。C/C++watchEffect（fn1）; fn1(fn2);fn2(fn3);onInvalidate 就是 fn2;2、fn1首次执行时，on...
1.不在vue的时候可直接用class类引入。其中，active,thin,red 是在style样式中定义好的样式。<h1 class="active thin red">不积跬步，无以至千里</h1>2.在为class 使用v-bind 绑定 对象的时候，对象的属性是类名。其中，calssObj是在new出来的vue中的data中的定义的一个对象。<h1 :class="calssObj">不积跬步，无以至千里</h1>data 中定义的对象，calssObj。red，thin，italic，active是在style标签中定义的样式。data:{calssObj:{...
新建一个外部公共的js文件app.js，定义一个对象并输出，如下：var hybrid = {} window.Hybrid = hybrid if (window.Vue) { // 自动绑定 window.Vue.use(hybrid) }export { hybrid }在需要的文件中引入app.js，将需要暴露的方法赋给hybrid对象，如下：在安卓或者iOS上可调用hybrid.clickMusic来执行函数 原文：http://www.cnblogs.com/xunhuang/p/7514115.html
<div id="app"><input type="text" v-model="searchName">{{test1}}<ul><li v-for="p in test2">{{p.name}}</li></ul><ul><li v-for="p in getPersons">id:{{p.id}},Name:{{p.name}},Age:{{p.age}}</li></ul><br />根据文本框输入的内容，查找相应的字段<ul><li v-for="p in getPersons2">id:{{p.id}},Name:{{p.name}},Age:{{p.age}}</li></ul></div><script type="text/javascript">var vue = new Vue({el: "#app",data: {persons...
一、定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数二、nextTick() 使用原理Vue是异步执行dom更新的，一旦观察到数据变化，不会马上更新dom，而是Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这...
Vue项目中实现用户登录及token验证先说一下我的实现步骤：使用easy-mock新建登录接口，模拟用户数据使用axios请求登录接口，匹配账号和密码账号密码验证后， 拿到token，将token存储到sessionStorage中，并跳转到首页前端每次跳转时，就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面。注销后，就清除sessionStorage里的token信息并跳转到登录页面使用easy...
https://segmentfault.com/a/1190000018125564 很完善了，重点是两个过程图。<style>.fade-enter{opacity: 0;}.fade-enter-active{transition: opacity 3s;}/* .fade-enter-to{color: red;}.fade-leave{color: green;} */.fade-leave-to{opacity: 0;}.fade-leave-active{transition: opacity 3s;}</style></head><body><!-- 过程如下：显示 fade-enter,fade-enter-active fade-enter-active,fade-enter-to 空隐藏 fade...