重生vue之我又入门了？

无念至此

已于 2023-07-12 21:34:08 修改

阅读量47

点赞数 1

分类专栏：坦克风云文章标签： vue.js javascript 前端

于 2023-07-10 00:34:33 首次发布

本文链接：https://blog.csdn.net/m0_61096949/article/details/131629631

版权

坦克风云专栏收录该内容

15 篇文章 1 订阅

订阅专栏

如何创建vue对象实例

因为Vue是需要作用在标签上的，根本上还是js的代码

el属性是和使用该Vue对象的id属性绑定的

data属性是用来存放数据的

<script> 
    new Vue({
        el:'需要绑定的id属性',
	    data:{
		    存放数据的地方
		    可以是数组、对象或者是数组对象
		}
    })
</script>

vue简单使用

使用el和标签中的id属性绑定，并将值替换成data里面设置的值

插值表达式{{ }}，读取vue中data里面的数据，只能应用于文本范围（两个标签中间部分）

<body>
    <div id="app">
	    <p>大家好，我是 {{person.name}} ，我今年 {{person.age}} 岁了</p>
    </div>
</body>
<script>
	// 创建vue 的实例
	new Vue({
		el:'#app',
		data:{
			person:{name:'曹操',age:36},
			hpList:['武汉','湖南','河南','陕西']
		}
	})
</script>

v-for遍历数组

v-for标签属性，用来循环遍历数组，e in arr 类比增强for循环（e:arr）

e是数组arr中的每一个元素

<body>
    <div id="app">
		<p>
			厚溥的分公司地点有：
			<ul>
				<li v-for="hp in hpList">
					{{hp}}
				</li>
			</ul>
				
			普通的for循环
			<ul>
				<li v-for="i in 10">
					{{i}}
				</li>
			</ul>
		</p>
	</div>
</body>

<script>
	// 创建vue 的实例
	new Vue({
		el:'#app',
		data:{
			hpList:['武汉','湖南','河南','陕西']
		}
	})
</script>

v-bind单项绑定

v-bind属性，单向绑定绑定某个属性，让属性中读取data中的数据，通常简写为（:）

<body>
    <div>
    <h3>单向绑定</h3>
	    <input type="text" v-bind:value="person.name">
	    <input type="number" :value="person.age"><br>
	</div>
</body>

<script>
	// 创建vue 的实例
	new Vue({
		el:'#app',
		data:{
			person:{name:'曹操',age:36}
		}
	})
</script>

v-model双向绑定

v-model属性，双向绑定，可以读取，也可以改变data中的数据，通常简写为v-model，只适用于表单input标签

<body>
    <div>
    <h3>双向绑定</h3>
			<input type="text" v-model:value="person.name">
			<input type="number" v-model="person.age">
		</p>
	</div>
</body>

<script>
	// 创建vue 的实例
	new Vue({
		el:'#app',
		data:{
			person:{name:'曹操',age:36}
		}
	})
</script>