Vue学习整理（入门）

最新推荐文章于 2023-03-01 16:56:20 发布

原创最新推荐文章于 2023-03-01 16:56:20 发布 · 262 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript

这篇博客介绍了Vue.js的基础知识，包括如何在开发和生产环境中引入Vue，使用v-bind进行元素属性绑定，利用v-for指令渲染数组，通过v-on处理用户输入事件，以及运用v-model实现表单的双向数据绑定。还提到了使用else-if判断的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入Vue<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>（开发环境）<script src="https://cdn.jsdelivr.net/npm/vue"></script>（生产环境）

▲声明式渲染

<div id="test1">
  {{ text }} //text的内容通过vue来设定
</div>

<script>
var test1 = new Vue({
  el: '#test1',  //选中id为test1
  data: {
    text: '测试文字'   //设定text的值，会显示在网页上
  }
})
</script>

▲绑定元素属性

<div id="test2">
  <span v-bind:title="text">
    鼠标放在这里
  </span>
</div>
<script>
var test2 = new Vue({
  el: '#test2',
  data: {
    text: '我是通过vue绑定的提示信息'
  }
})
</script>

v-bind attribute被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊attribute

▲显示与隐藏

<div id="test3">
  <p v-if="seen">这段文字可以被设置成是否显示</p> //seen是自己设置的属性名
</div>
<script>
var test3 = new Vue({
  el: '#test3',
  data: {
    seen: true //当seen是true时，p标签里的内容可见。false则不可见
  }
})
</script>
//v-if可以换成v-show。v-show的原理是设置display属性，v-if的原理是删除标签

▲渲染数组：v-for指令可以绑定数组的数据

<div id="test4">
			<ol>
				<li v-for="content in shuju"> //格式为a in b，a代表下面双大括号里的内容，b是vue中数组的名字
					{{ content.text }}
				</li>
			</ol>
		</div>

		<script>
			var test4 = new Vue({
				el: '#test4',
				data: {
					shuju: [{text: '测试文字1'},{text: '测试文字2'},{text: '测试文字3'}]
				}
			})
		</script>

在这里插入图片描述
▲处理用户输入：用v-on 指令添加一个事件监听器

<div id="test5">
			<p>{{ message }}</p>
			<button v-on:click="add">文字加字</button>
		</div>
		<script>
			var test5 = new Vue({
				el: '#test5',
				data: {
					message: '初始文字！'
				},
				methods: {
					add: function() {
						this.message = this.message + "我是新加的字"
					}
				}
			})
		</script>
//v-on: 可以换成@
//methods中的方法可以相互调用，也能直接访问data中的数据，需要加上this关键字

在这里插入图片描述
▲将表单内容同步显示：通过v-model指令实现表单输入和应用状态之间的双向绑定

<div id="test6">
			<p>{{text}}</p>
			<input v-model="text"> //输入框与text绑定，更改text的值后网页上的显示也会变化
		</div>
		<script>
			var test6 = new Vue({
				el: '#test6',
				data: {
					text: 'Hello Vue!'
				}
			})
		</script>

在这里插入图片描述
▲else-if判断

<div id="test7">
		<div v-if="Math.random() > 0.5">
			<p>{{text}}</p>
		</div>
		<div v-else>
			<p>小于或等于0.5</p>
		</div>		
		</div>
		
		<script>
			var app = new Vue({
				el:"#test7",
				data:{
					text:"大于0.5"
				}
			}
		)
		</script>
//v-else、v-else-if必须跟在v-if或者v-else-if之后