<!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. grant 命令

    创建拥有所有权限账户.可以远程连接.并且允许用户再将该权限授予其它用户: grant all privileges on *.* to root @"%" identified b ...

  2. 正则表达式中的/i

    i = insensitive means case-insensitive 表示大小写不敏感

  3. luogu P4430 小猴打架(prufer编码与Cayley定理）

    题意 n个点问有多少种有顺序的连接方法把这些点连成一棵树. (n<=106) 题解 了解有关prufer编码与Cayley定理的知识. 可知带标号的无根树有nn-2种.然后n-1条边有(n-1) ...

  4. 【转载】python学习之 字符串前'r'的用法

    文章转载:https://www.cnblogs.com/cyiner/archive/2011/09/18/2180729.html 在打开文件的时候open(r'c:\....') 加r和不加'' ...

  5. SQL的四种语言：DDL、DML、DCL、TCL

    1. DDL(Data Definition Language) 数据库定义语言statements are used to define the database structure or sche ...

  6. jsp urlrewrite 中正則表達式不包括某个字符串写法

    因在程序中须要做城市间跳转,可是页面中包括的css.scripts和图片等路径是要排除在外的. 这就须要在正则中指定当遇到哪些 字符时须要略过. 正则例如以下: /((? !css)(?!script ...

  7. Maven配置Spring+SpringMVC+MyBatis(3.2.2)Pom 以及 IntelliJ IDEA 怎样打开依赖视图

    Maven配置Spring+SpringMVC+MyBatis(3.2.2)Pom 配置原则: 利用依赖,将所需的jar包加载到project中. 先依赖主要jar包 Spring + Spring ...

  8. 动态语言切换(续)-designer中的retranslateUi（带源码）

    本站所有文章由本站和原作者保留一切权力,仅在保留本版权信息.原文链接.原文作者的情况下允许转载,转载请勿删改原文内容, 并不得用于商业用途. 谢谢合作.原文链接:动态语言切换(续)-designer中 ...

  9. Android SQLite 简单使用演示样例

    SQLite简单介绍 Google为Andriod的较大的数据处理提供了SQLite,他在数据存储.管理.维护等各方面都相当出色,功能也很的强大. 袖珍型的SQLite能够支持高达2TB大小的数据库, ...

  10. c++几种排序算法代码

    #include <iostream> #include <vector> using namespace std; //交换int void swap(int& a, ...