vue初级总结

vue初级学习--组件的使用(自定义组件)

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

vue初级学习--路由router的编写（resolve的使用）

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

vue初级学习--控制台创建vue项目

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

vue初级学习--idea的环境搭建

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

vue初级学习--环境搭建

一.导语最近总想学点东西,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 如此…

vue初级知识总结

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

vue 初级小总结

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

vue初级学习--使用 vue-resource 请求数据

一.导语我发现好像我最近几次写文,都是在7号,很恰巧啊~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 二.正文最近用vue做一个订单管理混合开发APP,但是遇到个问题,使用了vueResource的post请求,后端做了跨域解决方案,可是前端还是请求不出去,最后才发现,其实还是有问题,其实踩到这个坑,根本原因,是没把form data和request payload的区别搞懂,…

Vue初级-样式

整个网页不仅有标签还有css进行渲染,所以,现在讲讲在vue里面加入你想加的css. 在不用vue的时候,有一种内联方式加入css(大概是<div style="..."></div>),现在用Vue的话,例子如下 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>页面展示为但是这样写会觉得dom杂乱,不是很整齐,所以…

Vue初级

来学习vue.js的宝宝们应该都了解了什么是vue并且是有兴趣去学的,我也是自己学习vue,欢迎大家一起讨论. 现在,我么先自己尝试用vue来写个hello world吧. 一.创建一个 .html 文件,然后通过如下方式引入 Vue: <script src="https://cdn.jsdelivr.net/npm/vue"></script> 二.创建Vue,假如命名一个变量text,写法是:var text = new Vue({···});在选择对象这…

vue初级使用

一.Vue是什么? Vue(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架.采用自底向上增量开发的设计.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue渐进式的理解:http://www.bslxx.com/a/vue/2017/1205/1490.html Vue只关注视图层. Vue通过新的属性(自定义)和{{表达式}}扩展了 HTML. Vue的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图…

vue初级尝试

为了跟上前端后台化的潮流,本少不得不开始关注vue,下列上机代码是针对App.vue进行的更改数据渲染----一般键值对,数组,对象和对象数组 <template> <div id="app"> <img> <h1> {{msg}} </h1> <br> <br> <ul>{{mycoach.name}}</ul> <ul>芳龄:{{mycoach.age}}<…

mvvm m:代表 data v 代表 view vm 代表 Vue 的实例 v-cloak 指令解决闪烁的问题需要在 style 标签中加入 [v-cloak];{ display:none } v-bind 指令绑定属性简写 : v-on 指令绑定事件简写 @ 指定的函数带() 表示可以传参,也可以不带 v-on.shop 阻止事件冒泡 v-on.prevent 阻止事件默认行为 v-html 指令将数据渲染到页面上,并解析了标签 {{}} 指令等同于 v-text 将数据渲…

VUE【四、组件】

今天周五了,这周由于开始了健身计划,晚上几乎没精力继续看书了,早上也很困..可能刚开始不适应,适应了就好了..只能挤挤时间抓紧看原计划这周看完vue再把springmvc看了的,又只看了部分vue,springmvc还没开始.. 不过马上端午假期,希望可以补回来 VUE初级最后一部分,自定义组件组件注册一个组件 Vue.component('my-component', { // 选项 }) 局部注册在components选项中注册模板解析有些html标签有使用限制,比如ul.ol.…

vue.js初级入门之最基础的双向绑定操作

首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue.js最重要的一个特点就是双向数据绑定也就是我们常说的MVVM:Model-View-ViewModel.我们要实现双向绑定首先当然要有"双向",这里vue.js为我们提供了View层和Model层.View层就是在HTML中的代码,Model层则是Javascript代码. 下面是一个最基…

Vue router 的使用--初级

在说 VueRouter 之前,首先要弄明白vueRouter 是干什么的,有什么用说出来其实很简单,就是一个模板替换的问题,当路由改变的时候,把和路由相关的模板显示出来,就是这么简单.但是,当我们不知道为什么的时候,即使瞎猫碰到死耗子做出来了,也不知道是怎么回事,下次仍然是不会,我想,我们应该要有追根究底的精神 1. 首先,写html ,因为不论是替换与否,我们都是通过html来执行的,定义要替换的 2. 写替换模板 3.注册vue对象,及替换要修改的变量即data 4.定义路由的映射关系…

vue.js 中双向绑定的实现---初级

1. 1 我们看到的变量,其实都不是独立的,它们都是windows对象上的属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht…

vue.js 组件引用之初级之二

1. template 标签也可以实现替换,这样可以省去script标签了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http…

vue.js 组件引用之初级

1. 构造组件,及组件引用:1.1 构造一个组件,1.2 注册一个组件,1.3 实例化Vue()即引用Vue() <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&quo…

vue.js 作一个用户表添加页面----初级

使用vue.js 制作一个用户表添加页面,实际上是把原来需要使用js写的部分,改写成vue.js的格式首先,想象一下,先做思考,我们要添加用户表,设涉及到哪些数据,一个是用户id,一个是用户名,一个是年龄....还有很多,为了数据的简单明了,只举例部分数据即可在vue中,el是作用的范围,这个直接获取html 中的id即可,再一个是data,这个是vue中存储数据的部分,刚才说到,这里有一个用户名,一个年龄.而没一个用户名对用一个年龄,这个是固定的,对于固定的东西,我们喜欢绑定在一起,这样在…

vue.js 初级之一

vue.js 是一个构建数据驱动的 web 界面渐进式驱动框架. 引用的话,直接使用script标签引入就可以了: <script src="./lib/vue.js"></script> 最简单的,创建一个vue对象,怎样引入到页面中呢? 1. 在调用vue对象时,要先创建对象,然后才调用,下面window.onload 使用的是es6的箭头函数 <!DOCTYPE html> <html lang="en"&g…

偏前端-vue.js学习之路初级（二）组件化构建

vue.js 组件化构建组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: 一.使用组件 1.组件的全局注册--可以使用 Vue.component(tagName, options) Vue.component('my-component', { // 选项 }) 组件在注册之后,便可以在父实例的模块中以自定义元素** <my-component></my-com…

偏前端-vue.js学习之路初级（一）概念

首先--不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时. 新建一个html,引入一下js: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://c…

vue+Typescript初级入门

Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造 PS: 建议使用 Visual Studio Code 进行开发 vue-cli 3.0 可以直接创建 typescript 项目,不过目前还只有 beta 版,有兴趣的朋友可以尝试一下一.安装依赖首先还是用 vue-cli 生成项目 vue init webpack demo 然后安装必要依赖项:…

windows环境下搭建vue+webpack的开发环境

前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我要把我所参考的文档和实际遇到的问题分享给大家.由于本人也是初级菜鸟一枚,如果有错误,还望谅解指正.下面言归正传: 所参考的文档链接:http://blog.csdn.net/syyling/article/details/52004892 http://www.cnblogs.com/ixxonli…

Vue.JS 对比其他框架

Angular 选择 Vue 而不选择 Angular,有下面几个原因,当然不是对每个人都适合: 在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部特性并投入开发. Vue.js 是一个更加灵活开放的解决方案.它允许你以希望的方式组织应用程序,而不是任何时候都必须遵循 Angular 制定的规则.它仅仅是一个视图层,所以你可以将它嵌入一个现有页面而不一定要做成一个庞大的单页应用.在配合其他库方面它给了你更大的的空间,但相应,你也需要做更多的架构…