vuejs基础-常见指令

eadela

发布于 2019-09-29 15:23:28

6930

发布于 2019-09-29 15:23:28

文章被收录于专栏：eadelaeadela

一、

v-cloak 解决插值表达式闪烁问题，只会替换自己字节占位符

v-text 默认没有闪烁问题，替换元素中原本内容

v-html　　将内容里面的标签

        <style>
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <p v-cloak>**不被替换**{{ msg }}</p>
            <h1 v-text="msg">***被替换*</h1>
            <div v-html="msg2">被替换</div>
        </div>
        
        <script type="text/javascript" src="vue.js" ></script>
        <script>
            
            var vm = new Vue({ 
                el : "#app",
                data : {
                    msg : "123",
                    msg2 : "<h1>这是一个标签</h1>"
                }
            })
        </script>

v-bind 要绑定的属性，写合法的表达式

			<input type="button" value="提交" title="mytitle" />
			<input type="button" value="提交" v-bind:title="mytitle+'123'" />
			<input type="button" value="提交" :title="mytitle" />

v-on 事件绑定机制

<input type="button" value="按钮" v-on:click="show" />
<input type="button" value="按钮" v-on:mouseover="show" />

			var vm = new Vue({ 
				el : "#app",
				data : {
					msg : "123",
					msg2 : "<h1>这是一个标签</h1>",
					mytitle:"这是一个title"
				},
				methods:{
					show:function () {
						alert("hello");
					}
				}
			})
		</script>

在VM实例中，如果想要获取data上的数据，或者想要掉哦用methods中的方法，必须通过this.数据属性名或者this.方法名来进行访问，这里的this，就是表示我们new出来的实例

Vue实例，会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同步到页面中去；好处：程序员只需关心数据，不需要考虑如何重新渲染DOM页面。

v-bind 只能实习数据的单向绑定，从M自动绑定到V,无法实现数据的双向绑定

v-model

v-model指令，可以是实现表单元素和model中数据的双向数据绑定

注意 v-model 只能运用在表单元素中

input(radio, text , address, email ...)select checkbox textarea

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<div v-text="msg"></div>
			<input type="text" v-model="msg"/>
		</div>
	</body>
	
	<script>
		var vw = new Vue({
			el:"#app",
			data:{
				msg:"v-model效果展示！"
			}
		});
	</script>
</html>