发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
v-html
使用 v-html的时候该指令中的值会覆盖绑定标签中原有的值,且使用v-html的时候不要将他设置为给用户提供内容的地方,因为v-html很容易被XSS攻击
v-bind
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-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属性。
key
v-for的注意事项:
在v-for的语法中其实可以把in代替为of作为分隔符;
数组更新检测:
vm.lists.splice(index,num,newValue)
Vue.set(vm.lists,index,newValue)
在 <template> 上使用 v-for
<template>
<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的注意事项
在有些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
表单输入值绑定
.lazy
.number
.trim
来自: 行者花雕 > 《待分类》
0条评论
发表
请遵守用户 评论公约
vue3的新知识点
vue3的新知识点。一、初入门通过CDN?<script src="https://unpkg.com/vue@next"></script>通过脚手架Vite? 或者vue-cli搭建。npm init vite-app hello-vue3 # OR yarn create vi...
VUE2.0学习总结
例如数据都要绑定要data属性,方法都要绑定到methods方法实例上的data和methods里面的key值会自动挂载到vue实例上,我们管他们叫动态属...
Vue 超快速学习
vue自定义组件: Vue.component(‘componentName'''''''',{ props:[‘p1’,’p2’], template: ‘<li>{{ p1 }}</li>'''''''...
JavaScript 对象所有API解析【2021版】
// undefinedObject.seal(obj) (ES5)Object.isSeal(obj) (ES5)Object.is(''若川'', ''若川''); // trueObject.is({},{}); // falseObject.is(+0, -0); // false+0 ===...
微信小程序联盟:微信小程序开发总结
const conf = { data:{ title:''正在拼命加载中...'', loadding:true }, onLoad (){ app.fetch(API.hot,{},(err,data) => { }) },三、使...
Vue3 基础难点总结
Vue2.xVue3.import Vue from ''''''''vue''''''''Vue.nextTickVue.observable (用 Vue.reactive 替换)Vue.versionVue.compile (...
vue父子组件状态同步的最佳方式续章(v-model篇)
<template> <div class="myInput"> <input type="text" :value="text" @input="inputHandle"> </div></template><script&g...
为你解读Vue3中的大热门——Composition API
<template> <button @click="increment"> Count is: {{ count }}, double is {{ double }}, click to increment. </button></template><script>import { ref,...
Vue3.0 新特性以及使用变更总结(实际工作用到的)
简单对比vue2.x与vue3.x响应式。// vue2.ximport Vue from ''''''''vue''''''...
微信扫码,在手机上查看选中内容