1、安装vue-cli脚手架后，即可开始创建第一个vue项目，首先新建一个空文件夹，打开该文件夹，按住shift键的同时点击鼠标右键，出现如下图所示的菜单，选择“在此处打开命令窗口”打开命令行。2、在命令行里输入vue init webpack project1，即可创建一个新的vue项目，其中需要做一些选择，如下图所示。3、创建好project1项目后，打开该文件夹，里面有一个index.html文件，当布署到服务器之后，这个页面就是首页面。用写字本打开inde...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>智能社——http://www.zhinengshe.com</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><style></style><link rel="stylesheet" href="lib/bootstrap.min....
在Vue中定义方法或者属性时，因为粗心疏忽可以能会报该错误[Vue warn]: Property or method "search" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.属性或方法“search”不是在实例上定义的，而是在呈现期间引用的。通过初始化该属性，确保该属性是反应性的，无论是在data选...
参考博客单个插槽单个插槽是vue的官方叫法，也可以叫它默认插槽，或者与具名插槽相对，也可以成为匿名插槽，因为它不用设置name属性单个插槽可以放在组件的任意位置，但一个组件最多有一个该类插槽。例子：<template><div class="father"><span>这里是父组件</span><child><div>父组件在子组件内添加的html片段</div></child></div> </template> <template><div class="child"><span>这里是子组件</span><slot></slot></div> </tem...
一.Vue环境搭建1.安装node去官网下载node安装包傻瓜式安装万一安装后终端没有node环境，要进行node环境变量的配置(C:\Program Files\nodejs)可以通过node提供的npm包管理器安装vue脚手架通过npm安装淘宝镜像cnpm，将nmp指令都修改为cnpm指令(npm install -g cnpm --registry=https://registry.npm.taobao.org)2.安装全局vue脚手架起管理员终端(mac: sudo)cnpm install -g @vue/cli如果安装失败，检测网络，请npm缓存(npm cache cle...
1. v-bind和v-model的区别？v-bind用来绑定数据和属性以及表达式，缩写为‘：‘v-model使用在表单中，实现双向数据绑定的，在表单元素外使用不起作用2. Vue 中三要素的是什么？2.1 响应式 // 如何让实现响应式的呢？let obj = {};let name = 'zhangsan';Object.defineProperties(obj, name, {get : function() {console.log('name' , name)}, set : function() {console.log('name' , name)}})// 1. 关键是理解Object.definePro...
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。--官网简介注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册;https://www.cnblogs.com/web-cuicui/p/12629079.html在这块中，引用ref这个属性只要是为了操作下拉框。原文：https://www.cnblogs.com/web-cuicui/p/12637400.html
基本语法格式：<script>new Vue({ el: ‘#app‘, data: { url: ‘http://www.runoob.com‘ }})</script> 指令 【指令是带有 v- 前缀的特殊属性。】 判断 <p v-if="seen">现在你看到我了</p> 参数 <a v-bind:href="url">菜鸟教程</a> 监听 v-on 指令，它用于监听 DOM 事件： <a v-on:click="doSomething"> 过滤器：{{ message | capitalize }} 或 <div v-bind:id="rawId | formatId"></div> ...
vue项目与nuxt.js实在有着太多的不同，例如项目结构变化很大，router.js没了，vuex store写法有变化，router钩子没了等等。老项目毕竟也有一些体量，这么折腾我可接受不了，不过经过一番调查，我发现这些问题不是不可以解决。因此虽然迁移是要迁移的，但是要尽量保持vue-cli 3项目的风味，以最小的改动完成迁移。为此我做了很多调查，本文的目的就在于此。1、重建项目 没啥可说的，直接掏出命令行开始吧，npx create-nuxt-app m...
初学者建议先不用eslint，熟悉一点了再用，不然代码全都过不了关闭方法 然后打开webpack.base.conf.js找到 然后注释掉就可以了 原文：https://www.cnblogs.com/pangbo1213/p/8566737.html
子组件<template><a class="getvalidate":class="{gray: (!stop)}"@click=‘clickHandler‘>{{ stop ? ‘获取验证码‘ : `（${mytimer}）秒后重新获取` }}</a> </template><script> export default {name: ‘getvalidate‘,data () {return {stop : true,mytimer: this.timer,Interval: null,}},methods: {clickHandler (e) {if (this.stop) { // 调用外部绑定的倒计时，并且给它开关this.$emit(‘click‘, this.startTimer);}},up...
1.关闭烦人的eslint 语法检测，在 config 文件夹下 设置：// Use Eslint Loader? // If true, your code will be linted during bundling and // linting errors and warnings will be shown in the console. useEslint: false, //设置为false 2.引入scss样式文件，在需要引入的组件代码最后加上：<!-- Add "scoped" attribute to limit CSS to this component only --><style lang=‘scss‘ scoped>@import ‘../assets/...
路由配置{ path: ‘/finance‘, name: ‘Finance‘, meta: { title: ‘财务‘ }, component: () => import(‘@/components/Finance‘), redirect: ‘/finance/code/code‘, children: [{ path: ‘/finance/code‘, name: ‘financeindex‘, meta: { title: ‘税收配置‘ }, redirect: ‘/finance/code/code‘, component: () => import(‘@/components/finance/financeindex‘), children: [{ path: ‘/finance/co...
splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值（该方法会改变原始数组）index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空 删除：//删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变)var arr = [‘a‘,‘b‘,‘c‘,‘d‘];arr.splice(1,1);console.log(arr); //[‘a‘,‘c‘,‘d‘]; //删除起始下标为1，长度为2的一个值(len设置2)var a...
前端页面中使用MVVM的思想，即MVVM是整个视图层view的概念，属于视图层的概念。 MVVM是前端视图层的分层开发思想，将页面分成了Model, View,和VM；其中VM是核心，因为VM是V和M之间的调度者;优势：MVVM提供了数据的双向绑定，让我们的开发更加方便 【注意】这里的MVVM概念与后端服务器的MVC思想毫无关系 原文：https://www.cnblogs.com/yanl55555/p/11744193.html