Vue（标签的学习）

最新推荐文章于 2025-05-14 15:47:11 发布

Woo_home

最新推荐文章于 2025-05-14 15:47:11 发布

阅读量319

点赞数

CC 4.0 BY-SA版权

分类专栏： # Vue 文章标签： Vue

本文链接：https://blog.youkuaiyun.com/Woo_home/article/details/101052532

Vue 专栏收录该内容

4 篇文章

订阅专栏

不知道Vue的下载的朋友可以看下之前的文章
第一个Vue实例

当我们的网络延迟的时候会直接把我们的插值表达式返回渲染到页面上，所以我们需要使用v-cloak标签

v-cloak标签：（解决插值表达式的闪烁问题）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>

<style>
    [v-cloak]{
        display: none;
    }
</style>

<body>

    <div id="app">
        <p v-cloak>{{ msg }}</p>
    </div>

    <script>
        var v = new Vue({
            el:"#app",
            data:{
                msg:"Vue应用",
            }
        })
    </script>

</body>
</html>

v-text（默认不会有闪烁的问题）

v-text和插值表达式的作用一样
但是v-text会覆盖元素中的内容，而v-cloak不会，如

<div id="app">
	<p v-cloak>+++{{ msg }}+++</p>
	<h1 v-text="msg">++++++</h1>
</div>

在这里插入图片描述

v-html

比如有时候我们想把一个html的标签渲染到页面的时候，比如：
这个时候使用v-cloak和v-text是无法做到的，这个时候就可以使用v-html标签了，顾名思义这个标签就是渲染html的意思

<script>
	var v = new Vue({
	    el:"#app",
	    data:{
	        msg:"Vue应用",
	        msg2:"<h2>哈哈哈</h2>"
	    }
	})
</script>

使用起来也很简单

<div id="app">
	<p v-html="msg2"></p>
</div>

在这里插入图片描述

v-bind（绑定属性的指令，也可简写成：title）

当把鼠标方到按钮的时候就会显示我们定义的title

<div id="app">
    <input type="button" value="按钮" v-bind:title="myTitle"/>
    <input type="button" value="按钮" :title="myTitle"/> <!--这样也是可以的-->
</div>
<script>
    var v = new Vue({
        el:"#app",
        data:{
            myTitle:"这是自己定义的按钮"
        }
    })
</script>

v-on（绑定事件机制）也可简写为@click

使用方法

<input type="button" value="按钮" :title="myTitle" v-on:click="alert('hello vue')" />

有时候使用上面的方法会报错，说我们没有定义alert，但是我执行的是没错的，没关系，还有别的方法

<input type="button" value="按钮" :title="myTitle" v-on:click="show" />
<script>
   var v = new Vue({
       el:"#app",
       data:{
           msg:"Vue应用",
           msg2:"<h2>哈哈哈</h2>",
           myTitle:"这是自己定义的按钮"
       },
       methods:{ //我们在script中定义一个mothods
           show:function () { //这里的show不是乱起名的，而是我们在按钮中定义的绑定事件
               alert("hello Vue")
           }
       }
   })
</script>

这个效果跟上面的是一样的
在这里插入图片描述

v-model（双向数据绑定）实现简易计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>

<body>

	<h3>简易计算器实现</h3>
	
	<div id="app">
		<input type="text" v-model="n1">
		<select v-model="opt">
		    <option value="+">+</option>
		    <option value="-">-</option>
		    <option value="*">*</option>
		    <option value="/">/</option>
		</select>
		<input type="text" v-model="n2">
		<input type="button" value="=" @click="calc">
		<input type="text" v-model="result">
	</div>
	
	<script>
		var v = new Vue({
		    el:"#app",
		    data:{
		        n1:'',//定义第一个输入框默认为空
		        n2:'',//定义第二个输入框默认为空
		        result:0,//定义默认结果为零
		        opt:'+'//定义操作选项默认为+号
		    },
		    methods:{
		        calc(){
		            switch(this.opt){
		                case '+':
		                    this.result = parseInt(this.n1)+parseInt(this.n2)
		                    break;
		                case '-':
		                    this.result = parseInt(this.n1)-parseInt(this.n2)
		                    break;
		                case '*':
		                    this.result = parseInt(this.n1)*parseInt(this.n2)
		                    break;
		                case '/':
		                    this.result = parseInt(this.n1)/parseInt(this.n2)
		                    break;
		            }
		        }
		    }
		})
    </script>

</body>
</html>

在这里插入图片描述