1.购物车案例
注意点:定义属性名和方法名不能一样
change:直接修改checkbox的值 数组的方法some，every，forEach，map- forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。
- every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
- some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
-
map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
2.组件
组件化:通常指的是样式（轮播图，tab，列表区域）
模块化:通过指的是效果(弹框)
组件:每一个vue实例对象(可复用的vue实例)
组件的定义以及使用
// 组件：全局定义组件 可复用的vue实例
// 局部定义
// 全局定义组件 语法:Vue.component(组件名称,{模板对象})
// 组件命名规范:1.采用驼峰方式命名，页面使用的时候需要把大写字母转为连字符+字母,目的为了方便调用
// 2.采用小写命名方式，直接在页面使用即可<vone></vone>
// 3.不能以现有的标签名作为组件名
// 组件中的data定义:1.data必须是方法 2.方法必须有返回值 3.返回值必须是对象类型
// 如果使用data中的数据:在组件中声明的数据需要在组件的模板中使用
// 组件中还可以有的配置项；data，methods，filter，computed，watch，生命周期的钩子函数....
3.template
// 组件中的模板对象：有且只能有一个根元素 // template使用: 位置:放到body的结束标签上面,给当前的模板标签添加id，同时把id赋值给组件的template
4.data
data为什么在组件中是函数方式定义?
目的是为了实现数据共享而数据互相不影响 注意点: 1.data必须函数 2 必须有返回值 3返回值必须是对象
5.后台案例
原始代码参考:06.后台1.html
抽离代码参考：06.后台1 copy.html
6.脚手架
1.全局安装webpack npm install webpack -g 2.全局安装vue-cli npm install vue-cli -g 以上两步只需要安装一次 下面就是创建项目 3.vue init webpack demo 项目名称为小写名字即可 这是创建vue2.0项目 4.cd demo 进入创建的文件中 5.npm run dev 启动项目 //淘宝镜像 npm i -g cnpm --registry=https://registry.npm.taobao.org
1.当前文件夹中不能有vue.js文件，如果有安装脚手架会报错
项目安装
1.安装脚手架完成
2.清空工作
3.创建每一个组件(后台页面)
- componets
- header.vue
- footer.vue
- main.vue
APP.vue中
<template>
<div class="box">
<v-header></v-header>
<v-main></v-main>
<v-footer></v-footer>
</div>
</template>
<script>
import vHeader from './components/header'
import vMain from './components/main'
import vFooter from './components/footer'
export default {
components: {
vHeader,
vMain,
vFooter
}
}
</script>
<style scoped>
.box{
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
</style>
在main.js中引入静态资源
// 引入静态资源
import './assets/css/reset.css'
//创建公共组件
import vDel from './components/del.vue'
Vue.component('vDel',vDel)