计算属性在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="example">{{ message.split(‘‘).reverse().join(‘‘) }} </div>在这种情况下，模板不再简单和清晰。在实现反向显示 message 之前，你应该确认它。这个问题在你不止一次反向显示 message 的时候变得更加糟糕。这就是为什么任何复杂逻辑，你都应当使用计算属性。基础例子<div id="exampl...
官网地址：https://cn.vuejs.org/v2/api/#Vue-nextTick一、作用修改数据后使用此方法，可以获取到更新后的DOM二、API Vue.nextTick([callback,context])三、使用// 全局function () {Vue.nextTick().then(function () {// DOM 更新了 ) } // 或者function() {Vue.nextTick(function() {// DOM 更新了 }) }// 局部function() {this.$nextTick(function() {// DOM 更新了 }) } 谦良恭卑，信诚实至；生活不易，共勉同求。原...
#####对象方法-最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染）:class="{ ‘active‘: isActive }"1判断是否绑定一个active:class="{‘active‘:isActive==-1}" 或者:class="{‘active‘:isActive==index}"123绑定并判断多个第一种（用逗号隔开）:class="{ ‘active‘: isActive, ‘sort‘: isSort }"第二种（放在data里面）//也可以把后面绑定的对象写在一个变量放在data里面，可以变成下面这样:class="cla...
1.在之前vue项目中,我们如果需要改变每个页面的title,是需要在路由里配置meta然后通过路由守卫将每个页面的title替换掉,但是在nuxtjs中他提供了一个方法,直接在每个.vue的文件中使用这个head方法即可修改每个页面的titlehead(){return {title:‘form表单‘} },2.在nuxtjs中使用vuex,和在vue中使用它是一样的,先 npm install vuex 然后再store下简历index.jsimport Vuex from ‘vuex‘import mutations from ‘./mutations‘const c...
1在src下建立router文件夹，再建立router.jsimport Vue from ‘vue‘ import Router from ‘vue-router‘ import home from ‘../components/home‘ import page01 from ‘../components/page01‘ import page02 from ‘../components/page02‘ import page01A from ‘../components/page01/page01-A‘ import page01B from ‘../components/page01/page01-b‘ import pageEnd from ‘../components/page01/B/end‘Vue.use(Router)...
1. 简单使用安装依赖$ npm install vue-i18n src下创建lang文件夹以及文件夹下zh.js,en.js和index.js文件zh.jsexport default {message: ‘好好学习 天天向上‘ }; en.jsexport default {message: ‘Good good study,Day day up‘ }; index.jsimport Vue from ‘vue‘; import VueI18n from ‘vue-i18n‘; import zh from ‘./zh‘; import en from ‘./en‘;Vue.use(VueI18n);const messages = {zh,en };const i18n = new VueI18n...
复制功能，选中复制或者点击复制（不使用插件的情况下）1、选中复制这个比点击复制简单点<template> <div> <el-button type="primary" plain @click="copy()">复制</el-button> </div></template><script>export default { data(){ return{ } }, methods:{ copy(){ document.execCommand("Copy"); // 执行浏览器复制命令 this.$message({ message: ‘复制成功‘, type: ‘...
@1===》发现一个神奇的地方在对数组进行增加删除的时候 react中一个输入框点击enter键，然后数组push，然后渲染<input ref=‘valInput‘ onKeyUp={this.sureEnter}></input>还必须拆开来写这么写是不对的必须拆开一步一步来写,日了狗了，删除也是 *********************************************************************************************************************************************************@2===》封装公共方法...
参考资料 https://www.bilibili.com/video/av24099073?from=search&seid=10362817679461041383https://github.com/sunny-sky/VueDemo/blob/master/src-todos2/components/TodoList.vue vue part5.2 vuex todolist 改写vue part5.1 vuex引入及案例 计数vue part4 vue-routervue part3.4 小案例 消息订阅pubsub与ajaxvue part3.3 小案例ajax (axios) 及页面异步显示vue part3.2 小案例 todo 列表展示删除vue part3.1 小案例 comments...
写在前面这篇文章的主要目的是学会使用koa框架搭建web服务，从而提供一些后端接口，供前端调用。搭建这个环境的目的是： 前端工程师在跟后台工程师商定了接口但还未联调之前，涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径，而不是直接在前端写几个死数据。即，模拟后端接口。当然在这整个过程（搭建环境 + 开发示例demo）中，涉及到以下几点知识点。包括：koa2的知识点node的知识点跨域问题fetch的使用axios的使...
webpack会搜索当前目录中的webpack.config.js文件，webpack.config.js是一个node.js模块，返回一个json格式的配置信息对象。（简单说webpack.config.js是webpack的配置文件） asp.net mvc理论qq群 516356157原文：http://www.cnblogs.com/dagedan/p/5652302.html
App.vue<template><div id="app"><h3>welcome vue-loading</h3><Loading></Loading> <!--<Loading></Loading>是自定义组件--> </div></template>main.jsimport Vue from ‘vue‘ import App from ‘./App.vue‘import Loading from ‘./components/loading‘ //定义Loading,components、loading是一个文件夹，loading里面必须要index.jsVue.use(Loading) //use Loadingnew Vue({el: ‘#app‘,render: h => h(App) })index....
1,拿到一个项目，里面没有node_modules得先cmd 到这个目录下面，cnpm install 安装依赖安装后，npm run serve发现报错，少了eslint在page.json配置下，添加 "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }再运行，发现有 eslint格式bug, ...
vue.js的组件使用过程分为三个步骤：1、创建组件构造器； 2、注册组件； 3、使用组件组件同时也分为全局组件与局部组件 1、全局组件 2、局部组件 注意：由于 HTML 标签不区分大小写，所以在生成的标签名都会转换为小写。例如，当你的 template 为 <MyComponent></MyComponent> 时，插入 DOM 后会被转换为 <mycomponent></mycomponent>。原文：http://www.cnblogs.com/caojiayan/p/6866941.html
1. router-link跳转 // 直接写上跳转的地址<router-link to="/detail/one"><span class="spanfour">link跳转</span></router-link>// 添加参数<router-link :to="{path:‘/detail/two‘, query:{id:1，name:‘vue‘}}"></router-link>// 参数获取id = this.$route.query.id// 新窗口打开<router-link :to="{path:‘/detail/three‘, query:{id:1，name:‘vue‘}}" target="_blank"></router-link> 2. this.$router.push跳转 t...