三十一、vue框架赶紧来了解一下 -尊龙游戏旗舰厅官网

@author：runsen

@date：2019/08/10

人生最重要的不是所站的位置，而是内心所朝的方向。只要我在每篇博文中写得自己体会，修炼身心；在每天的不断重复学习中，耐住寂寞，练就真功，不畏艰难，奋勇前行，不忘初心，砥砺前行，人生定会有所收获，不留遗憾 （作者：runsen ）

文章目录

• 前言
• 环境搭建
• vue快速入门
• 对于有基础的

今天学下前端，当代流行的vue框架，带大家简单玩下
js三大框架：

• vue.js：

优点：更轻量，单页面，简单易学
缺点：不支持ie8
开发团队：中国国内团队开发，作者：尤雨溪

• angular：

优点：完善的框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能
缺点：比较笨重，学习成本高，不兼容ie6/7
开发团队：google谷歌

• react：
  优点：速度快、跨浏览器兼容、单向数据流、兼容性好
  缺点：并不是一个完整的框架，需要加上reactrouter和flux才能完成（目前百度阿里等企业已经开始弃用）
  开发团队：facebook脸书

• vue.js

vue.js是当下很火的一个javascript mvvm库，它是以数据驱动和组件化的思想构建的。相比于angular.js，vue.js提供了更加简洁、更易于理解的api，使得我们能够快速地上手并使用vue.js。

开发环境版本，包含了完整的警告和调试模式

生产环境版本，删除了警告，优化了尺寸和速度

• nodejs 安装

自行百度吧
其实就是安装npm 包管理系统，就是python中的pip

• vue安装

npm install vue npm install cnpm npm install -g webpack # 安装webpack npm install --global vue-cli # 全局安装脚手架工具 vue init webpack myvue # 创建项目 cd myvue npm run dev

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。

因为这是入门的，所以不用搭建开发环境，直接引用vue就可以了

先定义一个div，绑定id，new 一个vue出来,el是成分的意思，再绑定id，data是定义的方法，通过message来传递参数，其实就像python中的字典，{{}}此语法就是django中的模板变量的语法，非常的易懂。

运行结果：

实现下面的案例

效果：点击html5出现html，点击java出现java，点击python出现python
如果用纯的js写，难度非常的大，代码量非常的大，就是jq代码量依然不少。但是用了vue框架

这里使用的是vue.js 路由

在项目里安装使用cnpm install vue-router

由于咱们是简单使用，学下就通过script标签引用就可以了

搭建样式就不说了

推荐使用bootstrap，非常好看又方便

全代码 代码已经尽量写了注释

布局

bootstrap栅栏系统
col是列；

xs-maxsmall，超小；sm-small，小；md-medium，中等；

• 引用vue和vue.router

• 创建三个组件const方法，记得 template 绑id

• 定义路由，其实就是django的urls

• 创建路由实例

• 创建vue的实例,并挂载

• vrouter-link 和router-view 是固定的用法，一个进口，一个出口。

https://github.com/maolirunsen/maoli/tree/master/前端

总结

以上是尊龙游戏旗舰厅官网为你收集整理的三十一、vue框架赶紧来了解一下的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。