第二篇:Vue实例成员

Vue实例

1、el:实例

new Vue({
    el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容

2、data:数据

<div id='app'>
    {{ msg }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: '数据',
        }
    })
    console.log(app.$data.msg);
    console.log(app.msg);
</script>
<!-- data为插件表达式中的变量提供数据 -->
<!-- data中的数据可以通过Vue实例直接或间接访问-->

3、methods:方法

<style>
    .box { background-color: orange }
</style>
<div id='app'>
    <p class="box" v-on:click="pClick">测试</p>
    <p class="box" v-on:mouseover="pOver">测试</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        methods: {
            pClick () {
                // 点击测试
            },
            pOver () {
                // 悬浮测试
            }
        }
    })
</script>
<!-- 了解v-on:为事件绑定的指令 -->
<!-- methods为事件提供实现体-->

4、computed:计算

计算属性:定义方法属性,方法返回值是属性,不需要在其他地方重复定义,会监听方法中出现的所有变量。

1) 其实就是vue中的方法属性,方法名可以作为属性来使用,属性值为方法的返回值

2)在computed中声明的方法属性,不能在data中重复声明,比data中声明的属性要多出写逻辑的地方

3)方法属性,自带监听机制,在方法属性中出现的变量,都会被监听,一旦有任何被监听的变量值发生更新,方法属性都会被调用更新方法属性的值。

4)方法属性一定要在页面中渲染一次,方法属性采用意义,多次渲染,方法属性只会被调用一次

方法属性的应用场景:一个变量依赖于多个变量,且需要进行一定的逻辑运算

<div id="app">
    <input type="text" v-model="a">
    <input type="text" v-model="b">
    <div>
        {{ c }}
    </div>
</div>

<script>
    // 一个变量依赖于多个变量
    new Vue({
        el: "#app",
        data: {
            a: "",
            b: "",
        },
        computed: {
            c: function() {
                // this代表该vue实例
                return this.a + this.b;
            }
        }
    })
</script>

计算器案例:

<div id="app">
    <!-- type="number"表示只能写数字 -->
    <input type="number" v-model="num1" max="100" min="0">
    +
    <input type="number" v-model="num2" max="100" min="0">
    =
    <button>{{ sum }}</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            // sum: '',  // 重复声明
            num1: '',
            num2: '',
        },
        computed: {
            sum () {
                // num1和num2都在该方法属性中,所以有一个更新值,该方法都会被调用
                if (this.num1 && this.num2) {
                    return +this.num1 + +this.num2;  // +this.num1是将字符串快速转换澄数字
                }
                return '结果';
            }
        }
    })
</script>

5、watch:监听

监听:监听任何一个与方法同名的变量,监听变量值更新监听方法就会被回调。

1)watch中不定义属性,只是监听属性,所以方法的返回值没有任何意义,只是监听变量值是否发生更新

2)watch中的方法名,就是被监听的属性(方法名同被监听属性名)

3)被监听的变量值一旦发生更新,监听方法就会被调用

应用场景:

应用:一个变量通过逻辑影响着其他变量或是业务(图形)

i)k线图:股票数据变化,页面的k线图重新渲染(需要逻辑将数据转换为图形)

ii)拆分姓名:录入姓名,拆分为姓和名(需要逻辑将一个数据拆分为多个数据)

<div id="app">
    <input type="text" v-model="ab">
    <div>
        {{ a }}
        {{ b }}
    </div>
</div>

<script>
    // 多个变量依赖于一个变量
    new Vue({
        el: "#app",
        data: {
            ab: "",
            a: "",
            b: "",
        },
        watch: {
            ab: function() {
                // 逻辑根据需求而定
                this.a = this.ab[0];
                this.b = this.ab[1];
            }
        }
    })
</script>

6、delimiters:分隔符

用于改变插值表达式的符号

<div id='app'>
    ${ msg }
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        delimiters: ['${', '}']
    })
</script>

原文地址:https://www.cnblogs.com/cnhyk/p/12306288.html

时间: 2024-10-05 22:47:16

第二篇:Vue实例成员的相关文章

Vue—实例成员computed和watch

Computed 一个变量依赖于多个变量 现在需要full_name这个变量以来于first_name和last_name这两个变量需要用到computed 好处: 1.相当于在computed中定义的变量值等于绑定的函数的的返回值,该变量无需再data中声明 2.在computed绑定的函数中所有的变量都会进行监听,只要写在里面就会被监听 <div id="app"> <p> 姓:<input type="text" v-model=

Vue框架简介,实例成员,事件,过滤器,文本、事件和属性指令

