从我第一篇博客的搭建环境开始,就开始学习vue了,一直想将这些基本知识点整理出来,但是一直不知如何下手,今天刚好实战了两个小demo,所以就想趁这机会将以前的一起整理出来,这是vue最基础的知识,我有附加代码,方便阅读与学习,近期还会更新我实战的两个demo ,我保证我不会拖太久的.相信我啦~ 一.初始化vue项目 相信大家对vue项目的初始化已经很熟练了, vue 的官网有给出安装的步骤,如果你的电脑上已经安有node,webpack和淘宝镜像,那么你只需按官网的安装步骤进行项目的安装即可.…

Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-resource还提…

Vue基础知识之vue-resource和axios  原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样…

vue路由知识整理 对于单页应用,官方提供了vue-router进行路由跳转的处理.我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们. 参考文章 https://router.vuejs.org/zh-c... 动态配置路由 HTML <p> <!-- query要用path来引入,params要用name来引入,故不能写为 :to=&…

Vue大概知识体系和学习参考文档 官方文档学习,参考,借鉴地址:https://cn.vuejs.org/v2/guide/installation.html 菜鸟教程:https://www.runoob.com/vue2/vue-template-syntax.html Element-UI:http://element-ui.cn/#/zh-CN/component/installation Vue入门基础 一.Vue实例创建和使用: 1.声明一个 new Vue({}) 实例 2.设置数…

[Vue高级知识]细谈Vue 中三要素(响应式+模板+render函数):https://blog.csdn.net/m0_37981569/article/details/93304809…

