vue 入门

河湾欢儿

发布于 2018-09-06 17:22:34

4420

发布于 2018-09-06 17:22:34

1.1 vue的引入数据的双向绑定:也就是数据的同步修改

逻辑分析: 
    1. 我们需要一个UI元素和属性相互绑定的方法
    2. 我们需要监视属性和UI元素的变化
    3. 我们需要让所有绑定的对象和元素都能感知到变化

1.1.1. vue与js的对比 ----js的实现

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Demo</title>

    </head>

    <body>
        <div>

            <h4>数据的双向绑定----js的实现</h4>
            <input type="text" data-bind-1="name" />
            <input type="text" data-bind-1="name" />

        </div>
    </body>

</html>
<script>
    function DataBinder(object_id) {
        // Create a simple PubSub object
        var pubSub = {
                callbacks: {},

                on: function(msg, callback) {
                    this.callbacks[msg] = this.callbacks[msg] || [];
                    this.callbacks[msg].push(callback);
                },

                publish: function(msg) {
                    this.callbacks[msg] = this.callbacks[msg] || [];
                    for(var i = 0, len = this.callbacks[msg].length; i < len; i++) {
                        this.callbacks[msg][i].apply(this, arguments);
                    }
                }
            },

            data_attr = "data-bind-" + object_id,
            message = object_id + ":input",
            timeIn;

        changeHandler = function(evt) {
            var target = evt.target || evt.srcElement, // IE8 compatibility
                prop_name = target.getAttribute(data_attr);

            if(prop_name && prop_name !== "") {
                clearTimeout(timeIn);
                timeIn = setTimeout(function() {
                    pubSub.publish(message, prop_name, target.value);
                }, 50);

            }
        };

        // Listen to change events and proxy to PubSub
        if(document.addEventListener) {
            document.addEventListener("input", changeHandler, false);
        } else {
            // IE8 uses attachEvent instead of addEventListener
            document.attachEvent("oninput", changeHandler);
        }

        // PubSub propagates changes to all bound elements
        pubSub.on(message, function(evt, prop_name, new_val) {
            var elements = document.querySelectorAll("[" + data_attr + "=" + prop_name + "]"),
                tag_name;

            for(var i = 0, len = elements.length; i < len; i++) {
                tag_name = elements[i].tagName.toLowerCase();

                if(tag_name === "input" || tag_name === "textarea" || tag_name === "select") {
                    elements[i].value = new_val;
                } else {
                    elements[i].innerHTML = new_val;
                }
            }
        });

        return pubSub;
    }

    function DBind(uid) {
        var binder = new DataBinder(uid),

            user = {
                // ...
                attributes: {},
                set: function(attr_name, val) {
                    this.attributes[attr_name] = val;
                    // Use the `publish` method
                    binder.publish(uid + ":input", attr_name, val, this);
                },
                get: function(attr_name) {
                    return this.attributes[attr_name];
                },

                _binder: binder
            };

        // Subscribe to the PubSub
        binder.on(uid + ":input", function(evt, attr_name, new_val, initiator) {
            if(initiator !== user) {
                user.set(attr_name, new_val);
            }
        });

        return user;
    }

    var DBind = new DBind(1);
    DBind.set("name", "黄奇");
</script>

--vue的实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <!--1. 引入js文件-->
    <script src="../node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <!--2. 视图    view-->
    <div id="app">
        <h4>数据双向绑定----vue</h4>
        <input type="text" name="" id="" v-model="message" />
        <input type="text" name="" id="" v-model="message" />
    </div>
</body>

</html>
<script type="text/javascript">
//数据模型
var dataModel = {
    message: "hello"
}

//viewModel   ----连接视图和数据模型
var app = new Vue({
    el: "#app",
    data: dataModel
})
</script>

vue 的发展史 2013.12.24 发布0.7.0 2014.1.27发布0.8.0 2014.2.25 发布0.9.0 2014.3.24发布0.10.0 2015.10.27发布1.0.0 2016.4.27发布2.0分prebiew的版本 vue的两大特点 1.响应的数据绑定/响应式编程 2.组件化 vue的优缺点优点:轻量级的框架简单易学双向数据绑定组件化视图,数据,结构分离虚拟DOM 运行速度更快缺点:支持特性前后端混合受限

MVVM模式

大致可以分为三个部分:

1. M: model,模型,在这里指的是数据模型

2. V: view,视图,在这里指的就是我们写的页面

3. VM ViewModel,是数据模型和视图连接的纽带(桥梁)

    我们要把数据模型上面的数据绑定到视图上,要通过这个纽带(桥梁)来实现
