使用VueJs开发单页面应用经验总结
最近在构建vue项目,整体已经完成,今天来总结总结。
1.项目搭建
由于是vue+node项目,所以本机必须装有nodejs 以及npm。开发环境的搭建呢网上教程一大堆,不会的同学可以自己去看看。这里我想强调一下的是,在安装过程中有一个jslint选项(JavaScript验证工具),我的建议是选择NO,如果你有非常专业的js代码风格,可以使用,当然新手还是算了吧。
2.项目结构
项目构建完了以后的结构就是这个样子
*不包括dist文件夹(项目使用webpack打包后的文件夹,构建的项目中不包括此文件夹)
其中的index.html文件是这个前端的页面入口(单页面应用)
接下来主要的开发工作都是在src目录下
src目录结构如上图
1.assets是项目的所有图片文件
2.components是所有的模块化组件,common为公共组件
3.jsdao下为公用的js方法
4.router为vue-router文件
5.vuex为状态管理的文件夹
6.App.vue是页面最外层的顶层组件
7.main.js主要是new一个vue对象
好的,接下来我们一一细说
1.assets文件没有什么可说的了
2.components也就是组件
分为以下几个部分
2.1组件的创建
新建一个.vue文件,新建完的文件包括三个部分:<template>(组件的html结构),<script>(组件的js文件),<style>(组件的样式文件)
*在<template>标签内只能有一个父级标签,<style>标签有一个属性 scoped设置这个标签可以使<style>内部定义的样式只在该组件内部有效
最核心的东西来了就是script标签
一般情况下script内部的格式比较固定,如下
export default{
name:"puductInfo",
props:['model'],
filters: {
turnTime: function(date){
return new Date(+date).Format("yyyy-MM-dd");
},
retimgUrl: function(url){
return "../../static/images/" + url;
}
},
data () {
return{
imgdata:"puduct.jpg"
}
},
methods:{
addpuduct: function(mod){
this.$store.commit("setModal", mod);
this.$store.commit("setShow", true);
}
}
}
这种写法属于ES6的语法,当然了作为一个热爱新技术的前端,我推荐大家这么做,其中的参数我来做详细解释
name:为该组件的名字(在组件内部调用自己本身时有用);
props:父子通信的媒介(参数为数组);
filters:过滤器常用作处理数据格式,图片路径等,用法:是在filters内定义一个处理的函数,如上面代码中的turnTime,调用方式为{{model.lasttime | turnTime(model.lasttime)}}或者<img :src= "imgdata | retimgUrl(imgdata)" alt="商品图片"/>
data:为组件的数据 *注意写法
methods:为组建的方法
其中还有以下这些参数比较常用:
components:定义子组件
写法如下:
import myTree from './common/treeMenu.vue'
import userList from './common/userList.vue'
import puductInfo from './common/puductInfo.vue'
components: {
myTree,userList,puductInfo
}
然后就可以把components内定义的组件当做标签来使用
mounted:el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子,其实就是该模块加载完成以后调用
watch:监听数据对象或者方法的值的变化*如果数据为对象的话要监听其键值对的变化需要添加deep属性
好了,今天介绍完了整体以及组件内部的结构,后期我会分别介绍,vuex, vue-resouce,以及组件之间的通信等
转载于:https://www.cnblogs.com/wangkdeblogs/p/7120172.html
使用VueJs开发单页面应用经验总结相关推荐
- React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念
React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念 React 入门系列教程导航 React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念 Rea ...
- EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本...
为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...
- vue开发单页面应用
今天我们看看VUE怎么开发单页面应用,VUE提供了脚手架vue-cli,通过这个可以很轻松的创建VUE单页面应用, 1.创建VUE项目 首先确保电脑上安装了NODE.JS, 在创建项目的目录下,打开 ...
- Day 22: 使用Spring、MongoDB和AngularJS开发单页面应用
今天的<30天学习30种新技术>挑战,我决定使用Spring框架.MongoDB和AngularJS开发一个单页面应用.我很熟悉Spring和MongoDB,但是我没用配合Spring使用 ...
- 使用Flask和Vue开发单页面应用
使用Flask和Vue制作一个基本的CRUD单页面应用,其中后台用到了RESTful API 参考原版的教程https://testdriven.io/blog/developing-a-single ...
- 用python+vue+node开发单页面网站
一.开发前准备 1.安装node:为了运行npm命令,该命令会开启网站服务器以及完成相关配置 详情见:https://blog.csdn.net/mrwangweijin/article/detail ...
- 开发单页应用(SPA)时候遇到的微信支付授权目录的坑
转载:http://www.tuicool.com/articles/mQ7RRfb 开发单页应用(SPA)时候遇到的微信支付授权目录的坑 好久没写blog了,今天微信终于让我忍不住上来写一篇. 项目 ...
- 前端大屏页面布局经验
前端大屏页面布局经验 额··· 其实谈不上经验,只能说是开发过程中值得记录一下的东西,不一定是对的. 分辨率 首先一点,大屏对分辨率和显示器是有要求的,因为他不像一般的页面,出个纵向的滚动条啥的无所谓 ...
- 浏览器打不开计算机二级网页,网页打不开,其他正常,ie浏览器打不开二级页面...
最近有一些朋友反馈Win7系统打开浏览器后二级页面打不开的情况,导致无法正常查看网页,那么如何解决Win7网页二级链接打不开的情况呢?下方小编整理了几个解决方法,希望能帮助大家解决问题. win7二级 ...
- 测试开发【Mock平台】06开发:项目管理功能(二)Atnd页面搭建经验实战与学习线路梳理
[Mock平台]为系列测试开发教程,从0到1编码带你一步步使用Spring Boot 和 Antd React 框架完成搭建一个测试工具平台,希望作为一个实战项目能为你的测试开发学习有帮助. 经过一段 ...
最新文章
- 电销机器人价格_电销机器人哪个牌子最好(强烈推荐)
- DataGrid方法标注
- C#.NET常见问题(FAQ)-如何使用2D绘图控件ZedGraph绘制坐标轴和坐标曲线
- java类加载器_java底层内功 第一章,类加载器的任性
- Struts2入门(二)——配置拦截器
- 【入门5】字符串(今天刷洛谷了嘛)
- 安装biztalk2006后导致QuickStartV20不正常
- github上写简历
- 外星人笔记本 键盘灯不亮解决 Alienware 13
- PHP一句话木马后门
- 2022-01-05 网工基础(十九)NAT基本原理与配置
- 首份财报营收增长扭亏为盈,为何怪兽充电的出路依旧“迷雾重重”
- ryzen linux 搭配显卡,AMD Ryzen 2600CPU搭配什么显卡比较合理?
- gpio上拉失效问题
- ValueError: Classification metrics can‘t handle a mix of continuous-multioutput and multiclass targe
- Linux下安装bugzilla
- zigzag扫描matlab,ZIGZAG扫描的MATLAB实现
- ubuntu下安装bochs
- 一路走来的飞控设计研发之路
- JavaCV开发详解专栏文章目录(JavaCV速查手册)