vue打卡02day

最新推荐文章于 2024-08-07 23:35:47 发布

jrymos001

最新推荐文章于 2024-08-07 23:35:47 发布

阅读量339

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_37681914/article/details/87825725

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<link rel="stylesheet" href="vueObject.css">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!-- 生命周期 -->
		<div id='app'>
			<button v-on:click="a = !a">{{a}}</button>
		</div>
		<!-- 模板语法 -->
		<div id='app01'>
			<span v-once>这个将不会改变:{{msg}}</span>
			<button v-on:click="msg = msg + '+'">{{msg}}</button>
			<span v-html="rawHtml"></span>
			<button v-bind:disabled="isButtonDisabled" v-on:click="isButtonDisabled=!isButtonDisabled">Button</button>
			<button v-bind:disabled="!isButtonDisabled" v-on:click="isButtonDisabled=!isButtonDisabled">Button</button>
			<span>{{ isButtonDisabled ? 'YES' : 'NO' }}</span>
			<p v-if="isButtonDisabled">现在你看到我了</p>
			<!-- 2.6.0才支持
				<a v-bind:[attributeName]="url"> 动态参数 </a>
			-->
			<form v-on:submit.prevent="onSubmit">
				<input type="submit">
			</form>
			<a @click="doSomething">...</a>
			<a :href="url">...</a>
		</div>
		<script src="vueObject.js"></script>
	</body>
</html>

var data={a:true}
var app = new Vue({
	el:'#app',
	data:data,
	created:function(){
		console.log('created a is: ' + data.a)
	},
	updated:function(){
		console.log('updated a is: ' + data.a)
	}
})
var app01 = new Vue({
	el:'#app01',
	data:{
		msg:"hello",
		rawHtml:"<h1>hello</h1>",
		isButtonDisabled:true,
		attributeName:"href",
		url:"http://www.baidu.com/"
	},
	methods:{
		onSubmit:function(){
			console.log('提交表单数据')
		},
		doSomething:function(){
			console.log('a标签跳转')
		}
	},
})