10.9 Vue预热

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

吃土豆炖豆角文艺吗

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

阅读量93

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/qq_40710524/article/details/102462918

版权

Vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1 Array的方法

主要掌握 forEach() map() filter() every() some() 参数都是function（item，index，arr）{}

reduce() concat(）

2 defineProperty

Object.defineproperty

具体文档 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

3 数据劫持简单版（双向数据绑定简单版）

<!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>
    <input type="text" id="inp" name="">
    <div id="main">
        {{ name }}
        {{ name }}
        {{ name }}
    </div>

    <script>
        //1 初始化数据
        var data ={
            name:'penkey'
        }
        //Object.defineProperty
        //2 数据劫持
        var val = null;
        var str = main.innerHTML;
        // console.log(str)
        Object.defineProperty(data,"name",{ 
            get:function(){
                return val;
            },
            set:function(newVal){
                val = newVal;
                complie();
            },

        })
        //初始化劫持数据
        data.name = 'penkey';
        //初始化文本框内容
        inp.value = data.name;

        //模板编译
        function complie(){
            main.innerHTML = str.replace(/\{\{\s*([^\s]+)\s*\}\}/g,function(){
                return data[arguments[1]];
            })
        }

        //修改视图文本框
        inp.onkeyup = function(){
            data.name = this.value;
        }


    </script>

</body>
</html>

Vue尝鲜

1 声明式渲染模板中先声明变量然后再把数值复制过去

2 响应式数据视图同时变

指令：Vue中v-开头的都叫指令

创建Vue实例虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

$el: 是指Vue活动的范围

$options 是创建vue实例传入的参数

$el ：

function Vue(options){
            this.$options = options;
            //this.$el = options.el;
            this.$data = options.data;


            function getEl(el)
            {
                if(typeof el == 'string')
                {
                    if(el !="body" && el!="html")
                    {
                        return document.querySelector(el)
                    }
                    else{
                        throw new Error("error");
                        
                    }
                }
                else
                {
                    return el;
                }
            }
            this.$el=getEl(options.el)
        }

吃土豆炖豆角文艺吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.9 Vue预热

1 Array的方法主要掌握 forEach() map() filter() every() some() 参数都是function（item，index，arr）{}reduce() concat(）2 definePropertyObject.defineproperty 具体文档https://developer.mozilla.org/zh-CN/...
复制链接

扫一扫

专栏目录