Vue的介绍和使用

最新推荐文章于 2022-07-26 15:18:46 发布

wzmzw

最新推荐文章于 2022-07-26 15:18:46 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/wzmzw/article/details/101049245

版权

1、介绍：

Vue.js是一个MVVM框架
Vue.js它是一个单项数据流的框架
Vue.js是一个Js渐进式框架
- 渐进式：越学越难

2、使用：

直接通过script标签对引入【基础时】在Vue官网下载vue.js

当我们引入Vue.js后会得到一个全局变量Vue,它是一个构造函数，可以实例化对象

在这里插入图片描述

还可以通过npm安装使用【高级】

3、查看Vue源代码总结：

是通过匿名函数封装的
匿名函数的格式
（ function ( arg1,arg2) {}）（ a,b ）
好处：
1. 安全性要高
2. 自调用
3. 解决了命令冲突
源代码封装的大致原理

 (function ( global,factory) {
        global.Yyb = factory
    })( this, function ( options ) {
        function Vue ( options ) {
            this.name = options.name
            this._init()
        }
        function _init () {
            Vue.prototype.age = 18
            Vue.prototype.id = 10
        }
        return  Vue
    })

5. 前端模块化

AMD
- 定义模块 define关键字
- 模块引入 require
CMD
- 定义模块 define关键字
- 模块引入 require
Common.js
- 导出 module.exports
- 引入 require

6. Vue使用方式有两种

script标签对引入
npm安装
- 实现 - amd

4、使用代码简单实现hello world：

<body>
    <!-- V -->
    <!-- 为什么id叫做app，  app是 application 的简写， application 应用 -->
    <div id="app">
        <!-- 这里面是vm的作用范围 -->
        <!-- 数据展示 -->
        <!-- 我们想要在html结构中书写js,那么久需要模板语法： vue提供了mustache ,双大括号语法 -->
        <p> {{ info }} </p>
    </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
    /* 
        思考： 这里谁是M   谁是V   谁是VM
    */
    var VM = new Vue({
        el: '#app',//官方称呼： ‘挂载’   element简写，它的作用是选取一个已有的DOM作为Vue实例的作用范围
        data: { // M  
            info: 'Hello World'
        }
        /* 
            data选项中定义的数据相当于全局变量，在app模板中相当于全局变量，可以直接使用
        */
    })
</script>