熟悉vue的常用命令

最新推荐文章于 2023-08-31 07:47:52 发布

菜鸟猿小毅

最新推荐文章于 2023-08-31 07:47:52 发布

阅读量248

点赞数 1

文章标签： css vue.js html html5 css3

本文链接：https://blog.csdn.net/weixin_48875316/article/details/116711128

版权

VUE小白之路

熟悉vue的常用命令

熟悉vue的常用命令

首先整体介绍一下

插值表达式
{{…}} 数据绑定最常见的形式就是使用的文本插值
v-html 指令：用于展示有结构的文本
v-text 指令：是用于展示纯文本
2.Vue.js的条件判断
v-if v-else、v-else-if else else-if
v-show
3.Vue.js 常用指令
v-model v-bind (简写："😊
4.Vue.js 事件处理器
v-on ：事件监听可以使用 v-on 指令
5.Vue.js 样式的绑定
Class属性的绑定（:class）
6.Vue.js 的内联样式(:style)

现在我们具体操作一下
1、插值表达式

<body>
    <div id="app">
        <!-- HTML部分 -->
        双大括号：<p>{{message}}</p> 
				v-html：<p v-html="Vhtml"></p> 
				v-text：<p v-html="text"></p> 
    </div>
    <script>
        // js部分
        new Vue({ // 首先创建一个Vue的实例，这个实例接收一些配置项
            el:"#app", // el 配置项指实例负责管理的区域； #app 指 id="app" 的dom标签里的所有内容（只对其有效）
            data:{
                message:'我们的第一个 hello World',
								Vhtml:`<div style="color:red">html</div>`,
								text:'纯文本展示'
            }
        })
    </script>
</body>

2、Vue.js的条件判断

<body>
    <div id="app">
        <!-- HTML部分 -->
        <div v-if="ok">放我出来</div>
				<div v-else>我出来了</div>
    </div>
    <script>
        // js部分
        new Vue({ // 首先创建一个Vue的实例，这个实例接收一些配置项
            el:"#app", // el 配置项指实例负责管理的区域； #app 指 id="app" 的dom标签里的所有内容（只对其有效）
            data:{
                ok:false,
            }
        })
    </script>
</body>

注释：其他建议自己手动试试，理解更深刻
3.Vue.js 常用指令

<body>
    <div id="app">
        <!-- HTML部分 -->
        <input v-model="myModel">
    </div>
    <script>
        // js部分
        new Vue({ // 首先创建一个Vue的实例，这个实例接收一些配置项
            el:"#app", // el 配置项指实例负责管理的区域； #app 指 id="app" 的dom标签里的所有内容（只对其有效）
            data:{
							myModel:"就是我",
            }
        })
    </script>
</body>

<body>
    <div id="app">
        <!-- HTML部分 -->
				<input type="button" value="按钮" v-bind:title="myModel + '-鼠标移入按钮'">
    </div>
    <script>
        // js部分
        new Vue({ // 首先创建一个Vue的实例，这个实例接收一些配置项
            el:"#app", // el 配置项指实例负责管理的区域； #app 指 id="app" 的dom标签里的所有内容（只对其有效）
            data:{
							myModel:"就是我",
            }
        })
    </script>
</body>

4.Vue.js 事件处理器

<body>
    <div id="app">
        <!-- HTML部分 -->
				<button v-on:click="getName">getName</button>
				<button @click="getName">简写</button>
    </div>
    <script>
        // js部分
        new Vue({ // 首先创建一个Vue的实例，这个实例接收一些配置项
            el:"#app", // el 配置项指实例负责管理的区域； #app 指 id="app" 的dom标签里的所有内容（只对其有效）
            data:{
							name:"小毅"
            },
						methods: {
							getName(){
								alert(`菜鸟猿-${this.name}`)
							}
						}
        })
    </script>
</body>

5.Vue.js 样式的绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>菜鸟猿-小毅</title>
</head>
<body>
<div id="app">
	<!-- HTML部分 -->
	<div class="my">我是红色</div>
</div>
<script>
// js部分
new Vue({ // 首先创建一个Vue的实例，这个实例接收一些配置项
	el:"#app", // el 配置项指实例负责管理的区域； #app 指 id="app" 的dom标签里的所有内容（只对其有效）
	data:{
		name:"小毅"
	},
	methods: {
		getName(){
			alert(`菜鸟猿-${this.name}`)
		}
	}
})
</script>
</body>
</html>
<style>
    /* css部分*/
		.my{
			color: red;
		}
</style>

6.Vue.js 的内联样式(:style)

<div id="app">
	<!-- HTML部分 -->
	<div style="color: red;">我是红色</div>
</div>

欢迎各位想要自学vue的同学，跟着小毅一起学习，有什么疑问都可以给博主小毅留言评论。博主乐意做出详细的解析。
有什么漏掉的建议自己动手试试，如果有不明白可以留言，点赞! ! !

菜鸟猿小毅

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
熟悉vue的常用命令

VUE小白之路熟悉vue的常用命令熟悉vue的常用命令首先整体介绍一下插值表达式{{…}} 数据绑定最常见的形式就是使用的文本插值v-html 指令：用于展示有结构的文本v-text 指令：是用于展示纯文本2.Vue.js的条件判断v-if v-else、v-else-if else else-ifv-show3.Vue.js 常用指令v-model v-bind (简写："????4.Vue.js 事件处理器v-on ：事件监听可以使用 v-on 指令5.Vue.js
复制链接

扫一扫