Vue 模板语法 && 数据绑定
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>模板语法</title>
6 <script type="text/javascript" src="../js/vue.js"></script>
7 </head>
8 <body>
9 <!--
10 Vue模板语法有2大类：
11 1.插值语法：
12 功能：用于解析标签体内容
13 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data的内容
14 2.指令语法：
15 功能：用于解析标签（包括标签属性、小钱体内容、绑定事件……）
16 写法：v-bind:href="xxx" 或者 简写为：:href="xxx"，xxx同样要是js表达式
17 -->
18 <div id="root">
19 <h1>插值语法</h1>
20 <h3>你好，{{name}}</h3>
21 <hr/>
22 <h1>指令语法</h1>
23 <a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}</a>
24 <a :href="school.url" x="hello">点我去{{school.name}}1</a> <!-- "v-bind:"的简写 -->
25 </div>
26 </body>
27
28 <script type="text/javascript" >
29 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
30 new Vue({
31 el: '#root',
32 data:{
33 name: 'jack',
34 school:{
35 name: '深圳大学',
36 url: 'https://www.baidu.com'
37 }
38 }
39 })
40 </script>
41 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8" />
5 <title>数据绑定</title>
6 <script type="text/javascript" src="../js/vue.js"></script>
7 </head>
8 <body>
9 <!--
10 Vue中2中数据绑定方式：
11 1.单项绑定(v-bind)：数据只能从data流向页面。
12 2.双向绑定(v-model)：数据不近可以从data流向页面，还可以从页面流向data。
13 备注：
14 1.双向绑定一般都应用在表单元素上（如：input、select等）
15 2.v-model:value 可以简写为 v-model，因为v-model默认手机的就是value的值。
16 -->
17 <div id="root">
18 单项数据绑定：<input type="text" v-bind:value="name"><br/>
19 双项数据绑定：<input type="text" v-model:value="name"><br/>
20 双项绑定简写：<input type="text" v-model="name"><br/>
21
22 <!--
23 如下代码是错误的，因为v-model只能应用在表单类元素（输入类元素）上
24 <h2 v-model:x="name">hello</h2>
25 -->
26 </div>
27 </body>
28
29 <script type="text/javascript" >
30 Vue.config.productionTip = false;// 阻止 vue 在启动时生成生产提示。
31 new Vue({
32 el: '#root',
33 data:{
34 name: 'jack'
35 }
36 })
37 </script>
38 </html>
Vue 模板语法 && 数据绑定的更多相关文章
- 初始Vue、Vue模板语法、数据绑定（2022/7/3）
文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...
- Vue模板语法(二)
Vue模板语法(二) 样式绑定 class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...
- Vue模板语法(一)
Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...
- Vue模板语法（一）
Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...
- 【Vue】浅谈Vue(一)：从模板语法数据绑定、指令到计算属性
写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...
- (Vue)vue模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. ...
- Vue模板语法与常用指令
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...
- Vue模板语法（二）
Vue基础模板语法 二 1. 样式绑定 1.1 class绑定 使用方式:v-bind:class="expression" expression的类型:字符 ...
- 11 - Vue模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...
随机推荐
- redis & redis sentinel
Redis 命令参考 Redis Sentinel Cheat Sheet Redis 哨兵节点之间相互自动发现机制(自动重写哨兵节点的配置文件) Redis哨兵模式(sentinel)学习总结及部署 ...
- FileAPI
FileAPI ```java File类的常见方法 1.创建. boolean createNewFile(); //创建文件 boolean mkdir();创建文件夹 boolean mkdir ...
- Spring Ioc源码分析系列--Bean实例化过程(二)
Spring Ioc源码分析系列--Bean实例化过程(二) 前言 上篇文章Spring Ioc源码分析系列--Bean实例化过程(一)简单分析了getBean()方法,还记得分析了什么吗?不记得了才 ...
- JAVA - 如何判断一个类是无用的类
JAVA - 如何判断一个类是无用的类 方法区主要回收的是无用的类,那么如何判断一个类是无用的类的呢? 判定一个常量是否是"废弃常量"比较简单,而要判定一个类是否是"无用 ...
- docker引起服务器磁盘爆满
服务器异常 又是开开心心打开我心爱的服务器一天: 吔!这是嘛啊?我的服务器域名访问不了了,一直转圈圈超时了,好,打开ssh远程看看,吔!!!还是访问不了,宕机了?怀着一颗憋大便的心情打开了阿里云控制面 ...
- 微信access_token缓存与更新
由于Access Token有效期只有7200秒,而每天调用获取的次数只有2000次,所以需要将Access Token进行缓存来保证不触发超过最大调用次数.另外在微信公众平台中,绝大多数高级接口都需 ...
- 5. `sklearn`下的线性回归
本文以线性回归为例,介绍使用sklearn进行机器学习的一般过程. 首先生成模拟数据 import numpy as np def get_data(theta_true,N): X=np.rando ...
- 想知道Vue3与Vue2的区别?五千字教程助你快速上手Vue3!
从Vue3发布以来,我就一直对其非常感兴趣,就一直想着将其投入公司的生产中,但是开始考虑到很多不确定性就暂时对一些很小的功能进行一些尝试:慢慢的发现组合式Api的形式非常适合开发(个人感觉),尤其是V ...
- DAST 黑盒漏洞扫描器 第四篇：扫描性能
0X01 前言 大多数安全产品的大致框架 提高性能的目的是消费跟得上生产,不至于堆积,留有余力应对突增的流量,可以从以下几个方面考虑 流量:减少无效流量 规则:减少规则冗余请求 生产者:减少无效扫描任 ...
- Stream常用操作以及原理探索
Stream常用操作以及原理 Stream是什么? Stream是一个高级迭代器,它不是数据结构,不能存储数据.它可以用来实现内部迭代,内部迭代相比平常的外部迭代,它可以实现并行求值(高效,外部迭代要 ...