Vue的重要语法

1、事件指令

用v-on监听DOM事件，用来监听事件触发时运行JS代码。

<button @click="count++">{{count}}赞了我</button>
<p>The button above has been clicked {{ count }} times.</p>

data(){
	  return {   
			  count: '1',
		  }
  }

a）事件处理方法 & 定义事件的语法

● 最基本的用法

<button @click="great">Great</button>

<script>
export default {
  name: 'app',
  data(){
	  return {
			  msg : 'hello vue',
		  }
  },
  created(){
  },
  methods:{
	  great: function (event) {
		  //this 在方法里指向当前Vue实例,可以获取到data里的内容
		  alert('Hello'+ this.msg + '!');
		  console.log(this.$el);
		  
		  if(event){
			 alert(event.target.tagName);
		 }
	  }
  }
}
</script>

所有methods定义的方法中，使用到的this，统统指向当前Vue实例。我们可以用this来取用data中定义的变量，同时也可以取到当前实例的全部属性。

比如 this.$el 就会返回当前vue实例挂载到虚拟DOM上的实际HTML对象

 

● 内联处理器

<button @click="say('Hi')">Say Hi</button>
<button @click="say('Bye')">Say Bye</button>

<script>
...
  methods:{
	  say : function (msg){
		  alert(msg);
	  }
...
</script>

 

 

在我们需要用到原始DOM事件对象时，可以使用 $event 来传递

<button @click="warn('msg..', $event)">Submit</button>

       现在，我们就可以访问这个原生JS事件

<script>
...
  methods:{
	  warn : function (msg, event){
		  if(event){
			  console.log(event);
			  event.preventDefault();
		  }
		  alert(msg);
	  }
  }
...
</script>

 

b）事件修饰符

在事件处理中调用 event.preventDefualt() 或 event.stopPropagation() 是非常常见的需求，我们可以轻松地在方法中实现，但更优美的实现方式是：方法中只进行纯粹的数据逻辑的实现，而不是去处理DOM事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符，我们可以在绑定事件后用  .xxx 来修饰DOM事件

①   .stop 表示阻止事件继续传播

<!-- 阻止事件继续传播 -->
<a v-on:click.stop="doSth"></a>

②  .prevent 提交事件不再重载页面

<form @submit.prevent="onSubmit"></form>

③   .stop.prevent 修饰符可以串联

<a @click.stop.prevent="doSth"></a>

④  .prevent  只有修饰符

<form @submit.prevent> </form>

⑤  .capture 添加事件监听器时使用事件捕获模式，即内部元素触发的事件先再次处理，然后才交由内部元素进行处理。

<div @click.capture="doSth" > ... </div>

⑥ .self 只当在event.target是当前元素自身时触发，即事件不是从内部元素触发的。

<div @click.selt="doSth" > ...  </div>

 

 

 

2、双向数据绑定

v-model 指令，将input、 select、checkbox等表单空间元素的值，与data数据绑定，双向绑定顾名思义，在控件的值发生改变时，data上的数据同样也会发生改变。

a）文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

在富文本框中使用，效果也是一样的

<textarea v-model="message" placeholder="add multiple lines"></textarea>

 

 

b）复选框

单个复选框，绑定的就是布尔值，当选中时这个变量就为true，不选的时候就变为False

<input type="checkbox" v-model="checked" >
<label for="checkbox" >{{"???"+checked}}</label>

多个复选框，绑定到同一数组，数组内容对应选中复选框的value。

	<input type="checkbox" id="jack1" value="jack" v-model="checkedNames" />
	<label for="jack">Jack</label>
	
	<input type="checkbox" id="rose1" value="rose" v-model="checkedNames" />
	<label for="rose">Rose</label>
	
	<p>{{'数组0号'+checkedNames[0]}}</p>   //选中时是jack/rose ，不选时是undefined
	<p>{{'数组1号'+checkedNames[1]}}</p>

 

 

c）单选按钮

单选radio,此时v-model绑定的是radio的value值。

	<div id="example">
		<input type="radio" id="one" value="One" v-model="picked" />
		<label for="one"> One </label>
		<br />
		<input type="radio" id="two" value="Two" v-model="picked" />
		<label for="two"> Two </label>
		<br />
		
		<span>Picked: {{ picked }}</span>
	</div>

 

 

d）选择框

选择框在<select>标签使用v-model，此时绑定内容就是option的内容

	<div id="example">
		<select v-model="selected">
			<option selected>请选择</option>
			<option>A</option>
			<option>BB</option>
			<option>CCC</option>
		</select>
		
		<span>Selected:{{selected}}</span>
	</div>
	

复选选择框，此时selected对应的变量是一个数组。

	<div id="example">
		<select v-model="selected" multiple style="width: 100px;">
			<option selected>请选择</option>
			<option>A</option>
			<option>BB</option>
			<option>CCC</option>
		</select>
		
		<span>Selected:{{selected}}</span>
	</div>

 

注意：v-model会忽略元素自带的默认选中属性，如selected、checked、value等。