Vue 实例

news/2024/6/22 12:03:01

一、页面效果图

在这里插入图片描述

二、代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="../vue.js" type="text/javascript"></script><title>vue 实例</title></head><body><div id="vm1">{{message}} --- {{a}}</div><div id="freeze"><p>{{foo}}</p><!-- 这里的 `foo` 不会更新! --><button v-on:click="foo = barz">Change it </button></div><script>//数据对象var data = {message: 'vue 实例',a: 1}//每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的://该对象被加入到一个Vue实例var vm1 = new Vue({el: '#vm1',data: data})// 获得这个实例上的 property// 返回源数据中对应的字段vm1.a == data.a // true// 设置 property 也会影响到原始数据vm1.a = 2data.a // = 2//反之亦然data.a = 3vm1.a // = 3// Object.freeze(),这会阻止修改现有的 property,也意味着响应系统无法再追踪变化var obj = {foo: 'bar'}Object.freeze(obj)var freeze = new Vue({el: '#freeze',data: obj})//Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $,以便与用户定义的 property 区分开来。例如:vm1.$data == datavm1.$el === document.getElementById('vm1') // trueconsole.log(vm1.$el === document.getElementById('vm1')) // truevar watchFuntion = function(newValue, oldValue) {// console.log('newValue = ' + newValue + '  oldValue = ' + oldValue)console.log('newValue = ', newValue, '  oldValue = ', oldValue)}// $watch 是一个实例方法,在变量改变前声明// 这个回调将在 `vm.a` 改变后调用vm1.$watch('a', watchFuntion)vm1.a = 4</script></body>
</html>

三、LearnVue 源码

点击查看LearnVue 源码

四、推荐阅读

Vue教程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.cpky.cn/p/12165.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

WebGL学习(一)渲染关系

学习webgl 开发理解渲染关系是必须的&#xff0c;也非常重要&#xff0c;很多人忽视了这个过程。 我这里先简单写一下&#xff0c;后面尽量用通俗易懂的方式&#xff0c;举例讲解。 WebGL&#xff0c;全称Web Graphics Library&#xff0c;是一种在网页上渲染3D图形的技术。它…

【AI绘画Stable Diffusion】单人LoRA模型训练,打造你的专属模型,新手入门宝典请收藏!

大家好&#xff0c;我是灵魂画师向阳 本期我将教大家如何进行LoRA模型训练&#xff0c;打造你的专属模型&#xff0c;内容比较干&#xff0c;还请耐心看完&#xff01; 随着AIGC的发展&#xff0c;许多传统工作岗位正逐渐被AI取代。同时&#xff0c;AI变革也在创造前所未有的…

JDBC使用步骤-小白入门

一.JDBC开发流程 加载并注册JDBC驱动创建数据库连接创建Statement对象遍历查询结果关闭连接,释放资源 import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement;public class StandardJDBCSample {public static …

vue3学习(三)

前言 继续接上一篇笔记&#xff0c;继续学习的vue的组件化知识&#xff0c;可能需要分2个小节记录。前端大佬请忽略&#xff0c;也可以留下大家的鼓励&#xff0c;感恩&#xff01; 一、理解组件化 二、组件化知识 1、先上知识点&#xff1a; 2、示例代码 App.vue (主页面) …

Hudi 多表摄取工具 HoodieMultiTableStreamer 配置方法与示例

博主历时三年精心创作的《大数据平台架构与原型实现:数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行,点击《重磅推荐:建大数据平台太难了!给我发个工程原型吧!》了解图书详情,京东购书链接:https://item.jd.com/12677623.html,扫描左侧二维…

服务器感染了. rmallox勒索病毒,如何确保数据文件完整恢复?

导言&#xff1a; 近年来&#xff0c;随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显。其中&#xff0c;勒索病毒作为一种严重的网络威胁&#xff0c;对个人和企业数据造成了巨大的威胁。本文将重点介绍.rmallox勒索病毒的特点、传播途径以及应对策略&#xff0c;旨…