<!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. mysql同步复制报Slave can not handle replication events with the checksum that master 错误

    slave服务器,查看状态时,发现下面的错误: Last_IO_Error: Got fatal error 1236 from master when reading data from binar ...

  2. Linux修改Linux默认打开方式

    从总体上讲 /etc/gnome/defaults.list 保存了全局的打开方式 /.local/share/applications/mimeapps.list 保存了个人的打开方式当两着不一致是 ...

  3. 洛谷—— P2983 [USACO10FEB]购买巧克力Chocolate Buying

    https://www.luogu.org/problem/show?pid=2983 题目描述 Bessie and the herd love chocolate so Farmer John i ...

  4. 洛谷—— P2663 越越的组队

    https://www.luogu.org/problem/show?pid=2663 题目描述 班级要组织一场综合能力竞赛,全班同学(N个,N是偶数)分成两队互相竞争.老师找到了越越并给了越越一张全 ...

  5. nginx php No input file specified 怎样处理？

    配置nginx支持php 出现了No input file specified ? 仅仅要改动下安装文件夹下的  nginx.conf下的 location ~ \.php$ {           ...

  6. 对于startActivity的使用改进

    传统方式 一直以来,使用startActivity的方式就是例如以下: 比方从AActivity跳转到BActivity.那么我们是在AActivity中这样去写: Intent intent = n ...

  7. 怎样解除内容审查程序的password

    如题:怎样解除内容审查程序的password 在不知道password的情况下.通过改动注冊表解决.点击"開始"→"执行",输入"regedit&qu ...

  8. Fragment使用的正确姿势

     网上关于Fragment的使用建议和分析非常多,可是依旧会有非常多人在使用Fragment的时候出现各种奇葩错误 这篇文章我分享一下各种项目中解决Fragment的各种注意事项(不做原理分析), ...

  9. AI目前的根本问题——缺乏 自由意志，无法分辨真正的善恶

    另一位对AI表现出极大兴趣的演讲嘉宾,就是短篇科幻小说<折叠北京>的作者:郝景芳. 演讲一开始她就提到了测试AI的三个问题: 第一个测试题,如果哥伦布没有发现新大陆对中国哪个菜系影响最大? ...

  10. LeetCode SQL

    SQL查询练习一(From LeetCode) 1 select name,population,area 2 from World 3 where area > 3000000 or popu ...