网站做rss+wordpress,wordpress动漫插件,现在中国空间站有几个人,树莓派用wordpressVue2 学习第二天
1. 数据绑定
Vue 中有 2 种数据绑定的方式#xff1a;
单向绑定(v-bind)#xff1a;数据只能从 data 流向页面。双向绑定(v-model)#xff1a;数据不仅能从 data 流向页面#xff0c;还可以从页面流向 data。 备注#xff1a; 双向绑定一般都应用在表单…Vue2 学习第二天
1. 数据绑定
Vue 中有 2 种数据绑定的方式
单向绑定(v-bind)数据只能从 data 流向页面。双向绑定(v-model)数据不仅能从 data 流向页面还可以从页面流向 data。 备注 双向绑定一般都应用在表单类元素上如input、select等改变 input 视图自动发生变化v-model:value 可以简写为 v-model因为**v-model默认收集的就是value**值。 templatediv idwrapper!-- button v-on:clicktoggletoggle/button --!-- p v-ifisShowhello world/p --p v-ifscore 100满分/pp v-else-ifscore 60及格/pp v-else不及格/p!-- v-show通过控制css中的display:none来隐藏元素 --span v-showisShow当前的分数是{{ score }}/spanbr /!-- v-model可以自动的做双向绑定改变input视图自动发生变化 --input typetext v-modelscore /button clickhandleClick控制分数显示/button/div
/templatescript
export default {data() {return {isShow: true,score: 0,};},methods: {toggle() {this.isShow !this.isShow;},handleClick() {this.isShow !this.isShow;},},
};
/scriptstyle/style2. v-for 循环
v-for可以通过这个语法糖在模板中对 data 中的数组进行遍历。
就是一个循环一个标签会送你一个item和index。
templatediv idwrapperdiv classbox!-- v-for就是一个循环一个标签会送你一个item和index --div v-for(item, index) in songList :keyindex classitem!-- 属性前面加上:代表了动态属性里面可以传入变量 --img :srcitem.imgUrl alt /div{{ item.imgName }}/div!-- 事件传参我们可以将item传入事件 --button clickdeleteItem(item)点我删除/button/div/div/div
/templatescript
export default {name: VFor,data() {return {songList: [{imgUrl: https://p1.music.126.net/JcpOXM243FptA9tRYnPFlw/109951167423159409.jpg,imgName: 歌曲1,},{imgUrl: https://p1.music.126.net/-3hoO4QAO81HZ4gax4SMBw/109951167692147226.jpg,imgName: 歌曲2,},{imgUrl: https://p1.music.126.net/xJzCcsYiMUAWtwBMKj7IBg/109951167930323816.jpg,imgName: 歌曲3,},],};},methods: {// 将点击的项给删除deleteItem(item) {// filter方法筛选数组找到名字和当前项不一样的返回this.songList this.songList.filter((song) {return song.imgName ! item.imgName;});},},
};
/scriptstyle scoped
#wrapper {width: 100vw;
}.box {width: 300px;height: 300px;border: 1px solid #ccc;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;margin: 0 auto;
}.item {flex: 1;height: 100px;display: flex;flex-direction: column;align-items: center;
}.item img {width: 50px;height: 50px;
}
/style3. class 和 style
可以通过以下方式设置样式
字符串设置对象设置数组设置
templatediv!-- 字符串设置 --div :classcurrent ? active : hello world/div!-- 数组设置 --!-- 使用三元表达式设置class --div :classactive ? [active, box] : box/divbutton clickactiveBox激活box/button!-- 使用对象去设置样式 --div:style{opacity: opacity,width: 100px,height: 100px,background: red,}classtest/divinput typerange v-modelopacity :step0.1 :min0 :max1 //div
/template4. 生命周期
Vue 生命周期总结四个阶段八个钩子函数生命周期就是组件或者实例从创建到被销毁初始化化数据、编译模板、挂载 DOM、渲染一更新一渲染、卸载的一系列过程。 生命周期 又名生命周期回调函数、生命周期函数、生命周期钩子。 是什么Vue 在关键时刻帮我们调用的一些特殊名称的函数。 生命周期函数的名字不可更改但函数的具体内容是程序员根据需求编写的。 生命周期函数中的 this 指向是 vm 或 组件实例对象。 总结生命周期 常用的生命周期钩子 mounted: 发送 ajax 请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。 beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。 关于销毁 Vue 实例 销毁后借助 Vue 开发者工具看不到任何信息。 销毁后自定义事件会失效但原生 DOM 事件依然有效。 一般不会在beforeDestroy操作数据因为即便操作数据也不会再触发更新流程了。
