前端框架Vue学习 ——(二)Vue常用指令

文章目录


常用指令

指令: HTML 标签上带有 "v-" 前缀的特殊属性,不同指令具有不同含义。例如: v-if, v-for...

常用指令:

  • v-bind:为 HTML 标签绑定属性值,如设置 href,css 样式等
html 复制代码
<a v-bind:href="url">测试</a>

可以简写为:

html 复制代码
<a :href="url">测试</a>
  • v-model:在表单元素上创建双向数据绑定
html 复制代码
<input type="text" v-model="url">

为其绑定数据模型

html 复制代码
<script>
new Vue({
	el: "#app" ,
	data: {
		url: "https://www.baidu.com"
	}	
})
</script>

注意:通过 v-bind 或者 v-model 绑定的变量,必须在数据模型中声明。

代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE-快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <input type="text" v-model="message">
            {{message}}
        </div>
        <div>
            <a :href="url">链接</a>
            <input type="text" v-model="url" />
        </div>
    </div>
</body>
<script>
    // 定义 Vue 对象
    new Vue({
        el: "#app", // Vue 接管区域
        data: {
            message: "Hello VUE",
            url: "https://www.baidu.com"
        }
    })
</script>
</html>
  • v-on:为 HTML 标签绑定事件(v-click、v-blur、v-focus)
html 复制代码
<input type= "button" value="点我" v-on:click="handle()">

可以简化为:

html 复制代码
<input type="button" value= "点我" @click= "handle()">
html 复制代码
<script>
new Vue({
	el: " #app",
	data: {
		//...
	},
	methods: {
		handle: function(){
			alert('我被点去了');
		}
	}
})
</script>
  • v-if:添加性的渲染某元素,判断为 true 时渲染,否则不渲染
html 复制代码
年龄{{age}},经判定为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>
  • v-show:根据条件展示某元素,区别在于切换的是 display 属性 的值
html 复制代码
年龄{{age}},经判定为:
<span v-show="age <= 35">年轻人</span>
  • v-for:列表渲染,遍历容器的元素或者对象的属性
html 复制代码
<div v-for="addr in addrs">{{addr}}</div>
html 复制代码
<div v-for=" (addr,index) in addrs">{{index + 1}} : {{addr}}</div>
html 复制代码
data: {
	addrs: ['北京','上海','广州', '深圳', '成都','杭州']
},
相关推荐
Aress"17 分钟前
uniapp设置vuex公共值状态管理
javascript·vue.js·uni-app
野老杂谈1 小时前
如何快速学习智能合约开发语言 Solidity
开发语言·学习·智能合约·solidity·以太坊·区块链开发
Han.miracle1 小时前
Java线程的学习—多线程(一)
java·开发语言·学习
忧郁奔向冷的天2 小时前
视觉SLAM十四讲2nd—学习笔记(二)20250817
笔记·学习
咸虾米2 小时前
在unicloud的云对象中如何调用同一服务空间内的另外其他云对象
javascript·微信小程序·前端框架
一 乐2 小时前
口腔健康系统|口腔医疗|基于java和小程序的口腔健康系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·小程序·毕设
旺财是只喵2 小时前
vue项目里使用3D模型
前端·vue.js
立志成为大牛的小牛2 小时前
数据结构——三十一、最小生成树(王道408)
数据结构·学习·程序人生·考研·算法
Java陈序员2 小时前
完全开源!一款基于 SpringBoot + Vue 构建的社区平台!
vue.js·spring boot·github·社区
小纯洁w2 小时前
vue3.0 使用el-tree节点添加自定义图标造成加载缓慢的多种解决办法
前端·javascript·vue.js