从我第一篇博客的搭建环境开始,就开始学习vue了,一直想将这些基本知识点整理出来,但是一直不知如何下手,今天刚好实战了两个小demo,所以就想趁这机会将以前的一起整理出来,这是vue最基础的知识,我有附加代码,方便阅读与学习,近期还会更新我实战的两个demo ,我保证我不会拖太久的。相信我啦~

一、初始化vue项目

相信大家对vue项目的初始化已经很熟练了, vue 的官网有给出安装的步骤,如果你的电脑上已经安有node,webpack和淘宝镜像,那么你只需按官网的安装步骤进行项目的安装即可。

如果你的电脑尚未安装以上工具,那建议你看下我的第一篇博客,里面有详细的介绍呢。

二、vue的结构及生命周期

1、vue结构

app.vue是vue组件树上的最顶层

index.html是页面,vue的所有组件都会通过main.js挂载到html上才会显示

main.js中会引入需要的依赖

index.html

| --->main.js通过一个vue实例(el:"#app",此处的#app是连接index.html中的id)将所有页面挂载至页面中

app.vue

|

所有页面

2、vue的生命周期、

三、vue的基础

1.组件的创建与使用:

新建一个.vue文件作为组件,写入组件内容,template里只可以存在一个根容器。

在app.vue文件里引入组件:import  组件名 from '组件文件的路径名',components对象里注册组件名,dom页面上加入组件渲染<组件名></组件名>


	2、组件之间的交互(重点)

		a、父组件向子组件传递数据:props,插槽(slot)
			从父组件向子组件传递数据

			在子组件里声明一个props ,接受父组件传递的数据			

		插槽的使用:
		子组件中:放一个<slot></slot>接收

		父组件:在子组件的dom渲染处通过标签传递值

		
		b、子组件向父组件传递数据:emit
		子组件向父组件传递数据:

父组件接受数据:

3、vue的指令

a>.vue自带指令介绍

v-bind:绑定属性,简写为:

v-on简写为@

v-if: 布尔值;  true则显示,否则不显示。操作的是dom

v-show:布尔值; true则显示,否则不显示,操作的样式

b>.自定义指令

自定义全局指令:

自定义局部指令:

自定义指令的使用:

4、vue的过渡和动画,还有修饰符 这两个知识点官网已经讲得很详细,推荐去官网学习使用。

5、vue路由的使用

在初始化项目时,将是否安装路由依赖项选为是,会自动将路由依赖安装到你的项目中(router文件)。

a>.一级路由的使用:

	路由的引入:'@'
创建一个文件(路由页)=>(路由配置页)引入vue-router,Vue.use(Router),引入新建的路由页,配置路径->(主页面)router-view 添加路由视口
<router-link :to="{path:'要跳至的路径'}"></router-link> 跳至指定页面
去除路由#/的方法:添加mode:"history"

在需要路处添加<router-view></router-view>路由视图

在router/index.js里配置路由页面的路径

b>.二级路由的使用:

  	1>.引入路由页
2>.配置路径
在对应的一级路由下添加根目录 redirect:" " => 子路由都在children下添加(childred:[{},{},{}])
注意无需写/ ,系统默认处理二级路由的/问题,故无需再加

6、与后台数据交互(我们使用vue-resource实现)

通过cmd命令行进行vue-resource的安装npm install vue-resource –save

在main.js中引入:

请求方法的调用:

以上呢就是总结出来的小知识,当然后期会根据项目总结些常用的问题。如果有不合适的地方,还请指教。

vue初级知识总结的更多相关文章

  1. vue基础知识之vue-resource/axios

    Vue基础知识之vue-resource和axios(三)   vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...

  2. Vue基础知识之vue-resource和axios

    Vue基础知识之vue-resource和axios  原文链接:http://www.cnblogs.com/Juphy/p/7073027.html vue-resource Vue.js是数据驱 ...

  3. vue路由知识整理

    vue路由知识整理 对于单页应用,官方提供了vue-router进行路由跳转的处理.我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(compo ...

  4. Vue大概知识体系和学习参考

    Vue大概知识体系和学习参考文档 官方文档学习,参考,借鉴地址:https://cn.vuejs.org/v2/guide/installation.html 菜鸟教程:https://www.run ...

  5. 【Vue高级知识】细谈Vue 中三要素(响应式+模板+render函数)

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

  6. Vue基础知识简介

    基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...

  7. vue - 准备知识

    一.知识 http://www.cnblogs.com/majj/https://www.cnblogs.com/majj/category/1216624.html 阮一峰 es6http://es ...

  8. vue相关知识

    1.看https://www.bilibili.com/video/av27969216/?p=54,看他的就够了 https://juejin.im/post/5a5bc8c36fb9a01ca26 ...

  9. Vue部分知识

    一.本尊建议的学习顺序:https://zhuanlan.zhihu.com/p/23134551(侵删) 二.安装: 1.安装 Node.js,可以去Node.js的官网上下载: 2.(非必选)如果 ...

随机推荐

  1. CSS滤镜效果

    使用 filter: blur() 生成毛玻璃效果 使用 filter: drop-shadow() 生成整体阴影效果 使用 filter: opacity() 生成透明度 blur生成阴影 通常我们 ...

  2. java中==与equel的区别

    值类型是存储在内存中的堆栈(以后简称栈),而引用类型的变量在栈中仅仅是存储引用类型变量的地址,而其本身则存储在堆中. ==操作比较的是两个变量的值是否相等,对于引用型变量表示的是两个变量在堆中存储的地 ...

  3. AspectCore.Extension.Reflection : .NET Core反射扩展库

    在从零实现AOP的过程中,难免会需要大量反射相关的操作,虽然在.net 4.5+/.net core中反射的性能有了大幅的优化,但为了追求极致性能,自己实现了部分反射的替代方案,包括构造器调用.方法调 ...

  4. hibernate利用mysql的自增张id属性实现自增长id和手动赋值id并存

    我们知道在mysql中如果设置了表id为自增长属性的话,insert语句中如果对id赋值(值没有被用到过)了,则插入的数据的id会为用户设置的值,并且该表的id的最大值会重新计算,以插入后表的id最大 ...

  5. Django(一)

    Django 一.什么是web框架 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演 ...

  6. java选择结构

    /**选择结构*/ public class Demo06{ public static void main(String []args){ // if...else...型 String name ...

  7. 使用Aspose.Cells利用模板导出Excel(C#)

    前言 随着互联网的流行,web项目逐渐占据主流.我相信大部分人开发项目的过程中都写过上传以及导出Excel和Word的功能,本文仅讨论导出Excel.C#中有很多第三方组件支持导出Excel,比如:N ...

  8. IDEA + Maven + JavaWeb项目搭建

    前言:在网上一直没找到一个完整的IDEA+Maven+Web项目搭建,对于IDEA和Maven初学者来说,这个过程简单但是非常痛苦的,对中间的某些步骤不是很理解,导致操作错误,从而项目发布不成功,一直 ...

  9. Superset连接Impala数据源

    公司最近在superset上面做二次开发,目前对接了mysql和oracle数据源,对这两个源的SQL操作查询做了完善和兼容.目前有新的需求就是要对接大数据部门的HBASE和HIVE数据源,由于sup ...

  10. 4天精通arcgis

    真是掉进了一个史无前例的坑 --ArcGIS产品线为用户提供一个可伸缩的,全面的GIS平台. 这是百科的介绍,简单来讲,这就是一个地图,可以搞事情. 学的是ArcGIS API for JavaScr ...