Vue实例

news/2024/11/28 19:25:41/

1. 自定义元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.self {color: red;  }</style>
</head>
<body><selfElement class="self">这是自定义元素</selfElement><!-- 上面代码中，<selfElement>就是非标准元素，浏览器不认识它; 这段代码的运行结果是，浏览器照常显示 "这是自定义元素"，这说明浏览器并没有过滤这个元素; 这说明，```浏览器对待自定义元素，就像对待标准元素一样```，只是没有默认的样式和行为; 这种处理方式是写入 HTML5 标准的; 上面这段话的意思是，```浏览器必须将自定义元素保留在 DOM 之中，但不会任何语义; 除此之外，自定义元素与标准元素都一致```; 事实上，浏览器提供了一个```HTMLUnknownElement对象，所有自定义元素都是该对象的实例```; -->
</body>
</html>

在这里插入图片描述

2. 初始Vue

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 插值表达式 {{ ... }}: a. 将数据填充到HTML标签之中;b. 插值表达式支持基本的计算操作; 2. 运行过程： vue代码 -> vue框架 -> 原生js代码; -->
</head><body><div id="app"><div>{{msg}}</div><div>{{1 + 3}}</div><div>{{'i' + ' love' + ' you'}}</div></div><script src="../vue.js" type="text/javascript"></script><script type="text/javascript">var vm = new Vue({                  /* el 和 data固定名字 */el: '#app',                     /* 元素挂载位置：值可以是css选择器或者DOM元素 */data: {                         /* 模型数据（值是一个对象） */ msg: 'Hello World,Vue!'    }})</script>
</body></html>

在这里插入图片描述

3. Vue实例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../vue.js"></script><script>/*1. 一个 Vue应用由一个通过 ```new Vue```创建的根Vue实例，以及可选的嵌套的、可复用的组件树组成; 2. 数据与方法：当一个 Vue 实例被创建时，它将 data对象 中的所有的 property 加入到 Vue 的响应式系统中; 当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值; 当这些数据改变时，视图会进行重渲染; 值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的; 也就是说如果你添加一个新的 property，比如： vm.b = 'hi', 那么对 b 的改动将不会触发任何视图的更新; 如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值; 比如：data: {newTodoText: '',visitCount: 0,hideCompletedTodos: false,todos: [],error: null}3. 这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化; 4.      Vue实例的实行与方法：它们都有前缀 $，以便与用户定义的 property 区分开来; $data:  获取Vue实例观察的数据对象;$el:    获取Vue实例使用的根 DOM 元素;$watch: 观察 Vue 实例上的一个表达式或者一个函数计算结果的变化;当监听的表达式的值发生变化时候，将自出发callback函数; vm.$watch( expOrFn, callback, [options] )*/</script>
</head><body><div id="app">{{ obj }}</div><script>var obj = {name: 'Zhang',age: 10};// 将失去响应式系统跟踪Object.freeze(obj);       var vm = new Vue({el: '#app',data: {obj: obj,message: 'HelloWorld',num: 123}});// Vue的一些实例方法：console.log(vm.$el === document.getElementById('app'));     //trueconsole.log(vm.$data);vm.$watch('num',function(newValue,oldValue) {alert('监听到了'+ '新值：' + newValue + '     旧值：' + oldValue);})</script>
</body></html>

4. Vue基础

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../vue.js"></script><script>/*可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id; 它是div的id;这意味着我们接下来的改动全部在以上指定的 div内，div外部不受影响;{{ }} 用于输出对象属性和函数返回值; <a v-bind:[attributeName]="url"> ... </a>       // 新式属性绑定写法*//*Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统; 现在数据和 DOM 已经被建立了关联，所有东西都是响应式的(控制台修改app.message的值，视图将自动发生数据更新);此时我们不再和HTML元素直接进行交互了，一个Vue应用会将其挂载到一个DOM元素上; 然后对其进行完全控制;指令，以前缀v开始：它们会在渲染的 DOM 上应用特殊的响应式行为（打开控制台，更给app.message1的值，视图将自动更新数据）; v-bind:title “将这个元素节点的 title属性 和 Vue 实例的 message1 属性 保持一致”; */</script>
</head>
<body><div id="app">{{ message }}   <br>        {{ data }}      <br>{{ test()  }}   <br>      <hr><span v-bind:title = "message1"> {{ message1 }} </span> <br><span v-bind:[URL]="url"> {{url}} </span><br>   <div v-if="isSeen">现在你看到我了</div><!-- 同样是响应式的，在控制台中输入app.todos.push({name:'LI',age:234})，视图将自动更新显示数据 --><ul><li v-for="item in todos"> {{ item.name + item.age }} </li></ul>         </div><hr><hr><div id="app1"><p>{{ message }}</p><input v-model="message"></div><script>var app = new Vue({el: '#app',     data: {message: 'HelloWorld',data: 'beijing',message1: '页面加载于' + new Date().toLocaleString(),isSeen: true,todos: [{name: 'Zhang', age: 10},{name: 'WAng', age: 25},{name: 'Li', age: 32},],url: "我是url"},methods: {test() {return '通过{{}}调用函数';}}}); /*Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定; v-model 主要作用于表单元素: 当表单内容发生变化时候, message数据自动同步更新; */var app1 = new Vue({el: "#app1",data: {message: 'Hello Vue',}  }); </script>
</body>
</html>

