some方法使用,只要有一个符合条件就返回true
界面跳转☆
every的使用,foreach的使用
父子组件传参
首先是在点击删除按键时,触发组件的delCartConfirm函数,动态修改modal组件是否显示的一个bool变量modalConfirm,使他为true,这时,父组件modal把true通过prop传递给子组件,然后子组件中的div就增加了显示的class,当点击子组件的关闭按键时,监听的点击唤醒了closeModal函数,通过emit从子组件中调用父组件的close对应的函数,从而再动态修改modalConfirm为false。
<div class="item-price-total">{{(item.productNum*item.productPrice)|currency}}</div><!--添加了过滤器-->
//定义局部过滤器
filters:{
currency(value){
if(!value) return 0.00;
return '¥'+value.toFixed(2)+'元';
}
},
直接把这个当做接口,虽然没有用到数据库,但是写的代码方式是一样的。
因为使用了vueaxios,所以不用再到每个地方都用import axios,直接使用即可。
public是整个项目的静态资源,可以把imgs放进去
本次课是对组件的拆分,接下来进行组件间的交互
component里存放组件(组件一般用大写命名)
assets里存放计算资源css、img等
pages自己创建,放置网页(组件一般用小写的命名):其实也是组件,都是vue文件
然后再main.js中导入插件(import)
import axios from 'axios'//用于发请求
import VueAxios from 'vue-axios'//用于将vue和axios结合起来
router.js用于搞页面路由(暂时不动懂)从a跳转到b
App.vue是根目录
export default 中的name是组件的名字
16.26前完成框架的搭建
(配置一些端口啥的)vue.config.js和babel那个文件雷同,遵循com规范?
安装脚手架:
npm install -g @vue/cli 全局安装
Node环境安装和配置
vue3.0变化
vue3.0特性
组件版本介绍
forEach:不能链式调用,循环中进行修改操作,会修改原有的数组;
map:不会修改原有数组,map()会返回一个新数组。
要灵活运用已学知识,computed!
单页应用本质是页面组件的替换,并没有真正地跳转页面。
单页应用不利于SEO,搜索引擎搜索不到。
computed使用:
当其依赖的属性的值发生变化时,计算属性会重新计算,反之,则使用缓存中的属性值。
另一个前提是computed里的值必须要在模板中使用,才可以触发computed的更新。
不推荐修改自身的props,会将值写死,导致父级无法再改变该属性的值。
this.$emit("close") :
触发父级的close事件,
等价于this.$emit("click"),
本质上是触发父级的click事件,只是给click起了一个有意义的别名close
v-on:click 可以简写为 @click
v-bind:class="{xxxx: true/false, yyyy: true/false}"
class绑定的是一个对象。
箭头函数没有作用域,this依然指向vue对象。如果是function,this会指向function自身。
this.axios.get("").then(() => {
this.xxx; // this的指向没有变
});
v-bind:key,key用于缓存标签组件,提高性能。
mastache语法只可以放在标签内,不可以直接放在属性里,例如:
img src="{{url}}"这是错误的,这样用v-bind绑定才可以使用
mastache语法是可以用表达式,也可以使用methods中的方法 语法为:{{getclass()}}
在VSCode中,Ctrl + Shift + P 呼出命令面板 Command Palette
export default{ name:'xxxxxxx' }
vue中组件name的作用:https://zhuanlan.zhihu.com/p/225164488?utm_source=wechat_session
1、项目中有用到keep-alive时,name可以用作include和exclude的值。
2、递归组件。
3、vue-tools调试。
pubilc文件夹属于根目录,存放全局静态资源,访问相关资源用绝对路径【/】直接访问。
访问其他文件夹使用相对路径的访问方式【./】。
SPA项目=单页应用 Single Page Application
vue生命周期:
1、初始化
-new Vue()
-初始化内置的事件(click等事件)和生命周期钩子函数
……beforeCreate
-初始化默认事件绑定(click等事件)和数据变量监听
……created
-是否有el对象(#app)
-是否有template对象
-通过loader编译模板和指令
……beforeMount
-将虚拟dom的内容插入到真实dom中并进行渲染,并将$el挂载到vm上
……mounted
2、更新数据
-数据发生变化
……beforeUpdate
-对比虚拟dom,生成patch并将差异存入,用patch重新渲染真实dom
……updated
3、删除
-调用vm.$destory()
……beforeDestory
-卸载观察器、子组件以及事件监听器
……destoryed
data:{} // 全局变量
data(){return {name:"test"};} // 局部变量
vue是组件,而不是页面。
一个页面包含很多vue组件。
一个大的vue组件也可以包含很多小的vue组件,每个组件都有自己单独的生命周期。