vue | 易学教程

2020-02-12

阅读更多关于 2020-02-12

** 搭建vue开发环境 ** gqpmpvip2020.02.12 一、安装软件目录 1、安装Git 2、安装Node.Js 3、安装WebStorm 二、安装包百度网盘链接：https://pan.baidu.com/s/12X7r9Ph-JcH9szVWsJw_kw 提取码：3toe 1、Git-2.19.0-64-bit.exe 2、node-v12.15.0-x64.msi 3、WebStorm 2018.1.3.rar 三、安装软件 1、安装Git 1.1、图文教程：https://blog.csdn.net/weixin_44950987/article/details/102619708 1.2、官网：https://git-scm.com/downloads 2、安装Node.Js 2.1、图文教程：https://www.cnblogs.com/aizai846/p/11441693.html 2.2、官网：http://nodejs.cn/download/ 3、安装WebStorm 四、搭建vue-cli 1、桌面新建文件夹，例如vuespace； 2、右键菜单，选择Git Bash Here； 3、输入命令：git --version 回车，查看版本； 4、输入命令：node -v 回车，查看版本； 5、输入命令：npm -v 回车，查看版本；注

Vue父子组件数据传输（父传子）

阅读更多关于 Vue父子组件数据传输（父传子）

Vue父子组件数据传输（父—>子）： 1、创建子组件构造器 2、对子组件构造器进行注册 3、采用props方式对子组件实现数据传输 4、使用子组件，在子组件使用中采用v-bind绑定父组件数据，最终实现父组件向子组件传输数据 <body> <div id = "app" >  <cnp :cmovies = "movies" :cmessage = "message" ></cnp> </div>  <template id = "mytemp" > <div> <h4> 这是魔戒系列电影 </h4> <p v-for = "m in cmovies" > {{m}} </p> <h4> {{cmessage}} </h4> </div> </template> <script> //创建子组件 #mytemp 创建组件构造器对象 //原始为Vue.extend(template:模版具体内容（如div等）) //Vue.component("组件标签名",自定义的组件构造器) 此注册为全局变量 //以下为语法糖写法 const cnp = { template: "#mytemp" , // 基础写法props: ["cmovies","cmessage"] //标注数据格式

vue批量异步更新策略

阅读更多关于 vue批量异步更新策略

异步更新队列 vue高效的秘诀是一套批量，异步的更新策略在程序中有好多个组件，每个组件对应一个watch实例，在一次事件循环更新周期内，可能有好多数据发生变化，可能每个组件都会变，这时候最好的方式就是将组件批量的一次更新完之后，浏览器再刷新页面，这时候是最高效的做法概念事件循环：浏览器为了协调事件处理、脚本执行、网络请求和渲染等任务而制定的一套工作机制。宏任务：代表一个个离散的、独立工作单元。浏览器完成一个宏任务，在下一个宏任务执行开始前，会对页面进行重新渲染。主要包括创建主文档对象、解析HTML、执行主线JS代码以及各种事件如页面加载、输入、网络事件和定时器等。微任务：微任务是更小的任务，是在当前宏任务执行结束后立即执行的任务。如果存在微任务，浏览器会清空微任务之后再重新渲染。微任务的例子有 promise 回调函数（异步回调函数）、DOM发生变化、watch的update函数等。总结：在执行一次宏任务之后，看有没有微任务，有微任务，就清空微任务之后浏览器再刷新页面，没有微任务就直接刷新页面先做同步任务，再做异步任务,把call stack给清空掉体验一下 vue中的具体实现异步：只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。批量：如果同一个 watcher 被多次触发，只会被推入到队列中一次

Vue-过滤器的使用

阅读更多关于 Vue-过滤器的使用

过滤器 vue过滤器可以格式化常用文本，vue过滤器只能在插值表达式{{}}和v-bind中使用过滤器 filter 顾名思义就是用来格式化数据的东西，可以是从中取得你想要的，或者给那个数据添加点什么，例如，从['abc','abd','ade']数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’。过滤器又分为全局过滤器和私有过滤器（局部过滤器）定义一个全局过滤器： Vue.filter('过滤器名'，执行的函数); 举个例子： <div id="app"> <p>{{msg | myFilter}}</p>  </div> <script> //定义一个全局过滤器： // Vue.filter('过滤器名字',函数); Vue.filter('myFilter', function (msg) {//msg为需要过滤的数据 return msg.replace(/天天/g, '日日'); //正则不需要加引号 // 匹配所有的天天将其替换成日日 }) let vm = new Vue({ el: '#app', data: { msg: '好好学习，天天向上

Vue 子组件data设置踩坑