vue的兼容
兼容性提示： Vue.js 不支持 IE8 及其以下版本。

vue的基本指令,具体的用法下面会进行介绍

v-bind: 绑定数据

v-model: 绑定模型

v-on: 绑定事件

v-if v-show: 条件渲染```
 实例和选项
el         data       methods

$el        $data                $mount
vue的代理/数据
```每个vue的实例都会代理其data对象中的所有的属性

1.通过vue的实例,可以直接访问data对象中属性

2.通过vue的实例,可以设置data对象里面的内容,设置属性也会影响到原始的数据```
vue 的 $

Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的数据属性区分

了解 : $set 的使用存在一些问题,在vue2.0中作了简单修改

对于 Vue 实例，可以使用 $set(key, value) 实例方法：这样使用会报错,以下两种方式是可以使用的(存在疑问)

Vue.set(object, key, value)

this.$set(this.someObject,'b',2)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <!--在这里加入模型数据-->
            <ul>
                <li v-for='item in arr'>{{item}}</li>
            </ul>
        </div>
    </body>
</html>
<script>

    var dataModel = {
        arr : [1,2,3]
    }
    var vm= new Vue({
        el:'#app',
        data:dataModel
    })


    //读取值
    console.log(vm.arr)
    console.log(vm.$data.arr)

    //设置值----存在的问题,当数组里面的值使用下标的形式修改的时候,视图和模型数据不会动态更新
    vm.arr[0]=4;

    //使用set方法设置的值,可以动态更新到模型数据和视图上
    Vue.set(vm.arr,0,100)

    //使用vue的实例暴露出来的属性和方法进行操作
    vm.$set(vm.arr,1,200)
</script>

方法(使用methods来定义方法,使用v-on监听事件,绑定事件处理函数)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <!--在这里使用v-on来绑定事件处理的方法(函数)-->
            <button v-on:click='fn'>click</button>

        </div>
    </body>
</html>
<script>
    var dataModel = {
        message: 'hello world!'
    }
    var vm= new Vue({
        el:'#app',
        data:dataModel,
        //在这里使用methods对象来定义方法(点击事件处理函数)
        methods:{
            fn: function(){
                console.log("这个方法被调用了")
            }
        }
    })
</script>

生命周期 1.vue在创建的时候会有一系列初始化的步骤

实例需要配置数据监测(data observe),模板编译,挂载到dom,然后在变化时更新dom

实例也会调用一些生命周期钩子,为我们提供了自定义逻辑的机会

所有的生命周期钩子自动绑定this上下文到实例中,箭头函数绑定

2.生命周期钩子函数

其实指的也就是生命周期方法,只不过是挂载到执行的各个阶段,所以叫钩子函数补充: 1.activated

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

2.deactivated

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Vue入门之生命周期</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <p>{{ number }}</p>
            <input type="text" name="btnSetNumber" v-model="number">
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    number: 1
                },

                //在创建对象之前,监控数据变化和初始化事件之前调用
                beforeCreate: function() {
                    console.log('beforeCreate 钩子执行...');
                    console.log(this.number)  //数据监测还没有开始
                },
                //实例创建完成之后调用,挂载阶段还没有开始
                created: function() {
                    console.log('cteated 钩子执行...');
                    console.log(this.number)
                },
                //开始挂载的时候执行,这时html还没有渲染到页面上
                beforeMount: function() {
                    console.log('beforeMount 钩子执行...');
                    console.log(this.number)
                },
                //挂载完成,也就是模板中的heml渲染到了页面中,此时可以做一些ajax的操作,这个钩子函数只会执行一次
                mounted: function() {
                    console.log('mounted 钩子执行...');
                    console.log(this.number)
                },
                //数据更新之前调用
                beforeUpdate: function() {
                    console.log('beforeUpdate 钩子执行...');
                    console.log(this.number)
                },
                //数据更新之后调用
                updated: function() {
                    console.log('updated 钩子执行...');
                    console.log(this.number)
                },
                //数据销毁之前
                beforeDestroy: function() {
                    console.log('beforeDestroy 钩子执行...');
                    console.log(this.number)
                },
                //数据销毁之后
                destroyed: function() {
                    console.log('destroyed 钩子执行...');
                    console.log(this.number)
                },
            });

            //实现数据的更新
            //  vm.$set(dataModel, 'number', 123)

            //销毁钩子的执行
            //  vm.$destroy(true)


        </script>
    </body>

</html>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.04.16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

vue 入门

vue 入门

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