vuejs基础-常见指令

  • 2019 年 10 月 10 日
  • 筆記

一、

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>

VirMach 便宜 VPS

QNews

QNews