Vue入门级知识

最新推荐文章于 2024-06-12 08:41:10 发布

xuehao1997

最新推荐文章于 2024-06-12 08:41:10 发布

阅读量92

点赞数 2

本文链接：https://blog.csdn.net/xuehao1997/article/details/102611346

版权

1.为什么要用前端框架？

js框架对一下几点操作都有自己近乎趋近完美的解决方案

渲染数据
操作DOM
操作cookie等存储机制api

2.MV*模式介绍阮一峰

MVC
- 模型(Model):数据保存
- 视图(View):用户假面
- 控制器(controller):数据保存
  1.View 传送指令到 Controller
  2.Controller 完成业务逻辑后，要求 Model 改变状态
  3.Model 将新的数据发送到 View，用户得到反馈
MVP
- 各部分之间的通信，都是双向的。
- View 与 Model 不发生联系，都通过 Presenter 传递。
- View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
MVVM
- 基本上与MVP模式完全一致唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。

3.安装

直接CND引入

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

直接script引入
npm
- 在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

简单的双向数据绑定案例

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <input type="text" v-model = "msg">
    </div>
    <script src="../lib/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'hello'
            }
        });
    </script>
</body>
</html>

4.手写一个迷你的Vue

//匿名函数
(function(global , factory){
    'use strict';
   //等于在全局添加了一个Vue属性，属性值为第二个参数：factory
   global.miniVue = factory();
})(this , function(){
    function miniVue (options) {
        if (!(this instanceof miniVue)
        ) {
          warn('miniVue is a constructor and should be called with the `new` keyword');
        }
        this._init(options);
      }
    //  访问私有成员的成员方法可以写在类的原型中
    miniVue.prototype._init = function(options){
        console.log(options);
        document.querySelector( options.el ).innerHTML = options.data.msg;
    }
      return miniVue;
});

xuehao1997

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门级知识

1.为什么要用前端框架？js框架对一下几点操作都有自己近乎趋近完美的解决方案渲染数据操作DOM操作cookie等存储机制api2.MV*模式介绍阮一峰MVC模型(Model):数据保存视图(View):用户假面控制器(controller):数据保存1.View 传送指令到 Controller2.Controller 完成业务逻辑后，要求 Model 改变状态3....
复制链接

扫一扫