VueJS使用笔记

VueJs 学习笔记

VueJs学习笔记参考资料:https://cn.vuejs.org/ 特效库:TweenJS(补间动画库) VelocityJS(轻量级JS动画库) Animate.css(CSS预设动画库) 比较其他框架:https://cn.vuejs.org/v2/guide/comparison.html Github:vue2-elm 安装 npm install vue 使用时推荐安装:Vue Devtools 可以方便调试 https://github.com/vuejs/vue-devto…

Vuejs学习笔记1

首次写vue可能会出现:[Vue warn]: Cannot find element: #app 这是因为你的js在html页面头部引入的原因,自定义js文件要最后引入,因为要先有元素id,vue才能获取相应的元素. 示例: 1.index.js var app = new Vue({ el : '#app', data: { message: 'Hello Vue.js!' }}) 2.index.html <html> <head> <title>Vuejs<…

Vuejs使用笔记 --- component内部实现

现在来系统地学习一下Vue(参考vue.js官方文档): Vue.js是一个构建数据驱动的web界面的库,其目标是实现响应的数据绑定和组合的试图组件. Vue.js拥抱数据驱动的视图概念,这意味着我们能在普通的HTML模板中使用特殊的用法将DOM“绑定”到底层数据.一旦创建了绑定,DOM将于数据保持同步. 以下参考代码与上面的模型相对应  <div id="example-1"> Hello {{ name }}! <…

Vuejs使用笔记 --- 框架

这两天学了vuejs的模板,于此纪录一下. 这是整个大文件夹的配置,现在我们看到的所有文件都不需要去管,说要关注也只需要关注“index.html” "index.html"里面是这样的: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Questionnaire</title> <link href="ht…

vuejs学习笔记（1）--属性，事件绑定，ajax

属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, i) in list">{{v}}</li> </ul> <script> var vm = new Vue({ el: '#box', // 对应的元素选择器或者是指向元素的变量 data: { // data list: [1,2,3] } });…

vuejs学习笔记（2）--属性，事件绑定，ajax

VueJs开发笔记—IDE选择和WebStorm性能优化、框架特性和数据调用、路由选项以及使用

一.IDE的选择: VsCode和WebStorm都是不错的选择,两者运行调试都非常的方便都可以使用快捷键运行和停止,就打开项目的速度和对电脑配置的要求来说,vscode要比webstorm要出色很多,如果电脑配置足够好的情况下请忽略前面说的性能问题,具体的使用要看个人的需求和爱好了. 1.先说VsCode的配置: 首先是要装VsCode的扩展插件,点击左上角最后一个图标,在搜索里面输入JavaScript (ES6) snippets/NPM/Vue 2 Snippets: 第二步调试配置:V…

VueJs学习笔记

在cmd下,进入目录之后 cd 到项目目录下 1 安装node cnpm install 2 启动或者调试 cnpm start (或是npm run dev) 3 上线: npm run build -------------------------------------------------------------------- # install dependencies npm install # serve with hot reload at localhost:8080…

VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用

一.IDE的选择: VsCode和WebStorm都是不错的选择,说一下两者的优缺点,调试便捷性来说两者不相上下. WebStorm缺点:性能方面VsCode远好于WebStorm: WebStorm优点:代码引用追踪Ws有VsCode无,控制台输出WS有着色能看出那块代码有问题,VsCode无着色控制台日志和bug查看不直观: 综合使用来说:推荐使用WebStorm,如果你的电脑配置实在不好可以酌情使用VsCode. 1.先说VsCode的配置: 首先是要装VsCode的扩展插件,点击左上角最…

VueJs项目笔记

