VUE实例

最新推荐文章于 2024-06-18 22:30:16 发布
最新推荐文章于 2024-06-18 22:30:16 发布
阅读量232 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42737056/article/details/83415306
版权

一,介绍简单的VUE实例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>VUE实例</title>
    <style>
        p {
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--title是鼠标悬浮出现的提示-->
        <p title="这真的是P">这是p</p>
        <p v-bind:title="title">这就是P</p>
    </div>
    <div id="main">
        <p v-bind:title="my_title">这还是P</p>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
    new Vue ({
        el: '#app',
        data: {
            title: '不,这不是P'
        }
    });
    new Vue ({
        el: '#main',
        data: {
            //在main下的my_title变量,注意不是变量名
            my_title: '你已经不是P了',
        }
    })
</script>
</html>

 下面介绍在VUE中的几种属性

二,data属性

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>VUE实例之data</title>
</head>
<body>
    <div id="app">
        <!--插值表达式-->
        {{ msg }}
        {{ num }}
        <!--插值表达式可以直接添加逻辑语句,但是不介意这样写-->
        {{ 1 + 2 + 3 * 4 }}
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
    new Vue ({
        el: '#app',
        data: {
            msg: 'hello',
            num: '356'
        }
    })
</script>
<!--下面获取VUE中赋值的数据-->
<script>
    // 获取总的app对象
    console.log(app);
    //获取VUE变量的data:$data
    console.log(app.$data);
    //获取目标变量值:  .msg
    console.log(app.$data.msg);
    //可以直接获取
    console.log(app.msg);
    console.log(app.num);
</script>
</html>

三method属性(主要是用事件的方式举例)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue实例之methods</title>
</head>
<body>
    <div class="app">
        <p class="box" v-on:click="abcClick">{{ abc }}</p>
        <p class="box" v-on:click="defClick">{{ def }}</p>
        <p class="box" v-on:mouseover="action">3456</p>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
    new Vue ({
        el: '.app',
        data: {
            abc: '真正的勇士,敢于直面惨淡的人生',
            def: '敢于正视淋漓的鲜血',
        },
        //methods为挂载点内部提供方法的实现体
        methods: {
            //冒号之前是在html中命名的事件名字
            abcClick:function (ev) {
                console.log(ev);
                console.log("abc is clicked");
            },
            //function可以省略
            defClick (ev) {
                console.log(ev);
                console.log("def is clicked");
            },
            action () {
                console.log("被悬浮");
            }
        }
    })
</script>
</html>

四,cmputed属性

一个变量依赖于多个变量变化,则采用computed属性

两种方式的区别:1,content在message使用的时候直接名字使用,不用加括号,而method在使用的时候需要加括号

2两种方式在缓存上也大有不同，利用computed计算属性是将 content与message绑定，只有当message发生变化时才会触发content，而methods方式是每次进入页面都要执行该方法，但是在利用实时信息时，比如显示当前进入页面的时间，必须用methods方式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue实例之computed</title>
</head>
<body>
    <div id="app">
        <div>
            <label for="xing">姓</label><input type="text" name="xing" v-model="first-name">
        </div>
        <div>
            <label for="ming">名</label><input type="text" name="ming" v-model="last-name">
        </div>
        <div>
            <!-- 通过插值表达式实现 -->
            <div>姓名: {{ fisrt_name + " " + last_name }} </div>
            <!-- 通过computed实现 -->
            <div>姓名: {{ full_name }} </div>
            <!-- 通过methods实现 -->
            <div>姓名: {{ full_name_bac() }} </div>
        </div>
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
    new Vue ({
        el: '#id',
        data: {
            first_name: '',
            last_name: '',
        },
        computed: {
            full_name: function() {
                return this.first_name + ' ' + this.last_name;
            }
        },
        methods: {
            full_name_bac: function() {
                return this.first_name + " " + this.last_name;
            }
        }
    })
</script>
</html>

五,watch属性

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>watch</title>
</head>
<body>
    <div id="app">
        <div>
            <label>姓名:</label>
            <input type="text" v-model="full_name">
        </div>
        <p>姓: {{ first_name }} </p>
        <p>名: {{ last_name }} </p>
    </div>
</body>
<script src="js/vue-2.5.17.js "></script>
<script>
    new Vue ({
        el: '#app',
        data: {
            full_name:'',
            first_name: '',
            last_name: '',
        },
        //监视下面的变量的变换,只要一变换就会触发下面代码体的执行
        watch: {
            full_name () {
                var fullName = this.full_name;
                console.log(fullName);
                //fullName就是输入的字符串
                this.first_name = fullName.split(" ")[0];
                this.last_name = fullName.split(" ")[1];
            }
        }
    })
</script>
</html>

六,delimiters属性

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>delimiters</title>
</head>
<body>
    <div id="app">
        {{ msg }} ${ msg }
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            msg: '天空好像下雨,我好像住你隔壁'
        },
        //把VUE解析的{{}}改成${与}
        delimiters: ['${', '}']
    })
</script>
</html>

七,生命周期钩子

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>生命周期钩子</title>
</head>
<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            msg: "message"
        },
        beforeCreate () {
            console.log("实例刚刚创建");
            console.log(this.msg);
        },
        created () {
            console.log("实例创建成功, data, methods");
            console.log(this.msg);
        }
        // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块
    })
</script>
</html>

 

