社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
1:引包
2:启动 new Vue({el:目的地,template:模板内容});
options
{{ 表达式 }}
可以用于页面中简单粗暴的调试
注意: 必须在data这个函数中返回的对象中声明
在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx表示
比如在angular中 以ng-xxx开头的就叫做指令
在vue中 以v-xxx开头的就叫做指令
指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值,框架会进行相关DOM操作的绑定
v-text 只能用在双标签中
v-text 其实就是给元素的innerText赋值
v-html 其实就是给元素的innerHTML赋值
v-if 如果值为false,会留下一个<!---->作为标记,万一未来v-if的值是true了,就在这里插入元素
如果有if和else就不需要单独留坑了
如果全用上 v-if 相邻v-else-if 相邻 v-else 否则 v-else-if可以不用
v-if和v-else-if都有等于对应的值,而v-else直接写
v-if家族都是对元素进行插入和移除的操作
v-show是显示与否的问题
注意: 指令其实就是利用属性作为标识符,简化DOM操作,
看:v-model="xxx"
v-model 代表要做什么 xxx代表针对的js内存对象
写在那个元素上,就对哪个元素操作
给元素的属性赋值
语法 在元素上 v-bind:属性名="常量||变量名"
简写形式 :属性名="变量名"
<div v-bind:原属性名="变量"></div>
<div :属性名="变量">
</div>
v-on:事件名="表达式||函数名"
@事件名="表达式"
input v-model="name"
input :value="name"
v-for="item in arr"
v-for="item in obj"
v-for="(item,index) in arr" :class="index"
.red { background-color:red;}
.big { font-size:50px;}
<div :class="{'red':true,'big':true}">又大又红</div>
效果是字体大背景色是红色的div
var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 }
components:{ 组件名:组件对象 }
<组件名></组件名>
Vue.component('组件名',组件对象);
filters:{ 过滤器名:过滤器fn }
最终fn内通过return产出最终的数据{{ 原有数据 | 过滤器名 }}
function(data,argv1,argv2...){}
{{ 数据 | 过滤器名(参数1,参数2) }}
<son v-for="(item,index) in persons" :key="index" ></son>
activated(){ //激活的 keep-alive v-if="true"
console.log('activated')
},
deactivated(){ //停用的 keep-alive v-if="false"
console.log('deactivated')
},
beforeDestroy(){ //销毁前 v-if="false"
console.log('beforeDestroy')
},
destroyed(){//销毁后 v-if="false"
console.log('destroyed')
},
救命稻草, document.querySelector
1: 在template中标识元素 ref=“xxxx”
2: 在要获取的时候, this.$refs.xxxx 获取元素
ref在DOM上获取的是原生DOM对象
ref在组件上获取的是组件对象
写再最后
为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:??1018453829.欢迎大家进群交流讨论,学习交流,共同进步。
有些人对学习充满激情,但是缺少方向,而在浩瀚的知识海洋中看似无边无际,此时最重要的是要知道哪些技术需要重点掌握,避免做无用功,将有限的精力及状态发挥到最大化。
最后祝福所有遇到瓶颈且不知道怎么办的前端程序员们,祝大家在往后的工作与面试中一切顺利。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!