vue基础中的注意事项，以及一些学习心得 - 好文

vue中你不知道的东西、以及注意事项

*
v-html

*
使用 v-html的时候该指令中的值会覆盖绑定标签中原有的值，且使用v-html的时候不要将他设置为给用户提供内容的地方，因为v-html很容易被XSS攻击

*
v-bind

* 使用v-bind绑定属性值为布尔值的属性时，如果数据为truthy，则该布尔值属性都不会被渲染出来
* 如果数据值为其他任意存在的值，就意味着值为true
*
v-if

*
使用v-if绑定的标签，当其指令值为truthy的时候该标签是直接被删除掉了

*
而当其指令值为其他任意存在的值时，就意味着值为true

*
如果您现在有一个需求是让多个标签都使用v-if，则可以使用template标签，使用该标签包裹需要被一起隐藏或显示的标签，在该标签上绑定v-if即可

* <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p>
</template>
*
v-show

* 和v-if的区别在于v-show是将标签设置为 display:none;的
*
动态参数

*
定义：在v-bind中，被绑定的属性被称之为参数，如 id、class、href、src...

*
用法：使用方括号括起来的js表达式作为指令的动态参数

*

注意事项：在使用动态参数的时候，需要避免使用大写的字符来命名，因为浏览器会把命名强制转换为小写，其次，动态参数有一些语法约束，如空格和引号放在动态参数中是无效的

* <div id="app">  <img v-bind:[attribute]="url">  <br>   <img :[compsrc]="url" alt=""> </div>
<script> const vm = new Vue({ el: '#app', data: { attribute: 'src', url:
'./images/logo-footer.png' }, computed: { // 通过使用计算属性巧妙避开在动态参数中使用引号和空格
compsrc() { return 's' + 'rc' } }, }) </script>
*
vue中复用性的问题

*
因为vue会尽可能高效的渲染元素，通常会复用已有的元素。

*
大家可能以前出现过这样的问题，

*  <template
v-if='isShow'> <label for='number'>账号:</label> <input type="text" id="number">
</template> <template v-else> <label for="username">用户名:</label> <input
type="text" id="username"> </template> <button
@click='btnClick'>切换isShow</button> 
*
解决方案：在input标签中加入一个 key
属性，给该属性命名(字符串or数字)，加以区分即可。但是这不会导致label标签不复用，因为label标签没有key属性。

*
v-for的注意事项：

*
在v-for的语法中其实可以把in代替为of作为分隔符；

*
数组更新检测：

*
变异方法(变异方法就是改变了原数组的方法，即：push,pop,shift,unshift,splice,sort,reverse)，Vue可以监听到数组的变化，并在遍历的时候动态遍历
* 替换方法(替换方法就是生成了新数组的方法，即：filter,concat,slice等等)，当使用替换方法时，可以用新数组替换原来的数组
* 注意事项：当你利用索引直接添加一个数组项时、当你修改数组长度时，Vue不是响应性的
* 解决方法： vm.lists.splice(index,num,newValue) or
Vue.set(vm.lists,index,newValue)
* 对象的变更检测也是如此，不能通过对象名.新属性名去手动添加新属性，但是也可以使用Vue.set(vm.lists,index,newValue)
的方法进行添加。
*
在 <template> 上使用 v-for

* <ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li
class="divider" role="presentation"></li> </template> </ul>
*
v-for与v-if一同使用的问题

* 当这两个指令处于同一个节点，v-for的优先级比v-if的高
* 官方不推荐我们用使用这两个指令，除非你是为了部分项渲染节点时，这种优先级机制就发挥了重要作用
*
在组件中使用v-for的注意事项

*

在有些html元素中，对于哪些元素可以出现在其内部是有严格限制的，例如：p元素中如果有div元素，那么div会被提升到跟p元素外部，所以在进行组件化开发的时候，在使用这些约束条件的元素会有一些问题。

* <table> <blog-post-row></blog-post-row> </table> 
*
解决方法：使用Vue中提供的 is 属性

* <table> <tr is="blog-post-row"></tr> </table>
*
事件处理

* 事件修饰符
*
* once ：绑定的事件只执行一次；可以被使用在组件事件中
* prevent ：阻止默认事件的发生，如超链接的跳转、点击事件的点击
* stop ：阻止冒泡行为的方法（由内到外）
* capture ：让事件进行捕获（由外到内）
* self ：只有当事件该本身元素触发时才发生
* passive ：滚动事件的默认行为（滚动行为）将会立即触发
* 注意：不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，
.passive 会告诉浏览器你不想阻止事件的默认行为。
*
表单输入值绑定

* 修饰符
*
* .lazy ：将 input事件监听（同步更新）转换为 change事件监听（当失去焦点时更新）
* .number ：自动将用户的输入值转为数字类型
* .trim ：自动过滤用户输入的首尾空白字符

热门工具换一换