阅读更多关于 Vue 子组件data设置踩坑

vue子组件实践一下, 没想到踩了一个坑 <div id="app"> <counter></counter> </div> <script> Vue.component('Counter', { data: { value: 0 }, template: '<div>haha {{value}}</div', }) var vm = new Vue({ el: '#app', data: {}, methods: {} }) </script> 然后打开浏览器，发现报错 ReferenceError: value is not defined 后来想起来看过的视频说子组件的data要是个 function data () { return {value: 0} } 至于为什么要是function，不能是Object呢, 因为，一个组件可能包括多个相同的子组件，如果是object的化，就是个共享变量了，会导致问题，所以子组件的data要是个 function ，保证独立来源： https://www.cnblogs.com/Draymonder/p/12298055.html

vue模块化项目的搭建

阅读更多关于 vue模块化项目的搭建

vue项目的环境搭建首先要进行环境依赖检测然后就是vue的脚手架的安装-基于node，必须得要安装 npm install @vue/cli -g 现在脚手架工具就安装成功了，在命令行输入vue就可以看到帮助接下来，我们来构建项目，在命令行输入vue create my-mall 我这边选的是自定义的按回车进入子配置我这这输入N，选择了hash模式然后回车选择了less，然后回车语言检验，看自己需要选择，然后回车一般会选择第一项，文件保存时，看需要哈，然后继续回车继续回车继续回车这边是保存，继续回车最后再回车，项目就构建好了。下次再讲解构建好项目的文件结构及作用来源： CSDN 作者：进阶的前端工作者链接： https://blog.csdn.net/weixin_45846177/article/details/104262189

vue的学习 2020/2/11

阅读更多关于 vue的学习 2020/2/11

Vue的基本代码 < ! -- 1. 导入Vue的包 -- > < script src = "./lib/vue-2.4.0.js" > < / script > v-cloak、v-text、v-html v-bind < input type = "button" v - bind : title = "mytitle" > v-on事件绑定 < input type = "button" v - bind : title = "mytitle" v - on : click = "show" > 绑定的事件内容 methods : { // 这个 methods属性中定义了当前Vue实例所有可用的方法 show : function ( ) { alert ( 'Hello' ) } } 来源： CSDN 作者：梦想是成为工程师链接： https://blog.csdn.net/weixin_43588361/article/details/104267811

Vue 侦听器和计算属性

阅读更多关于 Vue 侦听器和计算属性

侦听器：可以监听vue实例中data中的元素当其发生变化的时候，可以进行一系列的操作用法：在vue实例中使用watch属性来定义侦听器， watch属性中的key代表vue实例中的data数据，后面接一个function 函数在这个数据发生改变的时候 function函数就会执行 function中的参数 val 代表监听的数据改变后的值。例子：有一个姓和名还有一个完整的名字当姓或者名改变的时候完整的名字也要改变因为我们对完整的名字也绑定了一个值姓和名也都分别绑定了一个值所以我们改变姓和名都不能使完整的名字中的值改变为了实现这一要求我们可以使用侦听器去实现。 <div id ='d1'> <label for="f"><span>firstName:</span></label><input type="text" id='f' v-model="firstName"/> <br /> <label for="l"><span>lastName:</span></label><input type="text" id='l' v-model="lastName"/> <br /> <span>{{fullName}}</span> </div> <script> var v = new Vue({ el : '#d1', data : {

Error: No ESLint configuration found.

阅读更多关于 Error: No ESLint configuration found.

vue 开启项目报：Error: No ESLint configuration found. 受疫情影响在家里办公的时候，将之前公司做的（vue项目）项目拉下来，发现在启动项目的时候报错，将拷下来的目录和之前的比较，发现少了个相关js文件：.eslintrc.js，因为有些隐藏的文件是拷贝不下来的，就比如这个。eslintrc.js 报错的提示 1.拷下来的目录 2.项目可以启动后的目录 3. .eslintrc.js的代码 // https://eslint.org/docs/user-guide/configuring module . exports = { root : true , parserOptions : { parser : 'babel-eslint' } , env : { browser : true , } , extends : [ // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 'plugin:vue/essential

vue 组件模板抽离

阅读更多关于 vue 组件模板抽离

这里用的是template标签还能使用script标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn></cpn> </div>  <template id="cpn"> <div> <h2>我是wsm</h2> <p>我是内容</p> </div> </template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component('cpn',{ template : '#cpn' }) // 在vue实例中注册组件2 const app = new Vue({ el : '#app', data : { } }) </script> </body> </html> 来源： CSDN 作者： tianzebeibei 链接： https://blog.csdn.net/tianzebeibei/article/details/104268105

订阅 vue