@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。

开发环境版本，包含了完整的警告和调试模式
<script src="https://vuejs.org/js/vue.js"></script>

生产环境版本，删除了警告，优化了尺寸和速度
<script src="https://vuejs.org/js/vue.min.js"></script>

环境搭建

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快速入门

因为这是入门的，所以不用搭建开发环境，直接引用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标签引用就可以了
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

搭建样式就不说了

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="bs/css/bootstrap.css"><style>body{background-color: #e8e8e8;}</style>
</head>
<body><div id="app"><div class="row"><div class="col-xs-8 col-xs-offset-2"><div class="page-header"><h1>vue实例</h1></div></div></div><div class="row"><div class="col-xs-2 col-xs-offset-2"><div class="list-group"><!-- 使用 router-link 组件来导航. --><!-- 通过传入 `to` 属性指定链接. --><!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --><router-link class="list-group-item"  to="/h5">HTML5</router-link><router-link class="list-group-item"  to="/java">Java</router-link><router-link class="list-group-item"  to="/python">Python</router-link></div></div><div class="col-xs-6"><div class="panel"><div class="panel-body"><!-- 路由出口 --><!-- 路由匹配到的组件将渲染在这里 --><router-view></router-view></div></div></div></div></div><template id="h5"><div><h2>HTML5</h2><img src="img/h5.jpg" alt="" width="250"></div></template><template id="java"><div><h2>Java</h2><img src="img/java.jpg" alt="" width="250"></div></template><template id="python"><div><h2>Python</h2><img src="img/python.jpg" alt="" width="250"></div></template><script src="js/vue.js"></script><script src="js/vue-router.js"></script><script>// 1.创建组件const  Html5 = Vue.extend({template: '#h5'});const  Java = Vue.extend({template: '#java'});const  Python = Vue.extend({template: '#python'});// 2. 定义路由const routes = [{path:'/h5', component: Html5},{path:'/java', component: Java},{path:'/python', component: Python},// 配置根路由{path:'/', redirect: '/h5'}];// 3. 创建路由实例const router = new VueRouter({routes});// 4.创建Vue的实例,并挂载new Vue({router}).$mount('#app')</script>
</body>
</html>

布局

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/%E5%89%8D%E7%AB%AF

三十一、Vue框架赶紧来了解一下相关推荐

Vue实战篇三十一：实现一个改进版的头条新闻
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
【FastDev4Android框架开发】RecyclerView完全解析之下拉刷新与上拉加载SwipeRefreshLayout(三十一)...
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/49992269 本文出自:[江清清的博客] (一).前言: [好消息] ...
vue插槽面试题_关于前端Vue框架的面试题，面试官可能会问到哪些。？
这年头,程序员面试都讲究坐姿,姿势不对,努力白费. 参照下图,请同学们对号入座. 回想一下,自己平时面试的坐姿,你在面试官眼里,大概是什么形象,可能是工程师,也可能是键盘侠,或者找麻烦的. 当然了,想 ...
老张 .NetCore与Vue 框架学习
缘起作为一个.Net攻城狮已经4年有余了,一直不温不火,正好近来项目不是很忙,闲得无聊,搞一搞新技术,一方面是打发无聊的时间,一方面也是督促自己该学习辣!身边的大神都转行的转行,加薪的加薪,本人比较 ...
Vue框架之条件与循环的使用
如果是初学者的话,这里先给你一个基础知识的框图,可以了解一下下面代码的由来. 也可以选择我这个链接Vue条件与循环跳转到Vue官网进行学习. 上面是Vue的一个简单案例,不要急,进阶版来了,通过这个框 ...
第三十一章考试作弊
第三十一章考试作弊 "对了,还有李淳风,把李淳风也一并记录上,并移送官府." "李丽质,你搞错了没有,把我移送官府干什么?我又没参与考试,并且这些都会,我凭什么作弊,我 ...
vue中集合取第一个_快速学习Vue框架（知识点集合）
学习Vue的小伙伴速度看过来,快速学习Vue框架知识点集合贴来啦.建议收藏,尤其基础并不是很扎实的同学,本篇集合贴就是你日后工作的参考手册. 基础知识: ·vue的生命周期:beforeCreate/ ...
【前端】第三章 Vue
第三章 Vue 文章目录第三章 Vue 一.Vue 1.介绍 2.Vue 的 MVVM 模型一.Vue 1.介绍 Vue 是一套用于构建用户界面的渐进式框架.与其他大型框架不同的是,Vue 被设计 ...
Vue框架的初识入门
一,什么是Vue框架 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

三十一、Vue框架赶紧来了解一下

文章目录

前言

环境搭建

vue快速入门

对于有基础的

三十一、Vue框架赶紧来了解一下相关推荐

最新文章

热门文章