web前端技术内容详解之Vue.js框架

Vue.js是一个渐进式框架,只需要具备基本的HTML/CSS/JavaScript基础就可以快速上手。在用Vue.js构建大型应用时推荐使用NPM安装,但是需要注意npm的版本需要大于3.0。

在通过npm安装项目后,我们需要对其目录进行解析:
(1)Build:项目构建(webpack)相关代码;
(2)config:配置目录,包括端口号等。
(3)node_modules:npm加载的项目依赖模块
(4)src:这个目录当中的内容包含了我们基本上要做的事情,这里包含了几个文件:
(一)assets:存放图片
(二)components:存放组件文件
(三)App.vue:项目入口文件,组件也可以直接写在这里不适用components
(四)main.js:核心文件
(5) static:静态资源目录
(6) test:初始测试目录
(7) .xxxx:配置文件,包括git配置和语法配置等
(8) index.html:首页
(9) package.json:项目配置文件
(10) README.md:说明文档
程序=数据结构+算法,但这话在前端里并不纯粹,因为前端需要和界面打交道,所以大概总结下基础操作dom的前端开发方式:前端程序=拼界面+操作ui+算法。Vue的mvvm框架给了前端另一种思路:完全基于数据驱动的编程。帮助你从繁杂的dom操作中解脱出来,回归本质。
使用Vue的过程就是定义MVVM各个组成部分过程的过程
(1)定义View
(2)定义Model
(3)创建一个Vue实例或“ViewModel”
在创建Vue实例的时候,需要传入选项对象,可以包含挂载元素、数据等。Vue.js有很多数据绑定语法,最基础的的是文本插值,在运行时{{ message }}会被数据对象的message属性替换。

Vue实例被创建前会经过初始化,然后在数据变化时更新DOM,在这个期间也会调用一些生命周期钩子,从而我们可以自定义逻辑。总共可以分为8个段:
(1)beforeCreate 初始化实例后 数据观测和事件配置之前调用
(2)created 实例创建完成后调用
(3)beforeMount 挂载开始前被用
(4)mounted el被新建vm.$el替换并挂在到实例上之后调用
(5)beforeUpdate 数据更新时调用
(6)updated 数据更改导致的DOM重新渲染后调用
(7)beforeDestory 实例被销毁前调用
(8)destroyed 实例销毁后调用
需要注意的是created和mounted的区别,created是实例已经创建但未挂载,所以一些dom操作要放在mounted中。
Vue组件的API来自props(允许外部环境传递数据给组件)、events(允许组件触发外部环境副作用)和slots(允许外部环境将额外的内容组合在组件中)三个部分,组件的data属性必须是函数。尽管有props和events,但有时候需要js直接访问子组件,所以可以使用ref为子组件指定一个索引ID。
Vue.js的插件应当有一个公开方法install。该方法的第一个参数是Vue构造器 , 第二个参数是一个可选的选项对象。
可通过全局方法Vue.use()使用插件:
//调用 MyPlugin.install(Vue)
Vue.use(MyPlugin)
也可以传入一个选项对象:
Vue.use(MyPlugin, { someOption: true })

在vue-router中有两种导航方式:
(1)router-link声明式导航
<router-link to="/foo">Go to Foo</router-link>
router-link对应的路由匹配成功,将自动设置class属性值.router-link-active。
(2)编程式导航:
router.push(‘home‘)
// 对象
router.push({ path: ‘home‘ })
// 命名的路由
router.push({ name: ‘user‘, params: { userId: 123 }})
// 带查询参数,变成 /register?plan=private
router.push({ path: ‘register‘, query: { plan: ‘private‘ }})

原文地址:http://blog.51cto.com/14071672/2319513

时间: 2024-10-10 06:41:47

web前端技术内容详解之Vue.js框架的相关文章

Vue-multiselect详解(Vue.js选择框解决方案)

github地址:https://github.com/shentao/vue-multiselect 以下代码,可以直接建一个html文件,运行看到效果: 运行效果: <!DOCTYPE html> <html> <head> <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> <script src="https:/

Web前端之iframe详解

iframe基本内涵 通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了. <iframe src="demo_iframe_sandbox.htm"></iframe> 但是,有追求的我们,并不是想要这么low的iframe. 我们来看看在iframe中还可以设置些什么属性 iframe常用属性: 1.frameborder:是否显示边框,1(yes),0(no) 2.height:框架作为一个普通元素的高度,建议在使用css设置.

