事件: 事件冒泡行为: 1.@click="show($event)" show:function (ev) { ev.cancelBubble=true; } 2.@click.stop="show()" 事件捕获行为: <div v-on:click.capture="doThis">...</div> 连用:<a v-on:click.stop.prevent="doThat"><…

一份不错的vue.js基础笔记!!!! 第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合. 1.1 Vue.js的目的 Vue.js的产生核心是为了解决如下三个问题: 解决数据绑定的问题: Vue.js框架生产的主要目的是为了开发大兴单页面应用(SPA:Single Page Application) Angular.js中对PC端支持的比…

在珠峰参加培训好年了,笔记原是记在本子上,现在也经不需要看了,搬家不想带上书和本了,所以把笔记整理下,存在博客中,也顺便复习一下 安装vue.js 因为方便打包和环境依赖,所以建意npm  init  -y 第一个示例: <script src ="./node_modules/vue/dist/vue.js" ></script> <div id="app"> {{msg==='hello'?1:0}} </div>…

一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写…

用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下: import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', component: resolve => requi…

固定路径(原始html) index.html如下,其中,引号""里面就是图片的路径地址 ```<img src="./assets/1.png"> ``` 单个可变路径 index.html如下 ```<div id="app"> <img v-bind:src="imgSrc"> </div> ``` 对应地,app里面要有src, ``` var app = new Vue…

摘要 1.好的代码职责要清晰,javscript不要用来操作样式: 2.API要设计的合理:通用性,适度的抽象(数据抽象,过程抽象),可扩展性: 3.效率问题:用好的.合适的算法(前端程序员要把自己当程序员). 注: 1.学习视频地址 2.ppt地址 3.个人感想: 是我hin厉害的师父推荐我看的月影大大的视频,感觉对于我这个小白来说,真的是一遍又一遍的刷新知识面.我觉得像月影大大这种大佬的思路,我接触之后真的是受益匪浅. 所以我总结出来不仅是自己记笔记,也是想分享给想要成为真正的前端“工程师”…

<!-- 多层for循环 --> <ul> <li v-for="(ite,key) in list2"> {{key}}-------{{ite.case}} <ul> <ol v-for="(vo,key) in ite.list">{{key}}------------{{vo.title}}</ol> </ul> </li> </ul> <!--…

cnpm 下载包的速度更快一些. 地址:http://npm.taobao.org/ 安装cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org vue2.0版本创建项目 1.进入目录 2.npm init   (使用 npm init 指令创建项目描述文件 package.json) 3.npm i webpack vue vue-loader Vue CLI   vue 3.0版本安装 Vue CLI 的包名称…

引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了. 若想了解它是如何工作的,就要先认清这几个概念: 1.更新DOM是非常昂贵的操作 当我们使用Javascript来修改我们的页面,浏览器已经做了一些工作,以找到DOM节点进行更改,例如: document.getElementById('myId').ap…