======================知识点总结=========================== 一.keep-alive(实现页面的缓存) 二. 移动端固定定位的解决方案三. Vue表单校验 [https://www.zhihu.com/questio... 99220](https://www.zhihu.com/questio... "Vue表单验证") https://github.com/aweiu/vue-verify-pop vue-validator中文文…

html: <script src='vue.js'></script> <div id='app'> <span>{{msg}}</span> <input type='text' v-model='msg2' /> <input type='button' v-on:click='onVerify' /> </div> js: <script> var app = new Vue({ el:…

Vuejs学习笔记(一)

1) vue.js 的主要功能 1.模板渲染 2.模块化 3.扩展功能:路由,Ajax 2) vue.js 模板渲染之双向绑定示例 message 绑定到了 input 对象,所有在input中的值修改了之后,上面的P 标签的显示的内容也会根据其改变. 3) app.vue .main.js和 index.html的关联 (1) main.js是我们的入口文件,作用是初始化vue实例并使用需要的插件. (2) App.vue是我们的主组件,所有页面都是在App.vue下进行切…

VueJs入门（一）

VueJs学习笔记:基本概念及简单demo Vue官方介绍:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用. 简单小巧指的是vue.js压缩后仅有17KB,量轻.渐进式指的是我们学习和使用vue的过程中是一步一步循序渐进的,不必一开始就学会并使用所有的东西. 1.vue.js在设计上采用的是MVVM模式:当view(视图)层发生变化时,会自动更新到ViewModel(视图模型)层,反之亦然.View和Model通过双向绑定建立联系.大家都使用过JQuery,当页面的数据发生变化的时候,我们…

VueJs笔记

在使用Vuejs做开发的过程中,偶尔会遇到,动态给data添加一个属性这个属性确不能被动态监听到,只能用this.$set(prop,'prop',val)来强制监听,但是有些情况下又不需要这样操作.举个例子,页面点查询按钮之后,加载一个applyList数组,然后遍历数组给各个元素动态加一个默认属性:isShow=false.如果是直接在ajax获取到数据,将这个没处理的数据直接赋值给data则,这个isShow就不会被watch到.如果是处理完毕之后再将处理的结果赋值给data则就正常了.…

vueJS+ES6开发移动端APP实战项目笔记

一.什么是MVVM框架 MV*包括MVC.MVP.MVVM MVVM框架由Model.View.ViewModel构成. Model指的是数据,在前端对应的是JavaScript对象. View指的是视图,在前端对应的是DOM ViewModel观察Model和View的变化来做更新,实现了数据的双向绑定. 前端MVVM框架主要包括:angularJS.reactJS.VueJS 二.Vuejs的核心思想(数据驱动.组件化) 1.数据驱动:数据双向绑定 2.组件化: 页面任何部分都可以作为一个组…

vuejs(2.0)基础笔记

