三种写法，快速掌握vue3之template 使用script元素 多种演示
qiyuwang 2024-10-10 11:35 10 浏览 0 评论
Vue3 模板语法
Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue 的核心是一个允许你采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
插值
文本
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
文本插值
<div id="app"> <p>{{ message }}</p> </div>第一种（使用模板字符串）早期字符串拼接年代
<div id="app"></div> new Vue({
el: "#app",
template: '<div>\
<h1>{{message}}</h1>\
<div>',
data: {
message: '字符串拼接'
}
})
第二种（使用script元素）HTML5标准之前的写法 ``
<script type="text/x-template" id="tem">
<div>
<h1>{{message}}</h1>
</div>
</script>new Vue({
el: "#app",
template: '#tem',
data: {
message: 'HTML5标准之前的写法，存在一定弊端（可自行google）
之后HTML5发布的template元素弥补了此方式的缺点'
}
})第三种（使用template元素）HTML5标准之后的写法【第二种的升级版】
<template id="tem">
<div>
<h1>{{message}}</h1>
</div>
</template>new Vue({
el: "#app",
template: '#tem',
data: {
message: 'HTML5中的template标签 ,注意：'
// template是HTML5中的标签，
//不是自定义标签，
//也不是Vue中的组件]
}
})
在页面中使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id='app'>
<p>{{ msg }}</p>
</div>
<!-- 使用<template>标签定义模板内容 -->
<template id="title">
<div style="color:red">
<h1> {{ msg }} </h1>
</div>
</template>
<script>
Vue.createApp({
data(){
return{
msg:"hello"
}
},
// template:"<div><h3>谢谢</h3></div>"
//
template:'#title'
}).mount("#app")
</script>
</body>
</html>属性
HTML 属性中的值应使用 v-bind 指令。
<div v-bind:id="dynamicId"></div>对于布尔属性，常规值为 true 或 false，如果属性值为 null 或 undefined，则该属性不会显示出来。
<button v-bind:disabled="isButtonDisabled">按钮</button>以上代码中如果 isButtonDisabled 的值是 null 或 undefined，则 disabled 属性甚至不会被包含在渲染出来的 <button> 元素中。
以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
表达式会在当前活动实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效:
<!-- 这是语句，不是表达式：-->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
这里， v-if 指令将根据表达式 seen 的值( true 或 false )来决定是否插入 p 元素。
另外还有其它很多指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表：
实例
<div id="app">
<ol>
<li v-for="site in sites">
{{ site.text }}
</li>
</ol>
</div>
<script>
const app = {
data() {
return {
sites: [
{ text: 'Google' },
{ text: 'Runoob' },
{ text: 'Taobao' }
]
}
}
}
Vue.createApp(app).mount('#app')
</script>
参数
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
<!-- 完整语法 -->
<a v-on:click="doSomething"> ... </a>
<!-- 缩写 -->
<a @click="doSomething"> ... </a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>在这里参数是监听的事件名。
修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form>用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
双向数据绑定
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
const app = {
data() {
return {
message: 'Runoob!'
}
}
}
Vue.createApp(app).mount('#app') </script>缩写
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>试例：
1、数据控制 input 元素是否禁止编辑
<script src="../vue.global.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
myDisabled : true
}
},
template : '<input v-bind:disabled = "myDisabled">'
});
// vm 就是vue应用的根组件
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
</script>v-bind:disabled = "myDisabled"，数据绑定 disabled 属性
2、只取第一次的数据
<script src="../vue.global.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
message : "hello"
}
},
template : "<div v-once>{{message}}</div>"
});
// vm 就是vue应用的根组件
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
vm.$data.message = "hello world";
</script>使用 v-once 修饰后，message 只取 data 中 message 的第一次赋值，这里显示 hello，而不是 hello world
3、数据控制元素是否显示
<script src="../vue.global.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
message : "hello",
show : true
}
},
template : '<div v-if="show">{{message}}</div>'
});
// vm 就是vue应用的根组件
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
</script>4、数据与 title 属性绑定
<script src="../vue.global.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
message : "hello", title : "myTitle" }
}, template : '<div v-bind:title="title">{{message}}</div>' });
// vm 就是vue应用的根组件
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
</script>使用 v-bind:title="title" 将 data 中的 title 变量 与 template 中的 title 属性绑定
5、为元素添加事件
<script src="../vue.global.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
message : "hello"
}
},
methods: {
myClick() {
alert('点击我了')
}
},// 将 v-on:click 改为 @click 为简写
template : '<div v-on:click="myClick">{{message}}</div>'
});
// vm 就是vue应用的根组件
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
</script>使用 v-on:click="myClick"，将 methods 中的 myClick 方法绑定为点击事件。
6、动态属性
<script src="../vue.global.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
message : "hello",
attribute: "title",
title : "myTitle"
}
},
template : '<div :[attribute]="title">{{message}}</div>'
});
// vm 就是vue应用的根组件
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
</script>:[attribute]="title"，属性也与数据关联
7、 动态事件
<script src="../vue.global.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 创建一个vue应用实例
data() {
return {
message : "hello",
event: "click"
}
},
methods: {
myClick() {
alert('点击我了')
}
},
template : '<div @[event]="myClick">{{message}}</div>'
});
// vm 就是vue应用的根组件
const vm = app.mount('#myDiv'); // 绑定id为 myDiv 的元素
</script>相关推荐
- 程序员都用什么电脑?适合编程笔记本电脑推荐
-
适合程序员的笔记本电脑首先应该满足小巧轻便这个需求，然后才是性能因素，一个标准的程序员必定能够随时随地改BUG，所以可以优先考虑苹果MacBookPro，由于其MacOS就是Linux内核，做开...
- Linux(debian)内核编译(二)虚拟网卡实例
-
2.10.虚拟网卡TUN/TAP...
- 老毛子要上天 冬天竟然拿矿机当暖气
-
2017-12-2814:10:55作者：李鑫我们都知道矿机在实际工作当中会产生出大量的热能，近日俄罗斯就有人用Comino挖矿电脑来充当暖气的效果，这台电脑不需要特别安装，也没有多余的接口，同样...
- qemu linux内核(5.10.209)开发环境搭建
-
版本信息宿主机：ubuntu20.04.6LTS(FocalFossa)虚拟机：ubuntu20.04.6LTS(FocalFossa)安装宿主机的步骤省略，和一般的在vmware中安...
- Ubuntu 16.04 LTS现已正式支持IBM LinuxONE与z Systems
-
4月22号的时候，Canonical很高兴地宣布了Ubuntu16.04LTS（XenialXerus）已正式支持IBMzSystems和LinuxONE大型机的消息。该长期支持版本经历了六...
- 号称最强大深度学习笔电，雷蛇推出Lambda Tensorbook笔记本电脑
-
IT之家4月13日消息，深度学习公司Lambda与雷蛇合作，发布了新的LambdaTensorbook笔记本电脑，号称是世界上为深度学习设计的最强大的笔记本电脑，可以使用Linux...
- 电脑连 WiFi 全攻略!3 步搞定 + 疑难解答
-
电脑搜不到WiFi？输对密码却连不上？看视频卡、打游戏延迟高？别慌！不管你用Win/Mac还是Linux，这篇保姆级教程从连接步骤到故障排查全覆盖，10分钟让你告别“网络黑洞”！一、基础连...
- linux 网卡bond模式
-
如何进行Linux网络绑定网络绑定简介在Debian10Buster(DHCP)上配置有线和无线网络绑定...
- 在 Ubuntu Server 上配置静态 IP 地址
-
Ubuntu17.10之前版本编辑/etc/network/interfaces文件重启网络服务或重启服务器来应用新的配置...
- Linux网络运维脚本实战示例:配置下发
-
在Linux网络运维场景中，自动化配置下发是提高效率的关键。一个示例展示如何编写一个Shell脚本，用于远程批量部署网络配置到多台服务器。本示例将使用SSH无密码登录和Ansible自动化工具来简化和...
- KVM 虚拟机网络连接异常的排查方法
-
#KVM虚拟机网络连接异常的排查方法当KVM虚拟机出现网络连接问题时，可以按照以下系统化的方法进行排查和解决：##一、基础网络检查###1.检查虚拟机网络状态```bash#在虚拟机内部检...
- 技术宅教你linux开发板直连电脑ubuntu
-
1：我使用的是笔记本，台式机类似。原理：和开发板挂载到路由器或者交换机不一样。我们通过笔记本电脑直连，是将笔记本的物理网卡作为一个桥梁，把开发板和虚拟机ubuntu连接在一起。连接好以后可以使用NFS...
- Ubuntu 25.04发行版登场:Linux 6.14内核，带来多项技术革新
-
IT之家4月18日消息，科技媒体linuxiac昨日（4月17日）发布博文，报道称代号为PluckyPuffin的Ubuntu25.04发行版正式上线，搭载最新Linu...
- 【故障解决】麒麟系统右下角网络图标取消显示叹号
-
原文链接：【故障解决】麒麟系统右下角网络图标取消显示叹号...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)