Vue实例的简单方法

最新推荐文章于 2024-09-02 10:17:00 发布
最新推荐文章于 2024-09-02 10:17:00 发布
阅读量884 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H1069495874/article/details/55504702
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例方法</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">
    <script src="../js/Vue.js"></script>
    <script src="../js/vue-resource.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data: {
                    a: 1,
                },
            });
            vm.$el.style.background='red';
        }
    </script>
</head>
<body>
<div id="box">
    {{a}}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例方法</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">
    <script src="../js/Vue.js"></script>
    <script src="../js/vue-resource.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data: {
                    a: 1,
                },
            });
            console.log(vm.$data.a);
        }
    </script>
</head>
<body>
<div id="box">
    {{a}}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例方法</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">
    <script src="../js/Vue.js"></script>
    <script src="../js/vue-resource.js"></script>
    <script>
        window.onload = function(){
//            var vm = new Vue({
//                data:{
//                    a:1
//                }
//            });
//            vm.$mount('#box');
            var vm = new Vue({
                data:{
                    a:1
                }
            }).$mount('#box');
        }
    </script>
</head>
<body>
<div id="box">
    {{a}}
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实例方法</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">
    <script src="../js/Vue.js"></script>
    <script src="../js/vue-resource.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                aa:11,
                show:function(){
                    alert(1);
                },
                data:{
                    a:1
                }
            }).$mount('#box');
            vm.$options.show();
            console.log(vm.$options.aa);
        }
    </script>
</head>
<body>
<div id="box">
    <span v-text="a"></span>
    <br>
    {{a}}
</div>
</body>
</html>
阁下长得好生俊俏
关注
专栏目录
Vue实例的方法 methods
qq_45802159的博客
01-03 491
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
vue简单项目实例（router方式）
07-04
vue-cli搭建的vue实例，用router和组件的简单实例，下载后请cnpm install后npm run dev运行
vue的一个简单实例
qq_40844663的博客
03-21 508
<div id="root"> <!-- 插值表达式 --> <p>hello {{name}}{{age}}{{skill}}</p> <!--该容器可以用双花括号的方法，直接使用变量值--> </div> <script src="./vue.js"></script> <script> Vue.config..
vue.js项目实战案例源码
最新发布
m0_54829066的博客
09-02 2341
这些案例展示了 Vue.js 在不同项目中的应用，可以帮助你更好地理解 Vue.js 的实际开发过程和各种功能的实现方法。每个案例都可以根据具体需求进行进一步的扩展和优化。一个简单的博客系统，包括文章列表展示、文章详情查看、分类筛选、用户登录注册等功能。一个用于管理个人或团队任务的应用，包括任务创建、编辑、标记完成、分类等功能。一个简单的音乐播放器，支持播放、暂停、上一曲、下一曲、音量调节等功能。一个具有商品展示、购物车、订单管理等功能的电商购物网站。一个显示当前天气状况和未来天气预报的应用。
Vue实例的一些简单方法
01-20 3955
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="http://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="box"> {{a}} </div>
Vue实例方法
qq_41709082的博客
11-25 270
Vue实例方法-$set与 $delete 1.$set()方法： 作用：用于为对象添加新属性，也能触发DOM的更新。 使用格式： this.$set(需要添加属性的对象,属性名,属性值)； //与直接为对象新属性赋值 this.obj.属性名=value 的区别：直接为对象新属性赋值，新属性如果再被修改并不会触发DOM的更新。 这里的原理其实是因为vue实例内只有挂载前data拥有的数据才会...
Vue实例方法之事件的实现
weixin_33877885的博客
05-13 166
开始 这段时间一直在看vue的源码，源码非常多和杂，所以自己结合资料和理解理出了一个主线，然后根据主线去剥离其他的一些知识点，然后将各个知识点逐一学习。这里主要是分析的事件系统的实现。 正文 一、了解使用方式 在分析之前先了解下几个api的使用方式： vm.$on(event, callback) 参数： {string | Ar...
Vue实例简单方法介绍
08-31
主要为大家详细介绍了Vue实例的一些简单方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中的计算属性的使用和vue实例的方法示例
11-29
本文介绍了vue计算属性的使用和vue实例的方法示例，分享给大家，具体如下： 计算属性 在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且...
Vue 实例事件简单示例
10-16
对于`reduce`和`reduceonce`按钮，它们触发的是Vue实例级别的事件，而不是直接调用方法。这是通过`$emit`方法实现的，它允许我们在实例上触发自定义事件。 ```javascript app.$emit('reduce'); app.$emit('...
vue实例方法
大灰狼的小绵羊哥哥的博客
08-28 1832
一、Vue之实例属性 Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的数据属性区分 组件树 $parent：用来访问组件实例的父实例 $root: 用来访问当前组件树的根实例 $children:用来访问当前组件实例的直接子组件实例 $refs:用来访问v-ref指令的子组件 DOM访问 $el：用来挂载当前组件实例的dom元素 $els...
Vue的实例方法
qq_37953045的博客
12-20 770
Vue的实例方法 extend：用法：如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。 示例： <div id="app"></div> <div id="app1"></div> <div id="app2"></div> <script> //定一个人的类
简单的Vue实例（一）
LHQ的博客
08-18 257
&lt;script src="vue.js"&gt;&lt;/script&gt; &lt;!-- DOM模板 view 视图层--&gt; &lt;div id="demo"&gt; &lt;!-- 两个大括号 文本插值的形式 响应的数据绑定 --&gt; {{message}} &lt;/div&gt; &lt;scrip
一个最简单的Vue例子
weixin_30335575的博客
08-14 186
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vu...
vue实例中data使用return包裹的方法
12-02
在简单的vue实例中看到的Vue实例中data属性是如下方式展示的： let app= newVue({ el:"#app", data:{ msg:'' }, methods:{ } }) 在使用组件化的项目中使用的是如下形式： export default{ data(){ return...
一个 Vue 的简单实例
小松的博客
05-30 791
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml" > <head> <meta charset="UTF-8"> <META HTTP-E...
Vue简单实例
qq_44864879的博客
09-09 324
1、html文件引入Vue <!-- 复制任意一个，贴在html页面head标签中 --> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue">&lt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值