当前位置: 首页 > news >正文

前台vue的使用简单小结

前台vue的使用简单小结

        

本项目要求:
安装有node.js 6.0以及以上
安装npm
使用vue.js官方安装方法初始化项目
npm install
安装VueResurce:npm install vue-resource
安装element-ui:npm i element-ui -S

 

 

说明:
一个基本的前端项目除了基本的HTML/Css/JS等外,不同的框架的组成部分都需要包括以下几部分:
1.UI模块 2.路由模块 3.Http模块 4.状态模块

本项目是用vue-cli + webpack创建项目
项目的代码写在目录下的src目录内
项目中已经用了VueRute和VueResurce两个插件来管理前端路由以及前端的Http请求。

注:
从整个项目来讲,除了上面两个插件外,还需要以下几个方面的插件
1.UI界面框架,暂时在PC端选用element-ui或是vueStrap或是iview,keen-ui,移动端待定,可能会考虑兼容微信选用Vux,不过mint-ui、vue-material也在考虑之内
2.本地存储
3.前端状态管理,会使用最为成熟的vuex
4.关于移动端的开发,我们将会是使用基于Vue或是同一系列的前端框架。在当前流行的框架中微信公众号开源了他们的WeUI,但是它不是基于Vue的,
如果我们有前端项目不是Vue框架而是JQuery框架,这是个不错的选择。另一个是Weex,这是阿里开源的移动前端库,已经在全套的阿里系APP上使用了,
有人说它里面对阿里的业务有点想引入,这个看需要了,但我想基础框架应当还是不错的。另外有在PC前端上开源做的很好的饿了么团队的移动端前端
开源项目mint-ui,它是一套组件库,引用很方便,流行度很高。另外一个是国内的个人项目Vux,它的组件更丰富,结合了WeUI的很多基础组件,在微信公众号
等场景下使用很多。最后还有一个国外项目Vue-material,流行度很高,组件丰富,但没去查它是由哪个公司或个人运维的。
从国内流行度上讲,我们的前端框架应当从Weex,Vux,Mint-ui三者中选一个。不过Weex是一个具备混合开发能力的大体系,学习曲线可能会高一点点。但是Weex和
其它两个相比,明显在层次上要高一级,事实上,是可以同时使用这三者的,因为Mint-ui是一个组件库,而Vux也是一个组件库,这两个才是有重合部分的。但
它们都是基于Vue的,所以可以共同,而Weex是一种基于Vue实现现的跨平台环境,因此一种合理的设想是以Weex为基础,来实现App的跨平台以及和源生代码的融合
在开发组件上,可以适当引用Vux和mint-ui.不过事实上Weex改变了很多Vue的基本语法,致使原有的Vue项目很难直接使用。因此想将三者融合,可能并不好处理。
Weex事实上,从趋势来看,它已经正在向着跳出Vue而自成体系的方向发展。如果准备做Vue项目,可能从一开始就要想好是否要采用Weex。
Weex其实应当和Ract Native是同一个物种。其它类似的还有Wex5,ApiCloud,DCloud,HBuilder等。

 

/*
Vue的基本知识点说明:
一个典型的Vue实例包括了以下的基本结构:
Tips:Vue(parma) 是一个构造函数。它的参数是一个js对像。这个js对像就是下面讲的Vue对像实例。
var vm=new Vue(
{
el:'这里写的是Vue实例挂载的容器元素(Html元素,一般是一个Div)的Id。',
template:'这里写的是这个实例的HTML模板,这是一个HTML片段',
data:'Vue实例里定义的数据。一般也定义为一个js对像。但对像中只有数据',
watch: 'Vue的数据监视器功能。一般会定义一个js对像,其成员格式是定义一个和要监视的数据同名的functon。例如{myData:function(){};}',
methods:'Vue实例定义的方法集合。一般也会定义为一个js对像。其成员按需要定义function',
computed:'Vue的计算属性。效果有点像watch,但是在对数据成员的处理上写法更简洁,效率更好(它们之间的区别可以看官方文档)。它默认定义了getter,你可依据需要自行定义setter',
components:'Vue对像的子组件清单。清单最好是一个js数组,它的每一项是一个Vue对像或是一个Vew.component对像',

//Tips:以下三个是定义组件时对外公开的重要接口
events:'',
slot:'',
props:'自定义组件的自定义属性,可以像html元素的属性一样使用。这里通常会定义为一个js数组以便定义多个属性',

//Tips:Vue实例中的各成员一般定义为一个js对像不是意味着必须定义为一个js对像。它完合可以按js的语法直接定义一个数据或是function;
//Tips:Vue实例的构造函数中定义的这个对像要求的成员不都是必须的。可按需要来写;

}
);


Tips:
Vue组件的生命周期共会触发以下几个函数
create:
beforeCompile:
compiled:
ready:
beforeDestroy:
destoryed:


Vue在Html上的一些基本知识点:
Tips:这部分的知识在官方文档内叫做模板语法。
V-标识:在Html的元素属性上要应用Vue,必须有V-标识前缀的属性修饰。
常用的标识(它修是Vue预定义好的指令):v-on(可缩写为@),v-if,v-bind(可缩写为:),v-html,v-for,v-model,v-show
*/