基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destoryed vue常用指令: v-for.v-bind(缩写形式:prop).v-on(缩写形式@click=’sss').v-if/v-else/v-else-if.v-model.v-once.v-html.v-show... vue自定义组件:Vue.component(‘componentName'…

一.知识 http://www.cnblogs.com/majj/https://www.cnblogs.com/majj/category/1216624.html 阮一峰 es6http://es6.ruanyifeng.com/ http://www.bootcdn.cn/ http://www.cnblogs.com/majj/ 前端 VUE 博客每个人都要去写! html(语义化,除了语义,其他得都没什么) 结构 + css 样式表现 排版,布局 + js 行为 (ECMAScript…

1.看https://www.bilibili.com/video/av27969216/?p=54,看他的就够了 https://juejin.im/post/5a5bc8c36fb9a01ca26774eb,技术胖不错的vuex, 顺便关注一下他的网站吧http://jspang.com/, https://v.douyu.com/author/GPAgV5X1xQdZ,看看 2.template中可以通过{{xxx}} 来调用data,props, computed里的属性, 当然也可以通…

一.本尊建议的学习顺序:https://zhuanlan.zhihu.com/p/23134551(侵删) 二.安装: 1.安装 Node.js,可以去Node.js的官网上下载: 2.(非必选)如果想日后方便使用,安装依赖包快一点,切一下淘宝 npm 的镜像,不会的百度:切换淘宝npm镜像 ,就会出来一大堆,自己看!3.安装webpack,运行:npm install webpack -g,这里有全局安装和局部安装(区别在后面的 -g 参数),建议选全局的:4.然后通过 vue-cli 的脚手…

最近对整个前端的知识做了一次复盘,总结了一些知识点,分享给大家有助于加深印象. 想要更加理解透彻的同学,还需要大家自己去查阅资料或者翻看源码.后面会陆续的更新一些相关注知识点的文章. 文章只提出问题,并给出答案.   目录 1.对于Vue是一套渐进式框架的理解 2.对MVVM的理解 3.vue数据双向绑定的原理 4.vue.js的核心是什么? 5.vue中如何编写可复用的组件? 6.什么是vue生命周期和生命周期钩子函数? 7.vue更新数组.对象时触发视图更新的方法,可以顺便讲讲为什么. 8.…

一.导语 突然冒出四个字,分即是合,嗯,优点道理....................... 二.正文 在搞的仿淘宝demo,之前加入购物车是与商品详情一块的,今天把它单独拆出来,复用性高点,那这样的话,就涉及到了组件开发了.vue的组件注册是超级超级容易的,接下来就简短的说说组件吧,直接上demo了. 1.理解组件 官方对于组件的解释是这样的:组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.独立和通常可复用的组件构建大型应用.在 Vue 里,一个组件本质上是一个拥有…

一.导语 最近在用vue仿写淘宝的商品详情页面以及加入购物车页面,若是成功了,分享给大家~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 二.正文 我先用控制台创建了vue项目demo(如何创建可以参考我之前的写的笔记  http://www.cnblogs.com/atjinna/p/6723293.html).由于单页面开发,会出现打包后的JavaScript包非常大,这会影响页面加载速度,那我们可以考虑使用懒加载去优化这个问题,因此 resolve出现了.具体参考下面: 1.引…

一.导语 困困的我,好想睡啊,但还是敲下这边有的没的的笔记吧 二.正文 1.输入 vue list 可查看此环境下,vue能创建的项目模板 没将webpack.vue-route啃精了的话,老实用webpack这个模板吧,他会自动的将你所要的环境都搭建好 2.输入 vue init webpack myDemo 可创建webpack型的vue项目 其中 webpack为项目模板,可从上图中的5中模板类型中选择其中一种,myDemo是项目名称 如此,一个vue项目自动创建成功,可到对应的项目存放路…

一.导语 最近接触了下idea,虽然我对于各种"代码界的神器"没有多大感冒,一个eclipse或者myeclipse,一个Notepad++ .一个就可以把我征服,但还是蛮喜欢idea这个神器的,虽然,特别坑我的内存. 二.正文 vue在idea中运行,需要配置一定的环境,哦,先讲讲如何破解idea吧. 1.idea的安装 idea最好还是用2015版本的吧,不知道适不适合安卓那些开发,但是对于要开发vue的前端小朋友,还是用2015吧的好,解释不了其他版本哪里不好,但就是运行时各种乱…

一.导语 最近总想学点东西,es6啊.typescript啊,都想学,刚好有个机遇,可以学点vue,嗯,那就开始吧. 二.正文 1.node环境: 下载安装nodeJs,最好是1.6以上的版本,下载地址:http://webpackdoc.com/ 2.npm环境或者淘宝镜像 node可以进行npm环境搭建,但是比较慢,因此建议使用淘宝镜像cnpm 在控制台直接输入  npm install -g cnpm –registry=https://registry.npm.taobao.org 如此…

PS:本文就Java基础需要掌握的反射知识做下汇总和分析. Java-reflect:java反射,对应我们研究框架.底层框架起到基本的知识储备. Class类Java的世界类,万事皆对象,所有的类都是java.lang.Class类的实例对象 Thers is a class named Class 所有的类不管是内部类,都是Class的对象 任何一个类都是Class类的实例对象,这个实例对象有三种表示方式 1. Class c1=类名.class;     任何一个类都是有个隐含的静态成员变…

Vue特性: 双向数据绑定 通过 指令 扩展了 HTML,通过 表达式 绑定数据到 HTML 解耦视图与数据 可复用组件 虚拟DOM -> 对象 M-V-VM 数据驱动视图 Vue声明周期: beforeCreate创建前状态,created创建完毕状态 beforeMount挂载前状态,mounted 挂载结束状态 beforeUpdate 更新前状态,updated 更新完成状态 beforeDestroy 销毁前状态,destroyed 销毁完成状态 Vue组件传值: 父传子:①在子组件中…

简单的目录结构: |-index.html |-main.js 入口文件 |-App.vue vue文件,官方推荐命名法 |-package.json 工程文件(项目依赖.名称.配置) npm init --yes 生成 |-webpack.config.js webpack配置文件 webpak准备工作: cnpm install webpack --save-dev cnpm install webpack-dev-server --save-dev App.vue -> 变成正常代码 vu…

form最后一节. 组件基础 组件的复用:  data必须是函数 组织 通过Prop向子组件传递data 单个根元素 通过event向父组件发送消息: 使用事件抛出一个value, 在组件上用v-model 动态组件 解析DOM模版时的⚠️. 深入组件 组件注册 Prop 自定义事件: this.$emit('my-event')用kebab-case做事件名称 插槽 异步组件 处理边界情况 例子: 组件是可复用的 Vue 实例,且带有一个名字,如Vue.component("名字",…

vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全局定义,在所有实例中都可以使用这个组件 <template id='hello'> <div> <div>hello</div> <div>world</div> </div> </template> let da…

过滤器 1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{msg | myfilter | myfilternumber }} 2.自定义的过滤器 过滤器的结构为:Vue.filter("id",function(value,a){}); value是过滤器的一个参数,也是默认的原始值.a是自定义的一个参数. <!DOCTYPE html>…

vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-resource还提供了非常有用的inteceptor功能,使用inteceptor…

(1)插值,即渲染文本 文本:数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值 <h1>{{ message }}</h1> data() { return { message: 'hello vue'} } html : 通过v-html 指令用于输出html代码 <div  v-html="messageHtml" ></div> data() { return { messageHtml  :  '<h1&g…

Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其他值的变化. <div id="app"> 全选:<input type="checkbox" v‐model="checkAll" > <br> <input type="checkbox&quo…

优点:轻量易学,灵活. 核心:通过尽可能简单的API来实现响应的数据绑定和组合的视图组件. 1.数据绑定:数据改变,驱动视图的自动更新. 2.视图组件化:把整个网页拆分成一个个区块,每个区块都可以看成一个组件,网页就是由多个组件拼接或者嵌套组成. 使用场景: 1.频繁操作DOM 2.项目中有多个部分都是相同的,并可以封装成一个组件. 3.vue.js的核心实现使用了ES5的Object.defineProperty特性,故而IE8以及以下的浏览器不兼容. vue的安装和使用 npm instal…

一 什么是VUE 它是一个构建用户界面的JavaScript框架,自动生成(js,css,HTML文件) 二 如何使用VUE 1.  应用vues.js <script src="vue.js"></script> 2.  展示html <div id="app"> <input type="text" v-model="msg"> <p>{{msg}}</p&…

vue的特点在于:响应的数据绑定.组合的视图组件. vue的文件,分成三个部分<template>html模板</template>  <script>js</script>  <style>css<style>,这三个部分组成一个vue的组件. 我们先用vue-cli来初始化一个项目. 1.Node.js安装 https://nodejs.org/en/download/ 2.安装vue-cli npm install -g vue…

一.解决网速慢的时候用户看到花括号标记 (1)v-cloak,防止闪烁,通常用于比较大的选择器上. 给元素添加属性v-cloak,然后style里面:[v-cloak]{display:none;} (2){{msg}},等价于<span v-text="msg"></span> (3){{{msg}}},html转意输出,等价于<span v-html="msg"></span>(在v2.0上,三括号已经删除) 二.…

一.基本语法: 1.实例化:new Vue({}) 2.el:一定是根容器元素(vue的作用域就是这个根元素内),就是写选择器  data:用于存储数据      methods:定义方法(方法里this指向当前vue实例化的对象,但是获取属性和方法不需要this.data.name,直接this.name即可,获取方法也是如此) 二.数据绑定:给属性绑定对应的值 (1)v-bind的使用:v-bind:href="website",v-bind:value="value&q…