zoukankan      html  css  js  c++  java
  • Vue2学习笔记:实例

    1.实例

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <script type="text/javascript">
            window.onload = function(){
                vm = new Vue({
                    el:'#box',
                    data:{
                        msg:'Hello Vue!'
                    }
                });
            }
        </script>
    </head>
    <body>
        <div id="box">
            {{msg}}
        </div>
    </body>
    </html>

    实例化传入了一个对象{el:'#box',data:{msg:'Hello Vue!'}},每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例。

    实例化后 vm 是什么:上面代码我们new处理一个Vue的实例,并赋值给了全局vm变量

    2.实例负值和得到值相关

    vm.$el.style.background = 'red';  //让$el的样式背景变得红色

    console.log(vm.$data);    //{msg:'Hello Vue!'}

    console.log(vm.$data.msg); //'Hello Vue!'

    3.实例挂载和自定义属性相关

    var vm = new Vue({
        data:{
            a:1,
        },
    });
    
    //之后挂载
    vm.$mount('#box');
    
    或
    
    var vm = new Vue({
        data:{
            a:1,
        },
    }).$mount('#box');
    
    还有一种关于自定义属性
    
    var vm = new Vue({
        aa:11,   //自定义属性
        data:{
            a:1,
        },
    }).$mount('#box');
    
    console.log(vm.$options.aa); //11 可以通vm.$options  来获得
  • 相关阅读:
    linux umask使用详解
    Linux 解压压缩命令
    linux命令:tail 命令
    linux命令:head 命令
    linux下cat命令详解
    linux命令:rm 命令
    linux命令:mv命令
    Linux 的cp命令
    文件权限详解
    Linux ls命令参数详解
  • 原文地址:https://www.cnblogs.com/zycbloger/p/6418390.html
Copyright © 2011-2022 走看看