<!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. JS自定义全局Error

    <script> ///自定义错误 onerror=handleErr; function handleErr(msg,url,l) { var txt=""; txt ...

  2. c++PrimerChap7类

    仅仅记录贴,按书上的做完了一边,想把private分离出来已经很难了.因为is用到的成员变量都是直接当做public使用的,如果要改的话可以考虑存储输入,让后用构造函数对类进行初始化. #includ ...

  3. Linux系统之间文件传输 scp 命令

    个人使用记录 scp /home/liwm/Downloads/mysql-5.5.32-linux2.6-x86_64.tar.gz root@192.168.122.3:/home/oldboy/ ...

  4. 使用systemctl自定义系统服务

    1.创建系统服务文件,格式如下: [Unit] Description=httpd After=network.target [Service] Type=forking ExecStart=/usr ...

  5. Go语言的前景分析

    本文为原创文章,转载注明出处,asdfasdfasdf 欢迎扫码关注公众号flysnow_org或者网站http://www.flysnow.org/,第一时间看后续精彩文章.觉得好的话,顺手分享到朋 ...

  6. APK反编译去广告大揭秘

    APK反编译去广告 具体步骤: 1.下载 apktool 下载地址:https://code.google.com/p/android-apktool/downloads/list 2.通过apkto ...

  7. nyoj33 蛇形填数

    蛇形填数 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描写叙述 在n*n方陈里填入1,2,...,n*n,要求填成蛇形.比如n=4时方陈为: 10 11 12 1 9 16 ...

  8. UVALIVE 4287 Proving Equivalences （强连通分量+缩点）

    题意:给定一个图,问至少加入多少条边能够使这个图强连通. 思路:首先求出这个图的强连通分量.然后把每个强连通分量缩成一个点.那么这个图变成了一个DAG,求出全部点的入度和出度,由于强连通图中每个节点的 ...

  9. cocos2d_x_01_环境搭建

    终于效果图: Cocos2d-x-3.3 Mac 安装 下载地址: 參考文档:  在线API列表:  Cocos2d-x-3.3 版本号 从配置安装到创建项目都是命令行 官网下载最新版本号Cocos2 ...

  10. bzoj1934: [Shoi2007]Vote 善意的投票(显然最小割)

    1934: [Shoi2007]Vote 善意的投票 题目:传送门 题解: 明显的不能再明显的最小割... st连同意的,不同意的连ed 朋友之间两两连边(即双向边) 流量都为1... 为啥: 一个人 ...