给正在学习Vuejs同学的几个小Tips

Posted 2021-05-01 思维的技术社区

如果你还不知道，赶紧去恶补。

它是跟 Angular, React 齐名的 One page App 框架. 但是它更加先进, 也更加好学。

前些日子闹的沸沸扬扬的淘宝 weex 框架, 跟vue就有密切的关系。

Vue的开发效率极高. 一个商户端app的前端,我们就是用一周的时间写好的.

看本文之前, 先去看一下 中文文档: http://cn.vuejs.org/guide/
本文整理了我们团队在开发项目时所遇到的问题和坑：

1

如何做一个页面的显示

01

修改  src/routers.js

上面的 name, 类似于 rails中的 naming route path, 至于 component, 则是语法糖. 除了为了让语法跑通, 没有其他意义。

02

建立好对应的Vue 文件

可以认为, 上面的 vue 文件分成三部分:

<template> 标签, 类似rails中的视图.

<script> 标签,类似rails中的 controller,

<style> 最下方的标签,则是样式.

在vuejs 中, 没有链接到数据库的那种MODEL, 但是有跟 form object进行双向绑定的model. 所以, vue管这个模式叫 mvvm, model-view-viewmodel.

具体叫什么无所谓了. 关键大家知道它是在分层就可以了.

vue 文件中, 这三部分,会在 编译时(运行命令 $ npm run build) 分别把三大快摘出来,然后把相同的代码组合到一起, 重新编译成传统的 html 文件.

vue 的<script>部分中,使用了 ES6 代码, 使得js更加强大. (希望了解es6的朋友, 阮一峰 已经出了开源的书: http://es6.ruanyifeng.com/#docs/style )

vue的 <style>中,可以直接使用sass 语言(CSS的变种, sass可以编译成css)。

03

一个例子看 import

这句话是引用了 x-header.  (XHeader 类似于 rails中的  partial) , 记得使用了引用之后,还要在代码中。

这样声明一下,才能使用。

04

什么是 export default { }

这句话是 es6的语法. 类似于commonJS的 export. 目的是为了给View中暴露需要使用的函数；

下面函数中,比较重要的是两个 data 方法。

05

如何在View中显示某个变量?

使用 {{ ... }}

06

如何跳转到某个链接?

1.跳转到 /orders/new?product_id=3, 用query

2.跳转到 /orders/:id/, 用 params

07

vue 的路由都是GET方法

都是靠GET来访问的

08

vue发起http请求

如下：

09

如何与jQuery 一起使用 ?

非常简单, 普通的HTML怎么用, vue中就怎么用。

10

页面刷新完的钩子方法是什么？

2

写在最后

如果你有哪些不明白的问题, 可以在留言中发问~

思维的技术社区

全栈技能学习平台

区块链｜Ruby ｜前后端｜移动端

程序员职业规划｜交易所全技能