初相识.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue实例
weixin_45722135的博客
07-20 684
《一》Vue.js是： Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 《二》创建一个 Vue 实例 每个Vue应用都是通过vue函数创建一个新的vue实例开始的。一个 Vue 应用由一个通过new Vue创建的根...
Vue实例简单方法介绍
08-31
在本篇文章中，我们将深入探讨Vue实例的一些简单方法，以帮助初学者更好地理解和运用Vue。 首先，创建Vue实例是通过`new Vue()`来完成的。在上述示例中，我们创建了一个名为`vm`的Vue实例，指定了`el`属性来绑定...
Vue 实例
噬蛇之牙的博客
12-01 330
你只需要明白所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象即可 (一些根实例特有的选项除外)。数据与方法当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。代码// 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 v
Vue-详解+案例
最新发布
2401_85124192的博客
06-18 398
代码如下（第一个vue应用）：el元素命中的内部建议使用id选择器 其他类 标签 选择器也可以Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。2.读取data数据对象。
vue 实例
purple_lumpy的博客
09-16 492
如下代码。 一个Vue 项目，是由很多组件组成的，组件是Vue的实例，因此可以理解为：一个Vue 项目，是由很多Vue 实例组成的。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;vue 实例&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;script
基于Vue实例对象的数据选项
08-29
"基于Vue实例对象的数据选项" Vue实例对象的数据选项是 Vue 框架中的一种重要概念，它允许开发者在创建 Vue 实例时定义数据对象，并将其绑定到实例上。数据选项是 Vue 实例的核心组成部分，它决定了实例的行为和...
Vue 实例事件简单示例
10-16
在Vue实例中，事件处理是构建交互式Web应用程序的关键部分。本示例主要关注Vue实例的事件，包括事件监听、触发和管理。 首先，Vue实例的事件系统允许我们在组件之间进行通信。在示例中，我们创建了一个名为`app`的...
vue实例demo
04-09
Vue实例是Vue应用的核心部分，它代表了Vue的根级组件。在这个“vue实例demo”中，我们将深入探讨如何使用Vue进行基本操作，包括集成vue-router进行路由管理，以及实现父子组件间的通信。 1. **Vue实例创建**： ...
vue实例001
06-28
在"vue实例001"这个简单的demo中，我们将深入理解Vue的核心概念和基本用法。 首先，Vue实例是Vue.js应用的基础。在创建Vue实例时，我们通常会通过`new Vue({})`构造函数来初始化一个Vue对象，这个对象包含了Vue应用...
vue使用实例
08-23
vue实例、vue持续更新中、vueDemo 1、vue的基础概念和构建开发环境、 2、数据渲染、事件监听和表单处理， 后续更新待续
vue项目例子
03-15
这是一个完整的项目的案例，关于一个微信公众号的，从项目的部署开始各个页面都有。
vue.js学习经典实例（本人总结）
12-08
基于vue.js开发，移动前端的例子，聊天窗口，消息列表，tab切换。
Vue.js 实例方法
weixin_33887443的博客
11-15 245
Vue 实例方法 实例属性 1、组件树访问 1-1、vm.$parent 用来访问当前组件实例的父实例，如果当前实例有的话 1-2、vm.$root 当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自已 1-3、vm.$children 类型：Array<Vue instance> 当前实例的直接子组件。需要注意 ...
Vue实例
一个无聊的程序员的琐碎
07-12 444
构造器html<div id="app8"> {{message}} </div>js//创建一个可复用的组件构建器 var MyComponent = Vue.extend({ data:function () { return { message:"ddddddd" } } }) //实例化 var myCompon
Vue实例学习
05-30
Vue实例是Vue应用的基本单位，它是Vue的核心概念之一。学习Vue实例需要掌握以下几个方面： 1. 创建Vue实例：在Vue应用中，我们需要先创建Vue实例。可以使用Vue构造函数来创建一个新的Vue实例，如下所示： ``` var vm = new Vue({ // 选项 }) ``` 在创建Vue实例时，需要传入一个选项对象。选项对象包括data、methods、computed、watch、el、template等属性，这些属性用于定义Vue实例的行为。 2. 数据绑定：Vue实例中的数据可以通过数据绑定的方式渲染到页面上。数据绑定可以使用双向数据绑定或单向数据绑定，如下所示： ``` <div>{{ message }}</div> ``` 在Vue实例中，我们可以使用data属性来定义数据，如下所示： ``` var vm = new Vue({ data: { message: 'Hello Vue!' } }) ``` 在模板中，可以使用 {{ }} 或 v-bind 指令将数据绑定到DOM元素中。 3. 实例方法和生命周期钩子：Vue实例提供了一些实例方法和生命周期钩子函数，用于处理Vue实例的行为。常用的实例方法包括 $watch、$set、$delete、$emit等，常用的生命周期钩子函数包括 created、mounted、updated、destroyed等。 4. 计算属性和侦听器：Vue提供了计算属性和侦听器来处理数据的变化。计算属性是基于已有数据计算出新数据的方式，而侦听器则可以监听数据的变化并执行相应的操作。如下所示： ``` var vm = new Vue({ data: { firstName: 'John', lastName: 'Doe' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }, watch: { firstName: function (val) { console.log('First name changed to: ' + val) } } }) ``` 在上述代码中，computed属性用于定义计算属性，watch属性用于定义侦听器。 5. 实例销毁：在Vue应用中，需要注意实例的销毁。当Vue实例不再需要时，需要手动调用 $destroy 方法来销毁实例，以便释放内存等资源。如下所示： ``` vm.$destroy() ``` 掌握了以上Vue实例的基本知识，您就可以开始创建Vue应用了。同时，建议您多阅读Vue官方文档和社区博客，以便更好地理解Vue实例的用法和使用方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值