Web前端技术--网络三剑客(HTML、CSS、JavaScript)什么是新网络三剑客?以及其他前端技术(JQuery、Vue.js)。

一.Web前端技术--网络三剑客 1.HTML是什么? HTML,全称HYPER TextMarkup Language (超文本标记语言).HTML是一门描述性语言,它是网页的标准语言,并不是一门编程语言. 2.CSS是什么? CSS,全称Cascading Style Sheet(层叠样式表),是用来控制网页外观的一种技术. 3.JavaScript 是什么? JavaScript ,就是我们通常说的JS,是一种嵌入到HTML页面中的脚本语言,由浏览器一边解释一边执行.   “HTML”是网

一般Web前端开发要学什么 如何掌握Web前端技术

一般Web前端开发要学什么?如何掌握Web前端技术?越来越多的行业巨头不断向Web前端示好,除苹果.微软.黑莓之外,谷歌的Youtube已部分使用Web前端.Chrome浏览器宣布全面支持Web前端;Facebook则不遗余力地为Web前端进行着病毒式传播.Web前端代表了移动互联网发展的趋势,总有一天它将成为主流技术.Web前端作为一个前端的编程语言,前景十分可观. 学习内容包括7大学习阶段: 第1阶段:前端页面重构(4周) 内容包含了:(PC端网站布局项目.HTML5+CSS3基础项目.We

Tomcat5的web应用启动顺序详解

Tomcat5的web应用启动顺序详解 [收藏此页] [打印] 作者:佚名  2007-07-17 内容导航: 第1页 [IT168技术文档]摘要: 应用Tomcat对于我们来讲实在是司空见惯了,但是对于每个使用者来讲,应该了解其运转的机制也是必不可少的,本人在维护"apache开源项目"论坛时遇到此问题,并略作研究,望与大家共讨.分享. 一.配置自动部署时的web应用加载顺序: 当tomcat的server.xml中对虚拟主机(Host)配置中autoDeploy=true和unpa

最热web前端技术汇总

Web前段技术发展很快,主流技术日新月异,想想自己刚毕业那会用的asp技术,现在已经很少有主流网站在使用了. 再到后来的J2EE框架,然后SpringMVC大行其道,但是最近各种js框架被广为传播,Html5的推出很是丰富了移动互联网的发展,此文对当前最新的几种web前端技术进行的汇总,让大家更多地了解,然后取其所长,避其所短,快速推出简约大方,维护方便,性能良好的个人网站. JavaScript MV*框架 在相当长的一段时间里,每个程序员都要学会如何利用JavaScript来编写弹出一个警告

web前端技术社区分享

web前端技术社区分享 一.国外的前端技术网站:    1. 名称:W3C: 网址:http://www.w3.org/ 理由:前端技术的规范标准几乎都是W3C制定的  2.名称:ECMA 网址:http://www.ecmascript.org/ 理由:JavaScript最核心的内容就是ECMA 3.名称:Mozilla社区 网址:https://developer.mozilla.org/zh-CN/ 理由:Mozilla社区包含了很多有关Web前端的文章,非常值得学习   4.名称:H5

最受欢迎web前端技术总结

Web前端技术发展非常快,主流技术的进步.想想刚毕业那会用asp技术.目前,该网站已经非常少见主流应用. 后来的后来J2EE框架.然后SpringMVC声望,然而,最近的各种js框架广泛传播,Html5移动互联网非常丰富的开发引进,一些最新的文本web进行的汇总,让大家很多其它地了解.然后取其所长,避其所短.高速推出简约慷慨,维护方便,性能良好的个人站点. JavaScript MV*框架 在相当长的一段时间里,每一个程序猿都要学会怎样利用JavaScript来编写弹出一个警告框或查看是否包括@

SQL Server DBA工作内容详解

原文:SQL Server DBA工作内容详解 在Microsoft SQL Server 2008系统中,数据库管理员(Database Administration,简称为DBA)是最重要的角色.DBA的工作目标就是确保Microsoft SQL Server 2008系统正常高效地运行.DBA的工作也是最繁忙的工作,无论是性能调整,还是灾难恢复,都离不开DBA的支持. 一般地,作为一个DBA,至少应该做好以下12项任务: 任务一:安装和配置; 任务二:容量规划; 任务三:应用架构设计; 任