一.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="{width: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的内容
转载于:https://www.cnblogs.com/nice2018/p/10036177.html
