<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X_UA-Compatible" content="ie=edge">
<title>vue 入门</title>
<style>
[v-cloak]{
display: none;
}
</style>
<!--1 导入vue.js库-->
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<!--插值表达式，只会替换自己的占位符，不会把整个元素清空-->
<p v-cloak>--------{{msg}}-------</p>
<!--会将整个元素原有值清空-->
<h4 v-text="msg">--------------------</h4>
<!--将msg的内容按html样式输出-->
<h5 v-html="msg"></h5>
<!--v-bind:xxx用于绑定属性的指令，会将引号内的内容当做js脚本执行
简写模式 ::title="btTitle + 'aaa' "
-->
<input type="button" value="v-bind:" v-bind:title="btTitle + 'aaa' " />
<input type="button" value="冒号:" :title="btTitle + 'bbb' " />
<!--Vue中提供了v-on事件绑定机制
缩写是@
-->
<input type="button" value="v-on:click" :title="btTitle + 'bbb' " v-on:click="show" />
<input type="button" value="@" :title="btTitle + 'bbb' " @click="show" />
<input type="button" value="v-on:mouseover" :title="btTitle + 'bbb' " v-on:mouseover="show" />
</div>
<script src="./lib/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'test',
btTitle: "我是一个按钮"
},
methods: { //定义当前Vue实例的所有方法
show: function () {
alert('hello')
}
}
})
</script>
</body>
</html>
活动
天翼云最新优惠活动，涵盖免费试用,产品折扣等，助您降本增效！
v-cloak
v-cloak
2023-05-10 06:02:06 阅读次数：292
版权声明：本文内容来自第三方投稿或授权转载，原文地址：https://blog.51cto.com/u_15696939/5415410，作者：渭城朝雨浥轻尘，版权归原作者所有。本网站转在其作品的目的在于传递更多信息，不拥有版权，亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系，请发邮件至ctyunbbs@chinatelecom.cn沟通。
上一篇：双亲委派机制
下一篇：GC是什么? 为什么要有GC?
作者介绍
天翼云用户
查看更多
最新文章
SQL语句中EXISTS的用法
2024-12-20 07:55:40
Lucene详解介绍以及底层原理说明
2024-12-17 08:23:52
sql 实现分组的几种方式
2024-12-17 08:21:45
详细分析Sql Server索引的创建、查询、删除等基本知识（附Demo）
2024-12-10 06:59:03
SQL游标详解
2024-12-06 06:21:31
SQL DISTINCT 用法总结
2024-12-05 08:50:59
查看更多
热门文章
关于用户表根据userId分库后根据userName查询问题的思考
2023-04-28 06:44:50
Lucene查询语法和使用
2023-04-13 09:27:05
SqlServer查询计划
2023-05-11 06:08:00
myBatisPlus-查询
2023-05-17 06:58:39
MyBatis的动态Sql查询(七)
2023-06-08 06:18:16
Mysql多表查询和合并查询
2023-05-31 08:45:22
售前咨询热线
400-810-9889转1
关注天翼云
- APP
©2024
天翼云科技有限公司版权所有 增值电信业务经营许可证A2.B1.B2-20090001
公司地址：北京市东城区青龙胡同甲1号、3号2幢2层205-32室
