weixin_42914989的博客

Vue计算属性使用reduce方法实现遍历在前端页面中要实现一个商品购物车的遍历来计算出总价格，很多小伙伴都会想到用循环，可是这样编写的代码语句过于臃肿，下面我们来学习一下reduce方法实现遍历计算出商品总价格。02、未登录购物车：选中商品在页面中，每个购物车商品左侧，都有一个复选框，用户可以选择部分商品进行下单，而不一定是全部：我们定义一个selected变量，记录所有被选中的商品：选中一个我们给商品前面的复选框与selected绑定，并且指定其值为当前购物车商品：初始化全选我们在

Vue 父路由和子路由以黑马项目二leyou商城的前端界面为例我们在访问localhost:9001时候首先会进入index.html和读取main.jsmain.js里面包含了new Vue（{}）,我们看一下里面参数：router。router是路由，负责把数据渲染#app的元素上的< template>寻着线索我们再来打开router.js文件首先看到的是下图的routesroutes是一个路由数组，里面可以设置需要映射的路径。父路由访问localhost:9001/

文章目录Vue 进阶语法和生命周期16、Vue：生命周期【了解】17、Vue：computed计算属性18、Vue：watch监控属性Vue 进阶语法和生命周期a. 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 根Root实例 开始的:// 创建Vue实例var vue = new Vue({ // 选项对象});b. 当创建一个 Vue 实例时，你可以传入一个选项对象, 选项对象包括(例举):DOM (视图):el: 渲染的html元素template:

文章目录Vue基础语法05、Vue：插值表达式06、Vue：数据绑定指令07、Vue：属性绑定指令08、Vue：事件处理之事件指令09、Vue：事件处理之事件修饰符（了解）10、Vue：事件处理之按键修饰符11、Vue：数据迭代指令11.1 迭代数组11.2 迭代对象11.3 迭代对象数组12、Vue：v-text&v-html指令13、Vue：v-if&v-show指令14、Vue：条件指令Vue基础语法05、Vue：插值表达式语法: {{数据对象中的属性|运算表达式}}dem

Vue 安装及入门01、前端开发模式发展静态页面(html)最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。异步刷新(Ajax)1995年，网景工程师Brendan Eich花了10天时间设计了JavaScript语言.随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。Ajax盛行：2005年开始，ajax逐渐被前端开发人员所重视

Vue全局注册中的kebab-case和PascalCase全局注册全局注册的组件，可以用在所有的 Vue 实例 (new Vue) 中。语法:# 第一种方式Vue.component('组件名称', { /* ... */ })# 第二种方式Vue.component('组件名称', 组件对象);定义组件名:使用 kebab-case（短横线命名）Vue.component('my-component-name', { /* ... */ })当使用 kebab

文章目录Vue组件通信1.应用场景2.父向子通信示例一：更改引用组件中的普通属性数据示例二：更改引用组件中的数组对象数据3.子向父通信示例执行流程效果Vue组件通信1.应用场景在我们日常开发过程中有很多页面都会结合组件开发，以导航栏为例，可以在引用导航拦组件的时候进行进行组件通信，设置相应的参数得到相应的页面效果，达到灵活化开发的目的。2.父向子通信通过 Prop 向子组件传递数据语法:// 定义组件: 组件属性(定义父组件需要传递过来的属性)props : { // P