【vuejs】1/5vue 学习笔记
代码：
***************************
es6复习以及vue入门
### 准备开始
------
#### 学员反馈
下午感觉要起飞了,给我们点时间练一下
保留最终解释权
晕晕乎乎的一天就过去了
保留最终解释权
1.后端代码的抽取感觉还可以，前端代码抽取懵，关于哪个需要依赖、注入，哪个不需要依赖、注入，不懂？
```
输入服务 是需要使用的时候
配置期 config -> 可以注入供应商服务对象，对于具体服务进行配置
运行期 非config都算是运行期
service/factory(通过return 返回任意类型对象)/controller/derective/filter
以上都可以用来注入服务对象（service/factory）
如何区分是否能依赖注入
形参名基本以$开头
//根据顺序来的
link:function(scope,element,attrs)
```
2.自己建了一个服务器，数据库，可是这个项目还是不知道从哪开始敲起
看需求有哪些页面，配置路由显示页面，根据API接口完成页面上的动态数据交互
3.webpack-dev-server 再讲一下吧，还是不太懂
工具，在学校的时候，要掌握的东西是重点学习的东西，而不是工具
在企业开发中，遇上了相关问题，再去看看别的东西
让大家不用去关注除了主核心以外的东西
--inline --hot --open --port 9999
老师,能不能给点时间练练
保留最终解释权
黑马岳父, angular飞晕了, node飞丢了, vue稍微稳点飞, vue是最后的杀手锏了, 也是唯一能吹牛的资本了
```
1:主要学习的是VUE，快速进入VUE让大家体会VUE的使用
2:webpack前端构建构建，前期铺垫基本使用，后面看到不晕
3:在做完项目以后，模拟项目开发的真实打包，区分打包的意义所在(webpack)
```
#### 复习
- webpack属性配置
```javascript
const path = require('path')
module.exports = {
entry:{ main是默认入口,也可以是多入口
main:'./src/main.js'
},
出口
output:{
filename:'./build.js', 指定js文件
path: path.join(__dirname,'..','dist',) 最好是绝对路径
代表当前目录的上一级的dist
},
module:{
一样的功能rules: webpack2.x之后新加的
loaders:[ require('./a.css||./a.js')
{test:/\.css$/,
loader:'style-loader!css-loader',
顺序是反过来的2!1
},
{
test:/\.(jpg|svg)$/,
loader:'url-loader?limit=4096&name=[name].[ext]',
顺序是反过来的2!1
[name].[ext]内置提供的，因为本身是先读这个文件
options:{
limit:4096,
name:'[name].[ext]'
}
}
]
},
plugins:[
插件的执行顺序是依次执行的
new htmlWebpackPlugin({
template:'./src/index.html',
})
将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录
]
}
```
#### 今日重点
- 运行起来Vue
- vue常用指令
- 组件的使用
### es6
------
#### webpack-ES6的处理
- ES6的模块,vue本身默认支持es6的模块导入导出
- babel
- babel-loader(内部依赖babel-core)
- 关键字(presets es2015)
- 函数(plugins babel-plugin-transform-runtime)
#### ES6中的模块
- 默认
- 导入`import [,..xxx] [,..from] './xxx.ext'`
- 导出 `export default obj;`
- 声明式
- 1导出 `export var obj = xxx;`
- 2导出 `export var obj2 = {};`
- 3单独导出 ` export {stu};`
- 导入 `import {obj,obj2,stu} from './xxx.js'; 直接使用obj`
- 全体
- 默认导出和声明式导入在使用上的区别
- 要注意，声明式导入的时候，必须{名称} 名称要一致（按需导入)
- 默认导入，可以随意的使用变量名
```javascript
{
default:"我是默认导出的结果"
import xxx from './cal.js'会获取到整个对象的default属性
obj1:"我是声明式导出1"
obj2:"我是声明式导出2"
obj3:"我是声明式导出3" import {obj1,obj2}
obj4:"我是声明式导出4"
}
import * as allObj from './cal.js'; 获取的就是一整个对象
```
- import 和export一定写在顶级，不要包含在{}内
#### ES6中的代码变化
- 对象属性的声明
```javascript
var name = 'abc';
var person = {name}; 简写-> var person = {name:name};
声明函数
var cal = {
add:function(){
return 1;
},
add2(){
return 2;
},
add3:funtion(n1,n2){
return n1 + n2;
},
add4(n1,n2){ 干掉了function
return n1 + n2;
}
}
```
- 当属性的key和变量的名相同,而要使用变量的值做value,
- 就可以简写{name}->{name:name}
- es6中的函数声明
- 就是干掉了:function add(){ }
#### vue单文件方式
- 单文件就是以*.vue结尾的文件。最终通过webpack也会编译成*.js在浏览器运行
- 内容： + +
- 1:template中只能有一个根节点 2.x
- 2:script中 按照 export default {配置} 来写
- 3:style中 可以设置scoped属性，让其只在template中生效
#### 以单文件的方式启动
- webpack找人来理解你的单文件代码
- vue-loader,vue-template-compiler,代码中依赖vue,
- 启动命令
- `..\\node_modules\\.bin\\webpack-dev-server --inline --hot --open`
#### vue介绍
- 2014年诞生,2013年react,09年angularjs
- 作者 尤雨溪
- 核心概念: 组件化 双向数据流 (基于ES5中的defineProperty来实现的),IE9才支持
- angular核心： 模块化 双向数据绑定(脏检测:一个数组（$watch）)
- 开发一个登陆的模块，登陆需要显示的头部、底部、中部
- 组件:组合起来的一个部件（头部、底部、中部）
- __细分代码__
- 头部: 页面、样式、动态效果
- 代码: template style script
- 框架对比，建议学完vue再看
- https://cn.vuejs.org/v2/guide/comparison.html#React
#### 数据流
- 1向：js内存属性发生改变，影响页面的变化
- 1向：页面的改变影响js内存属性的改变
#### vue中常用的v-指令演示
- 常用指令
- v-text 是元素的innerText只能在双标签中使用
- v-html 是元素的innerHTML，不能包含
- v-if 元素是否移除或者插入
- v-show 元素是否显示或隐藏
- v-model 双向数据绑定，v-bind是单向数据绑定(内存js改变影响页面)
#### class结合v-bind使用
- 需要根据可变的表达式的结果来给class赋值，就需要用到v-bind:class="xxx"
- v-bind:属性名="表达式"，最终表达式运算结束的结果赋值给该属性名
- 简化的写法是: `:属性名="表达式"`
- class:结果的分类
- 一个样式: 返回字符串(三元表达式和key和样式的清单对象)
- 多个样式：返回对象(样式做key，true或flase做值)
#### methods和v-on的使用
- 绑定事件的方法
- `v-on:事件名="表达式||函数名"`
- 简写: `@事件名="表达式||函数名"`
- 函数名如果没有参数，可以省略() 只给一个函数名称
- 声明组件内函数，在export default这个对象的根属性加上methods属性，其是一个对象
- key 是函数名 值是函数体
- 在export default这个对象的根属性加上data属性，其是一个函数，返回一个对象
- 对象的属性是我们初始化的变量的名称
- 凡是在template中使用变量或者函数，不需要加this
- 在script中使用就需要加上this
#### v-for的使用
- 可以使用操作数组 (item,index)
- 可以使用操作对象 (value,key,index)
- key 是类似trank by 的一个属性
- 为的是告诉vue，js中的元素，与页面之间的关联，当识图删除元素的时候，是单个元素的删除而不是正版替换，所以需要关联其关系，设置(必须,性能)
- 2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
#### 漂亮的列表
#### 父子组件使用
- 父和子，使用的是父，被用的是子
- 父需要声明子组件，引入子组件对象，声明方式如下
```javascript
import 子组件对象 from './xxx.vue';
{
components:{
组件名:子组件对象
}
}
```
- 全局组件，使用更为方便，不需要声明，直接用
- 在main.js中引入一次，在main.js中使用 `vue.component('组件名',组件对象);`
- 所有的组件就可以直接通过组件名，使用
#### 父传子
- 父组件通过子组件的属性将值进行传递
- 方式有2:
- 常量: prop1="常量值"
- 变量: :prop2="变量名"
- 子组件需要声明
- 根属性props:['prop1','prop2']
- 在页面中直接使用{
{prop1}}
- 在js中应该如何使用prop1？ this.prop1获取
#### 看文档的对象分类
- 1:全局的代表Vue.的
- 2:实例的代表this.或者new Vue().
- 3:选项代表 new Vue() 的参数
- 或者 export default里边的属性
#### 子向父组件通信（vuebus）(扩展)
- 通过new Vue()这样的一个对象，来$on('事件名',fn(prop1,pro2))
- 另一个组件引入同一个vuebus, 来$emit('事件名',prop1,pro2)
#### 总结
- -1 : 已经存在node_modules包，已经存在package.json和webpack.config.js文件
- 1: 创建index.html,看看其所在文件和webpack.config.js文件中描述的关系
- 2: 在index.html div->id->app
- 3: 创建main.js,看看其所在文件和webpack.config.js文件中描述的关系
- 4: 在main.js中引入vue,和相关组件对象
- 5: new Vue(选项options) , 目的地el 渲染内容 render:c=>c(App) 渲染App的内容
- 6: 编写app.vue
- template 在2.x以后只能有一个根节点
- script 格式是export default { 选项options}
- style 加上scoped（范围的）之后，样式只对当前模板有效
- 7: 可能使用组件或者使用函数或者接受参数
- options(根属性):
- data 是一个函数,return一个对象
- methods 是一个对象,key是函数名,value是函数体
- components 是一个对象,key是组件名,值是组件对象
- props 是一个数组,元素是多个接受的参数
- 8: 套路总结
- 凡是在上边可以使用的东西
- 在下边就可以使用，通过this.
- 9:启动
- 进入到webpack.config.js 和package.json文件同在的目录中启动命令行
- 输入: 正在编码: npm run dev
- 报错: 检查命令所执行的../ 上级,是否存在node_modules目录及相关文件是否存在
- 输入: 代码编写完毕，提交到公司 : npm run build
#### 过滤器
#### 获取元素
#### vue构建方式vue预习
### 准备开始
------
#### 学员反馈
vue的环境好难弄
老师，node_modules？？？？？
东西多记不住，老师能串联着大概说下吗……
render: c => c(App)这是啥，babel->语法转换器，转换ES6/7、react、 options: {presets: ['es2015'], plugins: ['transform-runtime'] }这是啥，
车速有点快啊，之前上自习的人表示追不上车了，你们下坡下的太快了(o@.@o)(o@.@o)
迷迷糊糊，只能晚上回去梳理一遍
老师很仔细!
好
父子组件之间通信规则不太清楚,
父向子 -> 自定义指令给属性传值 通过事件触发 -> 只能是同一个对象的事件监听和触发 $emit
vue bus 同一辆车在不同的地方使用($on/$emit)
讲的太快，接受不了。
#### 复习
- vue步骤
- index.html 单页应用程序的显示部分 127.0.0.1
- 由于我们使用了html-webpack-plugin插件， 引入的script都不需要些了
-
- 入口js main.js
- 引入 Vue 、VueRouter，配置路由规则(创建对象),创建Vue实例对象,给其进行options配置
- vue文件注意事项
- template 1根 script data是函数返回对象 style scoped范围生效
- options:
- template:html片段，可以包含{
{text}}
- data:(在new Vue的时候是对象，在组件内是函数)
- 构建Vue实例 router: 配置路由
- el: 指定元素('#app')
- 1:判断是字符串还是DOM元素
- 2: 也可以获取到该dom元素直接作为el的值,性能能提升一点
- 组件options
- data是一个函数，返回一个对象
- methods是一个对象,其key是函数名，value是函数体
- 在模板中直接使用函数名，在js部分使用this.函数名
- props:是一个数组,`['xxx','abc']`
- 在模板中直接使用，在js部分通过this.$props.xxx使用
- components:是一个对,声明组件内引用的子组件
- 引入、声明、使用
- filters:是一个对象,其过滤器名称对应的函数，接受一个value，最终返回一个value
- 生命周期：created模板还未生成、发起请求获取数据,不能操作DOM
- mounted: 数据已经装载到模板上，操作DOM
- mounted 元素上有ref="name" ,在钩子函数中this.$refs.name操作DOM元素
- 实例(vm/this(VueComponent对象))事件
- $emit/$on/$once/$off()
- 实例属性
- $props,$parent,$children,$refs
- 全局函数
- Vue.use(param) 安装插件 param需要实现install函数 接受一个Vue，可以在Vue的原型上挂载属性，后期组件内通过this.就可以拿到该数据，在所有组件中使用
- 单文件 Vue.component(名称,组件对象)
- 引包 Vue.component(名称,options)
- Vue.filter(过滤器名,function(value){ return value; } )
- 生僻指令
- :key 当DOM列表中删除某一个元素 ，更优化的方案是直接删除这一个DOM元素
- Vue就需要辨识你删除的数组中的元素与DOM中那个元素的对应关系
- 如果不指定key,vue也会去计算，把对象计算出一个唯一标识，相对损耗性能
- 我们来通过key告知vue,这个元素的标识就是obj.id index,可以很好的提升性能
- v-on:事件 @事件=
- v-bind:属性 :属性=
- 路由使用
- 使用步骤
- 1:下载
- 2: 引入对象
- 3: 安装插件
- 4: 创建路由对象配置路由规则
- 5: 配置进vue实例对象的options中
- 6: 留坑
### 准备开始
------
#### 学员反馈
下午感觉要起飞了,给我们点时间练一下
保留最终解释权
晕晕乎乎的一天就过去了
保留最终解释权
1.后端代码的抽取感觉还可以，前端代码抽取懵，关于哪个需要依赖、注入，哪个不需要依赖、注入，不懂？
```
输入服务 是需要使用的时候
配置期 config -> 可以注入供应商服务对象，对于具体服务进行配置
运行期 非config都算是运行期
service/factory(通过return 返回任意类型对象)/controller/derective/filter
以上都可以用来注入服务对象（service/factory）
如何区分是否能依赖注入
形参名基本以$开头
//根据顺序来的
link:function(scope,element,attrs)
```
2.自己建了一个服务器，数据库，可是这个项目还是不知道从哪开始敲起
看需求有哪些页面，配置路由显示页面，根据API接口完成页面上的动态数据交互
3.webpack-dev-server 再讲一下吧，还是不太懂
工具，在学校的时候，要掌握的东西是重点学习的东西，而不是工具
在企业开发中，遇上了相关问题，再去看看别的东西
让大家不用去关注除了主核心以外的东西
--inline --hot --open --port 9999
老师,能不能给点时间练练
保留最终解释权
黑马岳父, angular飞晕了, node飞丢了, vue稍微稳点飞, vue是最后的杀手锏了, 也是唯一能吹牛的资本了
```
1:主要学习的是VUE，快速进入VUE让大家体会VUE的使用
2:webpack前端构建构建，前期铺垫基本使用，后面看到不晕
3:在做完项目以后，模拟项目开发的真实打包，区分打包的意义所在(webpack)
```
#### 复习
- webpack属性配置
```javascript
const path = require('path')
module.exports = {
entry:{ main是默认入口,也可以是多入口
main:'./src/main.js'
},
出口
output:{
filename:'./build.js', 指定js文件
path: path.join(__dirname,'..','dist',) 最好是绝对路径
代表当前目录的上一级的dist
},
module:{
一样的功能rules: webpack2.x之后新加的
loaders:[ require('./a.css||./a.js')
{test:/\.css$/,
loader:'style-loader!css-loader',
顺序是反过来的2!1
},
{
test:/\.(jpg|svg)$/,
loader:'url-loader?limit=4096&name=[name].[ext]',
顺序是反过来的2!1
[name].[ext]内置提供的，因为本身是先读这个文件
options:{
limit:4096,
name:'[name].[ext]'
}
}
]
},
plugins:[
插件的执行顺序是依次执行的
new htmlWebpackPlugin({
template:'./src/index.html',
})
将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录
]
}
```
#### 今日重点
- 运行起来Vue
- vue常用指令
- 组件的使用
### es6
------
#### webpack-ES6的处理
- ES6的模块,vue本身默认支持es6的模块导入导出
- babel
- babel-loader(内部依赖babel-core)
- 关键字(presets es2015)
- 函数(plugins babel-plugin-transform-runtime)
#### ES6中的模块
- 默认
- 导入`import [,..xxx] [,..from] './xxx.ext'`
- 导出 `export default obj;`
- 声明式
- 1导出 `export var obj = xxx;`
- 2导出 `export var obj2 = {};`
- 3单独导出 ` export {stu};`
- 导入 `import {obj,obj2,stu} from './xxx.js'; 直接使用obj`
- 全体
- 默认导出和声明式导入在使用上的区别
- 要注意，声明式导入的时候，必须{名称} 名称要一致（按需导入)
- 默认导入，可以随意的使用变量名
```javascript
{
default:"我是默认导出的结果"
import xxx from './cal.js'会获取到整个对象的default属性
obj1:"我是声明式导出1"
obj2:"我是声明式导出2"
obj3:"我是声明式导出3" import {obj1,obj2}
obj4:"我是声明式导出4"
}
import * as allObj from './cal.js'; 获取的就是一整个对象
```
- import 和export一定写在顶级，不要包含在{}内
#### ES6中的代码变化
- 对象属性的声明
```javascript
var name = 'abc';
var person = {name}; 简写-> var person = {name:name};
声明函数
var cal = {
add:function(){
return 1;
},
add2(){
return 2;
},
add3:funtion(n1,n2){
return n1 + n2;
},
add4(n1,n2){ 干掉了function
return n1 + n2;
}
}
```
- 当属性的key和变量的名相同,而要使用变量的值做value,
- 就可以简写{name}->{name:name}
- es6中的函数声明
- 就是干掉了:function add(){ }
#### vue单文件方式
- 单文件就是以*.vue结尾的文件。最终通过webpack也会编译成*.js在浏览器运行
- 内容： + +
- 1:template中只能有一个根节点 2.x
- 2:script中 按照 export default {配置} 来写
- 3:style中 可以设置scoped属性，让其只在template中生效
#### 以单文件的方式启动
- webpack找人来理解你的单文件代码
- vue-loader,vue-template-compiler,代码中依赖vue,
- 启动命令
- `..\\node_modules\\.bin\\webpack-dev-server --inline --hot --open`
#### vue介绍
- 2014年诞生,2013年react,09年angularjs
- 作者 尤雨溪
- 核心概念: 组件化 双向数据流 (基于ES5中的defineProperty来实现的),IE9才支持
- angular核心： 模块化 双向数据绑定(脏检测:一个数组（$watch）)
- 开发一个登陆的模块，登陆需要显示的头部、底部、中部
- 组件:组合起来的一个部件（头部、底部、中部）
- __细分代码__
- 头部: 页面、样式、动态效果
- 代码: template style script
- 框架对比，建议学完vue再看
- https://cn.vuejs.org/v2/guide/comparison.html#React
#### 数据流
- 1向：js内存属性发生改变，影响页面的变化
- 1向：页面的改变影响js内存属性的改变
#### vue中常用的v-指令演示
- 常用指令
- v-text 是元素的innerText只能在双标签中使用
- v-html 是元素的innerHTML，不能包含
- v-if 元素是否移除或者插入
- v-show 元素是否显示或隐藏
- v-model 双向数据绑定，v-bind是单向数据绑定(内存js改变影响页面)
#### class结合v-bind使用
- 需要根据可变的表达式的结果来给class赋值，就需要用到v-bind:class="xxx"
- v-bind:属性名="表达式"，最终表达式运算结束的结果赋值给该属性名
- 简化的写法是: `:属性名="表达式"`
- class:结果的分类
- 一个样式: 返回字符串(三元表达式和key和样式的清单对象)
- 多个样式：返回对象(样式做key，true或flase做值)
#### methods和v-on的使用
- 绑定事件的方法
- `v-on:事件名="表达式||函数名"`
- 简写: `@事件名="表达式||函数名"`
- 函数名如果没有参数，可以省略() 只给一个函数名称
- 声明组件内函数，在export default这个对象的根属性加上methods属性，其是一个对象
- key 是函数名 值是函数体
- 在export default这个对象的根属性加上data属性，其是一个函数，返回一个对象
- 对象的属性是我们初始化的变量的名称
- 凡是在template中使用变量或者函数，不需要加this
- 在script中使用就需要加上this
#### v-for的使用
- 可以使用操作数组 (item,index)
- 可以使用操作对象 (value,key,index)
- key 是类似trank by 的一个属性
- 为的是告诉vue，js中的元素，与页面之间的关联，当识图删除元素的时候，是单个元素的删除而不是正版替换，所以需要关联其关系，设置(必须,性能)
- 2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
#### 漂亮的列表
#### 父子组件使用
- 父和子，使用的是父，被用的是子
- 父需要声明子组件，引入子组件对象，声明方式如下
```javascript
import 子组件对象 from './xxx.vue';
{
components:{
组件名:子组件对象
}
}
```
- 全局组件，使用更为方便，不需要声明，直接用
- 在main.js中引入一次，在main.js中使用 `vue.component('组件名',组件对象);`
- 所有的组件就可以直接通过组件名，使用
#### 父传子
- 父组件通过子组件的属性将值进行传递
- 方式有2:
- 常量: prop1="常量值"
- 变量: :prop2="变量名"
- 子组件需要声明
- 根属性props:['prop1','prop2']
- 在页面中直接使用{
{prop1}}
- 在js中应该如何使用prop1？ this.prop1获取
#### 看文档的对象分类
- 1:全局的代表Vue.的
- 2:实例的代表this.或者new Vue().
- 3:选项代表 new Vue() 的参数
- 或者 export default里边的属性
#### 子向父组件通信（vuebus）(扩展)
- 通过new Vue()这样的一个对象，来$on('事件名',fn(prop1,pro2))
- 另一个组件引入同一个vuebus, 来$emit('事件名',prop1,pro2)
#### 总结
- -1 : 已经存在node_modules包，已经存在package.json和webpack.config.js文件
- 1: 创建index.html,看看其所在文件和webpack.config.js文件中描述的关系
- 2: 在index.html div->id->app
- 3: 创建main.js,看看其所在文件和webpack.config.js文件中描述的关系
- 4: 在main.js中引入vue,和相关组件对象
- 5: new Vue(选项options) , 目的地el 渲染内容 render:c=>c(App) 渲染App的内容
- 6: 编写app.vue
- template 在2.x以后只能有一个根节点
- script 格式是export default { 选项options}
- style 加上scoped（范围的）之后，样式只对当前模板有效
- 7: 可能使用组件或者使用函数或者接受参数
- options(根属性):
- data 是一个函数,return一个对象
- methods 是一个对象,key是函数名,value是函数体
- components 是一个对象,key是组件名,值是组件对象
- props 是一个数组,元素是多个接受的参数
- 8: 套路总结
- 凡是在上边可以使用的东西
- 在下边就可以使用，通过this.
- 9:启动
- 进入到webpack.config.js 和package.json文件同在的目录中启动命令行
- 输入: 正在编码: npm run dev
- 报错: 检查命令所执行的../ 上级,是否存在node_modules目录及相关文件是否存在
- 输入: 代码编写完毕，提交到公司 : npm run build
#### 过滤器
#### 获取元素
#### vue构建方式
*************
ES6
************