转载于:https://www.cnblogs.com/daiwei1981/p/8599279.html

相关文章:

  • SSRF(服务端请求伪造)
  • ubuntu下unzip解压zip文件中文乱码问题
  • 菜鸟网络与顺丰达成和解 确保数据安全进行合作
  • Android系统启动流程 -- android
  • Exchange 2016 CU9 已发布
  • js上传文件带进度条
  • LinuxUnix命令
  • python——if判断语句的应用
  • Linux学习笔记第三天-软链接和硬链接
  • Linux集群(四)-LVS持久连接与高可用
  • 猜数字小游戏,很naive......
  • 20165302 第四周学习总结
  • [转]地图投影的N种姿势
  • AR SLAM
  • IBM与欧洲银行巨头合作 把区块链技术引入实际应用
  • 时间复杂度分析经典问题——最大子序列和
  • 【108天】Java——《Head First Java》笔记(第1-4章)
  • 【面试系列】之二:关于js原型
  • ➹使用webpack配置多页面应用(MPA)
  • JavaScript 基础知识 - 入门篇(一)
  • Java编程基础24——递归练习
  • vue-cli3搭建项目
  • 发布国内首个无服务器容器服务,运维效率从未如此高效
  • 仿天猫超市收藏抛物线动画工具库
  • 互联网大裁员:Java程序员失工作,焉知不能进ali?
  • 技术攻略】php设计模式(一):简介及创建型模式
  • 前端攻城师
  • 三分钟教你同步 Visual Studio Code 设置
  • 适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域
  • PostgreSQL之连接数修改
  • 分布式关系型数据库服务 DRDS 支持显示的 Prepare 及逻辑库锁功能等多项能力 ...
  • ​LeetCode解法汇总518. 零钱兑换 II
  • # 执行时间 统计mysql_一文说尽 MySQL 优化原理
  • #define用法
  • ${ }的特别功能
  • $GOPATH/go.mod exists but should not goland
  • (3)(3.5) 遥测无线电区域条例
  • (3)Dubbo启动时qos-server can not bind localhost22222错误解决
  • (C语言)共用体union的用法举例
  • (附源码)springboot“微印象”在线打印预约系统 毕业设计 061642
  • (十六)一篇文章学会Java的常用API
  • (学习日记)2024.01.19
  • (循环依赖问题)学习spring的第九天
  • (译)2019年前端性能优化清单 — 下篇
  • (转)【Hibernate总结系列】使用举例
  • (转贴)用VML开发工作流设计器 UCML.NET工作流管理系统
  • (转载)(官方)UE4--图像编程----着色器开发
  • *** 2003
  • .net 打包工具_pyinstaller打包的exe太大?你需要站在巨人的肩膀上-VC++才是王道
  • .NET 动态调用WebService + WSE + UsernameToken
  • .net 中viewstate的原理和使用
  • .NET/C# 异常处理:写一个空的 try 块代码,而把重要代码写到 finally 中(Constrained Execution Regions)
  • .Net高阶异常处理第二篇~~ dump进阶之MiniDumpWriter
  • .net之微信企业号开发(一) 所使用的环境与工具以及准备工作
  • :中兴通讯为何成功