在这里插入图片描述


http://www.ppmy.cn/news/105067.html

相关文章

基于FPGA：运动目标检测（包围盒仿真工程，及一些调试问题）

基于FPGA：运动目标检测（包围盒仿真工程，及一些调试问题）

目录 前言一、安装器件库二、仿真工程操作1、进入文件列表2、找到bounding_box_locate.vt&#xff0c;双击打开文件3、修改路径4、路径设置5、切换回“Hierarchy”&#xff0c;即工程界面6、运行仿真7、查看波形 重点&#xff1a;调试问题三、仿真代码1、仿真顶层文件2、绘制包…
阅读更多...
什么是Redis

什么是Redis

概述 什么是Redis Redis(Remote Dictionary Server) 是一个使用 C 语言编写的&#xff0c;开源的&#xff08;BSD许可&#xff09;高性能非关系型&#xff08;NoSQL&#xff09;的键值对数据库。 Redis 可以存储键和五种不同类型的值之间的映射。键的类型只能为字符串&#xff…
阅读更多...
Linux输入输出重定向

Linux输入输出重定向

目录 Linux输入输出重定向 Linux中的默认设备 输入输出重定向定义 输入输出重定向操作符 实用形式 标准输入、标准输出、标准错误 输出重定向案例 案例1 --- 输出重定向&#xff08;覆盖&#xff09; 案例2 --- 输出重定向&#xff08;追加&#xff09; 案例3 --- 错误…
阅读更多...
ifconfig工具与驱动交互解析(ioctl)

ifconfig工具与驱动交互解析(ioctl)

Linux ifconfig&#xff08;network interfaces configuring&#xff09; Linux ifconfig命令用于显示或设置网络设备。ifconfig可设置网络设备的状态&#xff0c;或是显示目前的设置。同netstat一样&#xff0c;ifconfig源码也位于net-tools中。源码位于net-tools工具包中&am…
阅读更多...
《消息队列高手课》课程笔记（七）

《消息队列高手课》课程笔记（七）

如何使用异步设计提升系统性能&#xff1f; 异步设计如何提升系统性能&#xff1f; 假设我们要实现一个转账的微服务 Transfer(accountFrom, accountTo, amount)&#xff0c;这个服务有三个参数&#xff1a;分别是转出账户、转入账户和转账金额。 这个例子的实现过程中&…
阅读更多...
Vue登录界面精美模板分享

Vue登录界面精美模板分享

文章目录 &#x1f412;个人主页&#x1f3c5;Vue项目常用组件模板仓库&#x1f4d6;前言&#xff1a;&#x1f380;源码如下&#xff1a; &#x1f412;个人主页 &#x1f3c5;Vue项目常用组件模板仓库 &#x1f4d6;前言&#xff1a; 本篇博客主要提供vue组件之登陆组件源码…
阅读更多...
S7-1200 和 CP342-5 PROFIBUS DP主从通信例程

S7-1200 和 CP342-5 PROFIBUS DP主从通信例程

S7-1200 与 CP342-5 之间 PROFIBUS DP主从通信的几种可能情况分别提供了例程&#xff1a; 1. 同一项目中S7-1200 与 S7-300 CP342-5 之间 DP 主从通信&#xff0c;S7-1200 通过CM1243-5作为 DP 主站&#xff0c;CP342-5作为 DP 从站&#xff1b; 2. 不同项目中S7-1200 与 S7-3…
阅读更多...
2022年软件测试人员调查统计

2022年软件测试人员调查统计

1、软件测试从业人员的年龄分布 测试行业的主力军年龄分布主要是集中在 26-30 岁这个区间&#xff0c;这部分的群体承担着行 业发展的主导力量&#xff0c;占 43.2%。根据数据显示&#xff0c;被调查者中占比最多的是 26-30 岁区间的软件测试从业人员&#xff0c;26-30 岁的测试…
阅读更多...
最新文章

Copyright @ 2022~2023