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"> <!-- 2.6.0版本新增:动态参数 --> <img v-bind:[attribute]="url"> <!--
这里的attribute写成大写也能有效果,因为浏览器会把该变量名强制转换为小写 --> <br> <!-- <img :['s'+ 'rc']="url"
alt=""> --> <!-- 这种写法在编译时会报错,因为不允许使用引号 --> <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文本框。但是事实总是相反的,原因就在于vue会复用已存在的元素,所以其实根本就没有创建一个新的input文本框
-->
*
解决方案:在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> <!--
这个自定义组件会被提升到tabel之外,最终渲染的样式肯定就出错了 -->
*
解决方法:使用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 :自动过滤用户输入的首尾空白字符