- <div :val="1"></div>,给属性val前面加v-bind,认为值是js表达式,1则认为是数组,要是不加v-bind,认为值是字符串,1则认为是字符串
- 对数组的改变不能使用数组索引,只能用这几个方法:push, pop, shift, unshift, splice
- 模板占位符<template></template>:可以包裹一些元素,在循环的过程中并不会被渲染到页面上
<template v-for="item in list"> <div>{{item}}</div> </template>
- html对象的遍历:v-for = "(item,key) of obj"
- Vue.set()方法等于 实例.$set(),可以改变数组,对象
- H5的规范中表格tbody下写tr,但是模板也是tr,模板要替换原来的tr,标签上增加is属性<tr is="row"></tr>(组合标签增加is)
<body> <div id="app"> <table> <tbody> <tr is="row"></tr> <tr is="row"></tr> <tr is="row"></tr> </tbody> </table> </div> <script> Vue.component("row",{ template:"<tr><td>this is row</td></tr>" }); var app = new Vue({ el:'#app', }) </script> </body>
- 实例化new Vue中data可以是一个对象,其他(例如组件)中data必须是一个函数,并且有返回对象,子组件多个地方调用,值不会互相影响
Vue.component("row",{ data:function(){ return { content:"this is row" } }, template:"<tr><td>{{content}}</td></tr>" });
- 标签中ref(引用)属性:在原生标签中(例如:<div ref="one"></div>),通过this.$refs.one获取的是dom元素,若是在组件标签中使用(例如:<item ref="two"></item>),通过this.$refs.two获取的是组件的引用
- 组件上使用原生事件,给事件上加native修饰符,否则组件上的事件被认为自定义事件
<body> <div id="app"> <child @click.native = "handleClick"></child> </div> <script> Vue.component("child",{ template:"<div>aaa</div>" }); var app = new Vue({ el:'#app', methods:{ handleClick:function(){ alert(11); } } }) </script> </body>
- 动态组件<component :is="type"></component>,只需要动态的改变type值为组件名称(例如组件名为child-one),可以切换对应的组件(component是vue自带的标签),type值改变后,对之前的组件销毁,对新的组件重新生成,耗性能,不建议使用
- 多个组件之间来回切换使用v-if,可以在每个组件的template中增加v-once,即使上个组件隐藏了,也不会销毁,会放到内存中,下次使用从内存中取,提高性能(例如:template:`<div v-once>aaa</div>`)
转载于:https://www.cnblogs.com/feiyangyao/p/11161230.html