vue.js入门基本代码

最新推荐文章于 2024-05-10 14:59:15 发布

哒哒键盘小哥

最新推荐文章于 2024-05-10 14:59:15 发布

阅读量164

点赞数 1

分类专栏：前端框架vue.js

本文链接：https://blog.csdn.net/qq_41304579/article/details/103444591

版权

前端框架vue.js 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

入门案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue.js入门</title>
	<style>
		[v-cloak]{
			display: none;
		}
	</style>
</head>
<body>

	<div id="app">
		<!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
		<p v-cloak>`````````{{mag}}``</p>
		<a href="#" v-text="mag">````</a>

		<div>{{mag2}}</div>
		<div v-text="mag2"></div>
		<div v-html="mag2"></div>
		


		<!-- v-bind:是Vue中，提供的用于绑定属性的指令 -->
		<input type="button" value="按钮" v-bind:title="mytitle + '123'">
		<br>
		<!-- v-bind指令可以简写为冒号（：）-->
		<input type="button" value="按钮1" :title="mytitle + '123'">
		<br>



		<!-- vue 中提供了v-on：事件绑定机制 -->
		<!-- <input type="button" value="按钮2" :title="mytitle + '123'" v-on:click="alert('123')"> -->
		<input type="button" value="按钮2" :title="mytitle + '123'" v-on:click="show">

		<!-- v-on指令可以简写为@ -->
		<input type="button" value="按钮2" :title="mytitle + '123'" @click="show">

	</div>
	
	<script src="vue.js"></script>
	<script>
		//vue的构造函数
		var vm=new Vue({
			//表示，当前我们new的这个vue驶离，要控制页面上的哪个区域
			el:'#app',
			//data属性中，存放的是el中要用到的数据
			data:{
				mag:'你好vue.js',
				mag2:'<h1>h1标签</h1>',
				mytitle:'v-bind的使用，自己定义属性参数'
			},
			methods:{
				show:function(){
					alert("1123");
				}
			}
		})
	</script>
</body>
</html>

哒哒键盘小哥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js入门基本代码

入门案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue.js入门</title> <style> [v-cloak]{ display: none; } </style><...
复制链接

扫一扫

专栏目录