vue.js 与require.js初相识
前端发展技术不断更新，需要学习的地方还很多，一个人最可怕的不是有多成功，而是不断的学习，作为一名技术人员，要不断学习新的事物，不断提升自己，才是发展之路。
写博客不是给别看的而是给自己看的
有幸之前的项目使用过一些不错的框架 今天简单描述一下vue和require的使用，仅入门级的参考。
Vue
- Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
- Vue 只关注视图层， 采用自底向上增量开发的设计。
- Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
- Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。
require
- RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K，堪称非常轻量。它还同时可以和其他的框架协同工作，使用RequireJS必将使您的前端代码质量得以提升。
1首先布置使用require
使用requirejs，我们只需要导入requirejs即可，不需要显式导入其它的js库，因为这个工作会交给requirejs来做。
<script type="text/javascript" data-main="./static/js/index.js" src="./static/plugins/require.js">script>同时data-main 是告诉requirejs：载入真正的入口文件。它一般用来对requirejs进行配置，并且载入真正的程序模块。
看看入口文件index.js的配置：
requirejs.config({
baseUrl: './static/',
paths: {
"jquery": "plugins/jquery-1.8.3.min",
"bootstrap": "plugins/boostrapv3/js/bootstrap.min",
},
shim: {
"bootstrap": {
deps: ["jquery"]
},
},
});
config 该函数用于配置RequireJS.
require.config配置参数选项
baseUrl ：用于加载模块的根路径。
paths： 用于映射不存在根路径下面的模块路径。
shims： 配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。
RequireJS定义，但是你还是想通过RequireJS来使用它，那么你就需要在配置中把它定义为一个shim。
deps:加载依赖关系数组define: 定义一个模块
define(function(require){
var Vue = require('../static/plugins/Vue.min.js');
var public = require('../static/js/public.js');
var cookie = require('../static/plugins/jquery.cookie.min.js');
var login_outUrl = public.urlPath.loginUrl;
});另外还可以把 require 当作依赖的模块，然后调用它的方法：
require(["./static/plugins/Vue.min.js","./js/navbar"],function (vue,navBar) {
navBar.fnInit("active");
});2 使用Vue
- 这里我们再require的data-main中配置vue
paths: {
"jquery": "plugins/jquery-1.8.3.min",
"Vue":"plugins/Vue.min",
},- 在引用vue的require中使用
require(["Vue","./js/navbar"],function (vue,navBar) {
navBar.fnInit("active");
});如果项目中使用webpack，nodeJs管理项目，与Vue一起使用会更好的前端开发体验，由于目前还没设计，这里不做过多说明 ， 但是不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。
- 在页面地方使用Vue模板语法，Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，
<ul id="side">
<li v-for="item in items" :data-type="item.type">
<span class="iconfont" :id="item.type">span>
<div class="tooltip parts-li-tip">
<div class="tooltip-inner" >
<div >
<h4>{{ item.message }}h4>
div >
div>
div>
li>
<li data-type="QRcode">
<span class="iconfont">span>
<div class="tooltip parts-li-tip">
<div class="tooltip-inner">
<img src="./static/img/firstPage/weixin.jpg">div>
div>
li>
<li data-type="Top" v-on:click="goTop()">
<span class="iconfont">span>
li>
ul>- Vue数据处理
new Vue({
el : '#side',
data: {
items: [
{ message: '客服电话:15389056016',img: './static/img/online/phone.png',type: 'Phone' },
{ message: 'QQ:165639134',img: './static/img/online/qq.png',type: 'QQ' },
{ message: '淘宝官方店',img: './static/img/online/taobao.png',type: 'WhatsApp' },
],
},
methods: {
fnSideTarget: function (message) {
alert(message)
},
goTop:function () {
$('html,body').animate({'scrollTop':0},600);
}
}
});