RequireJS 详解和 Vue 详解

RequireJS 详解

https://blog.csdn.net/zhoulei1995/article/details/83479583

使用
其实 RequireJS 的使用非常简单，核心只有两个函数：

define
require

引入 RequireJS

js/lib/index.js

(function () {
    alert('Hello index')
})()

index.html

<script src="scripts/require.js"></script>
<script>
    require(["js/lib/index.js"], function () {
        // do something after loading index.js
    })
<script>

RequireJS 配置函数
如果有些路径过长，有时候我们希望能使用别名代替，这个时候可以使用 requirejs.config 函数。

<script src="scripts/require.js"></script>
<script>
    requirejs.config({
        //By default load any module IDs from js/lib
        baseUrl: 'js/lib',
        //except, if the module ID starts with "app",
        //load it from the js/app directory. paths
        //config is relative to the baseUrl, and
        //never includes a ".js" extension since
        //the paths config could be for a directory.
        paths: {
            "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]
        }
    })
    require(["index.js", "jquery"], function (index, $) {
        // do something after loading index.js
    })
<script>

如果我们页面过多，总是写 requirejs.config 不太好，感觉 ugly。RequireJS 为我们提供了一种方式。

<script data-main="js/app.js" src="js/require.js"></script>

在 script 标签中，加入 data-main 属性。这样会默认加载 app.js，而我们只需要在 app.js 中填写配置信息即可。

app.js

requirejs.config({
    //By default load any module IDs from js/lib
    baseUrl: 'js/lib',
    //except, if the module ID starts with "app",
    //load it from the js/app directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]
    }
})
require(["index.js", "jquery"], function (index, $) {
    // do something after loading index.js
})

第三方模块

通过 require 加载的模块一般都需要符合 AMD 规范，即使用 define 来申明模块。但是部分时候需要加载非 AMD 规范的 js，这时候就需要用到另一个功能：shim。

比如我要是用 underscore 类库，但是他并没有实现 AMD 规范，那我们可以这样配置：

    // 配置
    require.config({
        shim: {
            "underscore" : {
                exports : "_"
            }
        }
    })
    
    // 使用
    require(["underscore"], function(_){
        _.each([1,2,3], alert)
    })

Vue 详解

https://www.cnblogs.com/webspace/p/8619563.html

一、前端界面

1、导入vue.js

<script type="text/javascript"src="vue/vue.min.js" ></script>

2、绑定数据
三种方法：

1. {{ 变量 }}
2. 属性： v-text=" "；
3. 属性： v-html=" ";

index.html

<div id="app">
  	<p>{{ foo }}</p>
  	<button v-on:click="foo = 'baz'">Change it</button>
</div>

<script type="text/javascript">
	var obj = {
	  foo: 'bar'
	}
	new Vue({
	  el: '#app',
	  data: obj
	})
</script>

3、参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性：

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>

在这里参数是监听的事件名。我们也会更详细地讨论事件处理。
缩写
v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="url">...</a>

它们看起来可能与普通的 HTML 略有不同，但 : 与 @ 对于特性名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析。而且，它们不会出现在最终渲染的标记中。缩写语法是完全可选的，但随着你更深入地了解它们的作用，你会庆幸拥有它们。

4、其他函数

1. v-if--------------条件渲染：通过动态增删dom节点
2. v-show--------条件渲染：通过style控制是否现实
3. v-for
4. …

5. Vue实例常用属性

（1）数据

data:Vue 实例的数据对象

components：Vue实例配置局部注册组件

（2）类方法
computed:计算属性

watch：侦听属性

filters：过滤器

methods:Vue实例方法

render：渲染函数，创建虚拟DOM

（3）生命周期
created：在实例创建完成后被立即调用，完成初始化操作
mounted：el挂载到Vue实例上了，开始业务逻辑操作
beforeDestroy：实例销毁之前调用