Vue 总结（1）属性绑定

一.V-on：缩写@

绑定事件监听器

<button v-on:click="doThis"></button>

on后面接着就是事件

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

二. v-bind 缩写：（就一个冒号）

<img v-bind:src="imageSrc">


<img :src="imageSrc">

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

用对象绑定class

:class="{red:isactive}" 
style="{length+'px'}" 引用动态数据length
用isactive的 布尔值来判断，可以写一个事件动态操作这个布尔值


三 v-for

 理解：其实主要用来循环读取 数组内容 然后根据数组的内容来创建数据。
1. eg：car在 数组cars里面  ，好 现在下面循环读取 car里面的内容

<template v-for="car in cars">
	<p>{{car}}</p>			
</template>

new Vue({
    el:".wrap",
    data:{			
 cars:["benz","bmw","aodi"]         
}
})

2.访问 挨个数组项的内部循环内容   一个数组有五个对象，每个对象 又有属性和值

向内部排序是（value,key，index ）in car 【键值键和索引】

1.注意结构循环必须在最外面的里面

2. v-for 和下面获取的元素不可以用同一个标签

3.template 解决标签污染不渲染本身

<div class="wrap">
	<button @click="a"> 插入数据0</button>
		<div title="11" v-for="car in carlist">	
			<p v-for="(vals,keys,ind) in car">
				<span>{{ind}}</span> 			
				<strong>{{keys}}</strong>   
				<span>{{vals}}</span> 				
			</p>		
		</div >
	</div>

	<script>
		new Vue({
			el:".wrap",
			data:{
             carlist:[
		         {name:"benz",price:"100"},
		         {name:"bmw",price:"200"},
		         {name:"aodi",price:"300"}
             	]
			}
		})
	</script>

　四.组件
多个Vue 在一个 js里面就 var XX= new Vue 给定义出来，然后用XX.name 来访问里面的数据

　　接下来就要用到组件作为公共实例对象，下面的所有new出来的对象都可以访问其内容

<body>
   <!-- <greeting ></greeting> -->
<div class="wrap">
 <greeting ></greeting>
</div>

<div class="content">
 <greeting ></greeting>
</div>

<script>
  Vue.component("greeting",{
     template:
    ' <p>  {{name}}   这是tenplate文本内容  <button @click="changeName">更改内容</button>        </p>',
       data:function () {
            return {
               name:"ceshi"
                   }
                      },
       methods:{
         changeName:function () {
        this.name="已更改"
                               }
               }
        })

	var wrap = new Vue({
    el:".wrap",
    data:{
      name:"date1"
    }
	})

  var content  = new Vue({
    el:".content"
  })
</script>

</body>









五.ref

<input ref="usernameInput"></input>

this.$refs.usernameInput.value  可以访问上个input的内容

Vue 总结（1） 属性绑定

Vue 总结（1）属性绑定