基本结构 <div id="app"> {{ message }} </div> var app = new Vue({ el: '#wrap', data: {//数据 msg: 'Hello 初心わするべからず!', arr:['apple','banana','orange','pear'], json:{a:'apple',b:'banana',c:'orange'} }, methods:{//方法 show:function(){ alert(1);…

Vuejs核心思想学习笔记

习Vue已经有一段时间了,但未对其核心思想作自己的总结和理解 Vue核心思想有两个 : 数据驱动和组件化(系统组件) 数据驱动数据驱动目的是让数据和DOM保持同步, 只要修改了data数据,DOM就会做相应的改变.Vue已经将这一逻辑封装好人工无需手动去操作DOM, Vue的数据驱动是利用了Object.defineProperty的特性, 以下使用原生js模拟了Vue的双向数据绑定: <input type="text" id="inputText">…

VueJS搭建简单后台管理系统框架(一)环境搭建

【Dojo 1.x】笔记目录

学习笔记和教程是不同的,笔记是随心记,学到什么就写什么,我尽量按逻辑顺序写笔记. Dojo是什么? Dojo是这么一个JavaScript框架,区别于jQuery等小型类库,这个类库更合适于构建WebApp和功能繁多的应用页面,Esri的ArcGIS API for JavaScript就是用Dojo作为基底进行开发WebGIS页面的.而jQuery乃至现在火热的AngularJS.React.VueJS等前端框架则比较合适快速方便构建普通的展示页.交互页. Dojo使用异步模块定义,即AMD的…

vue 学习笔记（一）

对于 vue 官网给的教程由浅及深,非常容易上手.我之前有过 react 项目开发经验,对 webpack 打包,脚手架这一类的东西并不陌生.所以也是我上手比较快的原因吧.简单将我在学习 vue 中遇见的问题和我觉得比较重要的东西记录一下,增加记忆.先说好,我这是个人笔记,不是教程,不喜勿喷. 哦,有个特别尴尬,特别严肃的问题. 我想说一声读 : /vjuː/,类似于 view 别在读 v u e 了,各位大佬. 官网学习地址:https://cn.vuejs.org/v2/guide 简单介…

vue2.0自学笔记

前言: 一.优点: 轻量级.高效率.上手快.简单易学.文档全面而简洁二.功能: 1.模板渲染 2.模块化 3.扩展功能:路由.Ajax 三.课程包含: 1.Vue实例 2.Vue组件 3.Vue指令 4.内置组件 5.实例方法 6.实例选项 7.实例属性 8.模板渲染 9.条件渲染 10.组件交互 11.标签属性 12.事件绑定 13.计算属性 14.属性监听 15.表单 16.动画 17.vue-cli项目搭建 18.Vue-router理由:实现单页面切换 19.vuex 四.vue.…

vue-cli笔记

总是忘,留个笔记. vue-cli A simple CLI for scaffolding Vue.js projects. Installation Prerequisites: Node.js (>=4.x, 6.x preferred), npm version 3+ and Git. $ npm install -g vue-cli Usage $ vue init <template-name> <project-name> Example $ vue init…

对Vuejs框架原理名词解读

渐进式()+虚拟Dom: vue-cli 遍历Dom:先序遍历DOM树的5种方法! 三层架构+m v c +mvp+m v vm()+MVC,MVP 和 MVVM 的图示剖析vue MVVM实现原理控制器(controller):angularJS概念理解三:控制器构造器+生命周期:Vue学习-构造器 +关于Vue.js2.0生命周期的研究与理解数据驱动:vuejs实现数据驱动视图原理 +VueJS 数据驱动和依赖追踪分析 +从Vue的第二个commit来学习数据驱动视图状态管理:理解…

vuex状态管理之学习笔记

概述及使用场景 Vuex 是一个主要应用在中大型单页应用的类似于 Flux 的数据管理架构.它主要帮我们更好地组织代码,以及把应用内的的状态保持在可维护.可理解的状态. 但如果是简单的应用 ,就没有必要使用vuex来管理状态了, 只会增加应用的复杂性 ,一个简单的应用完全可以使用$emit这种方式就可以来解决https://cn.vuejs.org/v2/guide/components.html#非父子组件的通信. 比如 ,通过父组件传值给子组件,子组件处理完数据, 如果需要对该属性值进行变更…

vue.js初始学习笔记&vue-cli

笔记一下: vue.js 安装,参考: http://www.cnblogs.com/wisewrong/p/6255817.html (vue-cli) http://www.cnblogs.com/zhuzhenwei918/p/6870340.html?utm_source=itdadao&utm_medium=referral (less install) https://www.zhihu.com/question/38213423 (moke.目录结构等) https://mol…

vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. vue 介绍 <html> <head> <meta charset="utf-8"/> <title>vue 介绍</title> <!-- <script src="js/vue.min.js"…

Angular快速学习笔记（2） -- 架构

0. angular 与angular js angular 1.0 google改名为Angular js 新版本的,2.0以上的,继续叫angular,但是除了名字还叫angular,已经是一个全新的开发框架了. Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架. Angular 本身使用 TypeScript 写成的.它将核心功能和可选功能作为一组 TypeScript 库进行实现,你可以把它们导入你的应用中. 全新的Angular 是一个用 HTM…

【VueJS使用笔记】的更多相关文章