<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

    </style>

    <script src="vue.js"></script>

    <script>

    </script>

</head>

<body>

    <div id="box">

        {{a}}

    </div>

    <script>

        var vm=new Vue({

            el:'#box',

            data:{

                a:1

            }

        });

        console.log(vm.$el);//div元素

        vm.$el.style.background='red';//元素变红

        console.log(vm.$data.a);

    </script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

    </style>

    <script src="vue.js"></script>

    <script>

    </script>

</head>

<body>

    <div id="box">

        {{a}}

    </div>

    <script>

        var vm=new Vue({

            el:'#box',

            data:{

                a:1

            }

        });

        console.log(vm.$data.a);

    </script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

    </style>

    <script src="vue.js"></script>

    <script>

    </script>

</head>

<body>

    <div id="box">

        <span v-text="a"></span>

    </div>

    <script>

        //angular.bootstrap

        var vm=new Vue({

            data:{

                a:1

            }

        });

        vm.$mount('#box'); //手动挂载

        var vm=new Vue({

            data:{

                a:1

            }

        }).$mount('#box');

    </script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

    </style>

    <script src="vue.js"></script>

    <script>

    </script>

</head>

<body>

    <div id="box">

        <span v-text="a"></span>

        <br>

        {{aa}}

    </div>

    <script>

        var vm=new Vue({

            aa:11, //自定义属性,

            show:function(){//自定义方法，不再methods里面，

                alert(1);

            },

            data:{

                a:1

            }

        }).$mount('#box');

        vm.$options.show();//自定义方法

        console.log(vm.$options.aa);//自定义属性,

    </script>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

    </style>

    <script src="vue.js"></script>

    <script>

    </script>

</head>

<body>

    <div id="box">

        <span v-text="a"></span>

    </div>

    <script>

        var vm=new Vue({

            data:{

                a:1,

                b:2

            }

        }).$mount('#box');

        console.log(vm.$log());//{a:1,b:2}打印data

    </script>

</body>

</html>

vue11 vue实例方法的更多相关文章

  1. vue.js基础知识篇(5):过渡、Method和Vue实例方法

    第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...

  2. vue——实例方法 / 数据

    目录 1.vm.$set 2.vm.$watch 3.vm.$delete 1.vm.$set 哎呀呀,周五啦,大家应该都很开心吧,放假了可以好好休息休息啦,然而小颖明天要面试,所以小颖今天就回去放了 ...

  3. VUE实例方法添加、COOKIE、Token

    创建COOKIE const COOKIE = { KEY_TOKEN: 'access_token', KEY_USER: 'nbuser', KEY_PERMISSION: 'nb-permiss ...

  4. Vue实例方法之事件的实现

    开始 这段时间一直在看vue的源码,源码非常多和杂,所以自己结合资料和理解理出了一个主线,然后根据主线去剥离其他的一些知识点,然后将各个知识点逐一学习.这里主要是分析的Vue事件处理的实现. 正文 一 ...

  5. Vue.JS快速上手（指令和实例方法）

    1.声明式渲染 首先,我们要知道Vue是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...

  6. vue 快速入门 系列 —— 实例方法（或 property）和静态方法

    其他章节请看: vue 快速入门 系列 实例方法(或 property)和静态方法 在 Vue(自身) 项目结构 一文中,我们研究了 vue 项目自身构建过程,也知晓了 import Vue from ...

  7. vue.js 学习笔记

    /*属性*/ 标签内的属性都用 :attr="xxx" 的形式 /*模板*/ {{ msg }} -> 绑定数据 {{ *msg }} -> 数据只绑定一次 {{{ m ...

  8. Vue.2.0.5-插件

    开发插件 插件通常会为Vue添加全局功能.插件的范围没有限制--一般有下面几种: 添加全局方法或者属性,如: vue-element 添加全局资源:指令/过滤器/过渡等,如 vue-touch 通过全 ...

  9. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

随机推荐

  1. python一些被我忽略的知识

    最后一个不小心打错了,刚看到,try ...else 与 while/for else的相同

  2. yii框架原生代码

    http://www.cnblogs.com/duanxz/p/3480254.htm

  3. 洛谷 P1373 小a和uim之大逃离 （差值型dp总结）

    这道题和多米诺骨牌那道题很像 ,都是涉及到差值的问题. 这道题是二维的,同时要取模. 这种题,因为当前的决策有后效性,会影响到差值,所以直接把 差值作为维度,然后计算答案的时候把差值为0的加起来就行了 ...

  4. 紫书 习题 8-24 UVa 10366 （构造法）

    又是一道非常复杂的构造法-- #include<cstdio> #include<algorithm> #define REP(i, a, b) for(int i = (a) ...

  5. C# AE 符号选择器

    using ESRI.ArcGIS.Display; using ESRI.ArcGIS.DisplayUI private esriTOCControlItem toccItem = esriTOC ...

  6. hadoop-02-关闭防火墙

    hadoop-02-关闭防火墙 su root service iptables status #查看状态 即时关闭: service iptables stop #关闭 重启之后关闭: chkcon ...

  7. hdu2236

    链接:点击打开链接 题意:在一个n*n的矩阵中,找n个数使得这n个数都在不同的行和列里而且要求这n个数中的最大值和最小值的差值最小 代码: #include <iostream> #inc ...

  8. legend---八、php对象如何转换成js对象

    legend---八.php对象如何转换成js对象 一.总结 一句话总结:a.直接转换:b.通过json对象做中间桥梁 1.为什么传递给父亲构造函数的参数不能写默认值? 这里的第三行的比如$type不 ...

  9. Vim 删除不包含指定字符串的行及统计匹配个数

    Vim 删除不包含指定字符串的行及统计匹配个数 转载▼     Help :g/pattern/d 是找到pattern, 删之 :v/pattern/d 是找到非pattern, 删之 :%s/xx ...

  10. POJ 1141 括号匹配 DP

    黑书原题 区间DP,递归输出 不看Discuss毁一生 (woc还真有空串的情况啊) //By SiriusRen #include <cstdio> #include <cstri ...