vue快速入门

最新推荐文章于 2023-04-11 17:35:02 发布

BeiLingI

最新推荐文章于 2023-04-11 17:35:02 发布

阅读量374

点赞数

本文链接：https://blog.csdn.net/BeiLingI/article/details/108577397

版权

本文从基础的Vue指令开始，包括v-text、v-html、v-on、v-if/v-show、v-bind、v-for等，深入讲解它们的用法和区别。接着通过简易记事本、axios请求、天气预报和音乐播放器等实例，展示Vue在实际项目中的应用，涵盖了事件处理、数据绑定、列表渲染和API交互等核心功能。

摘要由CSDN通过智能技术生成

vue快速入门

一、第一个vue小程序

var app = new Vue({
   
	el:"#app",
	data:{
   
		message: "hello!",
		people: {
   
			name: "ch",
			age: 14
		},
		arr:["都江堰校区","雅安校区","成都校区"]
	}
})

事件渲染的基本格式

二、vue指令

1. v-text 设置标签文本值

<div v-text="message"></div>

message中的内容会将标签中的内容全部替换，如果只想替换部分内容，应该使用：

<div id="app">你好{
   {
    message }}</div>

2. v-html 设置标签的innerHTML

设置普通文本时功能与v-text一致，设置特殊文本时不同

<div id="app">
	<div v-html="message"></div>
</div>
var app = new Vue({
   
	el:"#app",
	data:{
   
		message: "<a href='#'>name</a>"
	}
})

3. v-on 为元素绑定事件

<div id="app">
	<input type="button" v-on:click="fun1" />
	<input type="button" v-on:monseenter="fun1" />
	<input type="button" v-on:dblclick="fun1" />
	<input type="button" @click="fun1" />
</div>

var app = new Vue({
   
	el:"#app",
	methods:{
   
		事件名1:function(){
   
	}
})

v-on:可简写为@

4. v-show 根据后面表达式的真假，决定元素的显示或者隐藏（操纵元素的display）

<div id="app">
	<input type="button" v-show="isShow" />
</div>

var app = new Vue({
   
	el:"#app",
	data:{
   
		isShow: true
	}
})

v-show后面接的表达式都会被解析成布尔值

5. v-if 根据表达式的真假，直接操纵dom元素的显示和隐藏

<div id="app">
	<input type="button" v-if="isIf" />
</div>
		
var app = new Vue({
   
	el:"#app",
	data:{
   
		isIf: true
	}
})

频繁要切换显示或隐藏使用v-show，反之使用v-if，因为前者切换消耗资源少

6. v-bind 设置元素属性

<div id="app">
	<img v-bind:src="imgSrc" />
</div>
		
var app = new Vue({
   
	el:"#app",
	data:{
   
		imgSrc:######
	}
})

v-bind：属性可简写成：属性

7. v-for 根据数据生成列表结构

<div id="app">
	<ul>
		<li v-for="(item,index) in objArr">
			{
   {
    item.name }}
		</li>
	</ul>
</div>
		
var app = new Vue({
   
	el:"#app",
	data:{
   
		objArr:[
			{
   name: "a"},
			{
   name: "b"},
			{
   name: "c"},
		]
	}
})

8. v-on补充传递自定义参数，时件修饰符

<input type="button" v-on:dblclick="fun1（参数一）" />//可以传递参数
<input type="button" v-on:keyup.enter="fun1（参数一）" />//因为有enter，所以在回车时才触发事件

链接: 事件修饰符大全.

v-model 获取和设置表单元素的值
双向绑定，input的值为message的值，但如果input中的值因为输入而改变，那么message的值也改变。

<div id="app">
	<input type="text" v-model="message"/>
</div>

var app = new Vue({
   
	el:"#app",
	data:{
   
		message: "加油i"
	}
})

三、简易记事本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>记事本</title>
	</head>
	<body>
		<div id="notepad">
			<div class="title">小北的记事本</div>
			<div class="main">
				<div class="inputText">
					<input type="text" v-model="input" @keydown.enter="add"/>
				</div>
				<div class="list">
					<ul>
						<li v-for="(item,index) in list">
							<div>
								<span>{
   {
    index+1 }}.</span>
								<label>{
   {
    item }}</label>
								<button type="button" @click="destory(index)">x</button>
							</div>
						</li>
					</ul>
				</div>
				<div v-if="list.length != 0">
					<div class="number">
						<span>{
   {
    list.length }}</span>			
					</div>
					<div class="clearAll">
						<button type="button" @click="clearALL">清除所有</button>
					</div>
				</div>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
   
				el:"#notepad",
				data:{
   
					input: "好好学习",
					list: ["好好学习",

最低0.47元/天解锁文章

BeiLingI

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue快速入门

vue快速入门一、第一个vue小程序var app = new Vue({ el:"#app", data:{ message: "hello!", people: { name: "ch", age: 14 }, arr:["都江堰校区","雅安校区","成都校区"] }})事件渲染的基本格式二、vue指令v-text 设置标签文本值<div v-text="message"></div>message中的内容会将标签中的
复制链接

扫一扫