vue初级01

最新推荐文章于 2023-07-12 13:41:48 发布

进击的金城武

最新推荐文章于 2023-07-12 13:41:48 发布

阅读量169

点赞数

本文链接：https://blog.csdn.net/Five_26/article/details/88379002

版权

Vue初级

html（index.html）

html（index.html）

<html>
	<head>
		<title>vue title</title>
		<script src="https://unpkg.com/vue"></script>
	</head>
	<body>
		<div id="vue-app">
			<!-- 不同类型数据 -->
			<h1>name: {{ name }}</h1>
			<input type="text" v-bind:value="name">
			<a v-bind:href="website">website</a>
			<!-- v-bind简写 -->
			<a :href="website">website</a>
			<p v-html="websiteTag"></p>
			
			<!-- class与style样式绑定 -->
			<span :class="{classNameA:boolean}">class/style</span>
			<!-- 简单boolean点击事件 -->
			<span @click="boolean = !boolean" v-bind:class="{classNameA:boolean}">class/style</span>
			<!-- 多个class -->
			<div :class="allClass">class/style</div>
			
			<!-- 循环 -->
			<div v-for="item in arrayA">{{item}}</div>
			<template v-for="(item,index) in arrayA">
				<p>{{index}} - {{item}}</p>
			</template>
			<div v-for="item in arrayB">{{item.name}} - {{item.age}}</div>

			<!-- 事件绑定区别 -->
			<p>{{ helloWorld() }}</p>
			<p v-on:click="helloWorld">helloWorld</p>
			<p @click="helloWorld">helloWorld</p>
			
			<!-- 事件修饰符 -->
			<p @click.once="helloWorld">helloWorld</p>

			<!-- 双向数据绑定 input/textarea/select-->
			<!-- 方法1 -->
			<input ref="name" type="text" @keyup="getName"></input>
			<!-- 方法2 -->
			<input type="text" v-modal="name"></input>
			
			<!-- 计算属性 -->
			<p>A + C = {{addA}}</p>
			<p>B + C = {{addB}}</p>
		</div>
		<script	src="app.js"></script>
	</body>
</html>

JavaScript（app.js）

// 实例化vue对象
new Vue({
	// el:element 需要获取的元素，一定是html的根容器元素
	el:"#vue-app",
	// 数据的存储
	data:{
		name:"进击的金城武";
		website:"https://www.one.ju798.com",
		websiteTag:"<a href='https://www.one.ju798.com'>websiteTag</a>",
		numberA:0,
		numberB:0,
		numberC:10,
		changeColor:false,
		changeLength:false,
		//array
		arrayA:[1,2,3,4],
		arrayB:[{name:"coca",age:18},{name:"cola",age:17}]
	},
	// 存储各种方法
	methods:{
		// 事件
		helloWorld(){
			alert('helloWorld!');
		},
		// 双向数据绑定 方法1
		getName(){
			this.name = this.$refs.name.value;
		},
	},
	// 计算属性
	computed:{
		addA(){
			return this.numberA+this.numberC;
		},
		addB(){
			return this.numberB+this.numberC;
		},
		allClass(){
			return {
				classNameA: changeColor,
				classNameB: changeLength
			}
		}
	}
});