目录 Vue框架简介,实例成员,事件,过滤器,文本.事件和属性指令 什么是Vue 为什么要学Vue 如何使用Vue Vue实例成员 1.el: 实例 2.data: 数据 3.methods: 方法 Vue事件 面向对象js Vue过滤器 Vue指令 文本指令 事件指令 属性指令 Vue框架简介,实例成员,事件,过滤器,文本.事件和属性指令 什么是Vue vue框架:渐进式JavaScript框架 ? vue一个环境:可以只控制页面中一个标签,可以控制一组标签,可以控制整个页面,可以控制整个项目

五十三、初识vue,实例成员语法,指令,

vue 1.什么是vue? 可以独立完成前后端分离式web项目的JavaScript框架 2.为什么要学习vue? 三大主流框架:Angular(脸书).React(git公司).vue(中国人第三方) 先进的前端设计模式:MVVM 可以完全脱离服务器,以前端代码复用渲染整个页面:组件化开发 vue框架 vue是前端框架:Angular(脸书).React(git公司).vue(中国人第三方) vue:结合其他框架优点,轻量级,中文API,数据驱动,双向绑定,MVVM设计模式.组件化开发.单页面

vue框架:框架简介,基础实例成员,基础指令,js对象方法补充

1.指令 2.实例成员 3.组件 4.项目开发 1)定义:JavaScript渐进式框架 ? 渐进式:可以控制一个页面的一个标签,也可以控制一系列的标签,也可以控制整个页面,甚至可以控制整个前台项目 2)优势: ? 有指令(分支结构,循环结构...) 复用页面结构等 ? 有实例成员(过滤器,监听), 可以对渲染的数据进行二次格式化 ? 有组件(模板的复用或组合),快速搭建页面 ? ? 虚拟dom:所有文件加载到内存中 ? 数据的双向绑定 ? 单页面应用 ? 数据驱动 3)为什么学习vue: ?

实例成员:计算属性 监听属性以及vue的项目开发

6)字符串补充 双引号: "前缀" + 变量 + "后缀" 单引号: '前缀' + 变量 + '后缀' 反引号: `前缀$(变量)后缀` ps:在反引号中可以用$()来包裹变量,实现字符串的拼接 7)实例成员:计算属性 监听属性 计算属性: ? 1)计算属性其实就是vue中的方法属性,方法名可以作为属性来使用,属性值就是方法的返回值 ? 2) 在computed中声明的方法属性,不能在data中重复声明,比data中声明的属性要多出些逻辑的的地方 ? 3)方法属性自

Cocos2d-x3.0游戏实例之《别救我》第二篇——创建物理世界

这篇我要给大家介绍两个知识点: 1. 创建游戏物理世界 2. 没了(小若:我噗) 害怕了?不用担心,这太简单了~! 笨木头花心贡献,啥?花心?不呢,是用心~ 转载请注明,原文地址:http://www.benmutou.com/blog/archives/804 文章来源:笨木头与游戏开发 3.0新亮点,史上最简单的物理引擎 在Cocos2d-x3.0里使用物理引擎,会很有快感,因为很多繁琐的东西它都帮我们封装好了. 那么,我要开始创建游戏的关卡场景了,大家跟紧了. 我们给关卡场景命名为Toll

vue学习指南:第二篇(详细Vue基础) - Vue的指令

一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. 绑定数据 2. dom检测 3. vue 实例 靠 new 关键字实例化 vue 对象,使用 mvvm 模型 1. M modal 数据 2. v view 视图 3. vm 全称viewmodal 就是一个vue实例 4. Vue.js 是封装的一个类,参数是个 options 对象 最常用的属性

Vue入门教程 第二篇 (数据绑定与响应式)

数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: 1 <div id="app"> 2 {{ message }} 3 </div> 1 var app = new Vue({ 2 el: '#app', 3 data: { 4 message: 'Hello Vue!' 5 } 6 }) 执行结果:Hello Vue! 除了上面的绑定方式,还有另外一种: 1 <div id="app"

第二篇 SQL Server代理作业步骤和子系统

本篇文章是SQL Server代理系列的第二篇,详细内容请参考原文. SQL Server代理作业由一系列的一个或多个作业步骤组成.一个作业步骤分配给一个特定的作业子系统(确定作业步骤去完成的工作).每个作业步骤运行于一个单独的安全上下文,尽管每个作业有一个所有者来决定谁可以修改作业.本篇主要关注组成SQL Server代理的作业步骤和子系统.快速回顾作业理解SQL Server代理作业的最佳方式是把相关联的 需要完成给定任务 的组件放在一个容器中.作业最主要的组件有作业步骤.计划.警告和通知.