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">
用对象绑定class
:class="{red:isactive}"
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>
this.$refs.usernameInput.value 可以访问上个input的内容