vue各模块功能范围，webpack属性配置

2018-8-25

父子组件传递数据 - props

父组件通过子的属性值进行传递，方式有二：
- 常量: prop1=”常量值”
- 变量: :prop2=”变量名”

子组件需要声明

根据属性props:[‘prop1’,’prop2’]
在页面中直接使用{{prop1}}

在js中应该如何使用prop1？

this.prop1获取

在父组件中：
<template><div>//引用子组件<header-vue textOne="大"></header-vue><body-vue :textTow="text2"></body-vue><footer-vue></footer-vue></div>
</template>
<script>
//引入子组件对象
import headerVue from './components/header.vue'
import bodyVue from './components/body.vue'
import footerVue from './components/footer.vue'export default {data(){return {text2: body,}},methods:{},props: ['textTwo','textOne']
}
</script>

在子组件中：
<template><div>我是{{textOne}}头</div><div >我是body,{{textTwo}}</div>
</template>
<script>export default {data () {return {}  },methods: {},//子组件接收父组件传来的值，在props中定义传来的变量props: ['textOne'，'textTwo']}
</script>

声明全局组件

main.js<script>
// 1. 引入vue
import Vue from 'vue';import App from './app.vue'// 2. 引入子组件对象
import headerVue from './components/header.vue'
import bodyVue from './components/body.vue'
import footerVue from './components/footer.vue'// 3. 声明全局组件
Vue.component('headerVue', headerVue); //注册一个组件，第一个参数是名称，在template中使用；第二个参数是实际的对象，显示成什么内容，具备什么功能
Vue.component('bodyVue', bodyVue);
Vue.component('footerVue', footerVue);</script>

2018-8-21

父子组件的使用

在父组件中：
<template><div>//引用子组件<header-vue></header-vue><body-vue></body-vue><footer-vue></footer-vue></div>
</template>
<script>
//引入子组件对象
import headerVue from './components/header.vue'
import bodyVue from './components/body.vue'
import footerVue from './components/footer.vue'export default {data(){},methods:{},//必需要声明components:{//组件名（在模板中使用）  :组件对象headerVue: headerVue,body}
}
</script>

SPA结构？https://segmentfault.com/a/1190000000607661
微前端的设计理念与实践初探

2018-8-20

*methods和on
- 绑定事件的方法：
+ ‘v-on:事件名=”表达式||事件名”’
+ 简写：’@事件名=”表达式||事件名”’
- 韩树明没有参数是，可以省略(),只写一个函数名
- 在export default这个对象的跟属性加上methods属性，其是一个对象
+ key是函数名，也是函数体
- 在export default这个对象的跟属性上加上data，其是一个函数，返回一个对象
+ 对象的属性是我们初始化对象变量的名称
- 在script中能使用的对象，在template中也能使用；
在script中加this，在template中不加this
* v-for
- 可以使用操作数组(item,index)
- 可以使用操作对象(value,key,index)
- key 是类似于track by的属性，为了告诉vue，js中的元素与页面之间的关联，当试图删除元素的时候，是个单元的删除而不是替换，所以要关联其关系。

2018-8-19

vue中常用的v-指令
- v-next
```
    <span v-next="text"></span><input type="text" name="" v-text="text">data () {return {text:我是v-text玩的东西}}
```
- v-html 是元素的innerHTML，不能包含表达式{{}}
```
<span v-html="html"></span>data () {return {text: '我是v-text玩的东西',html: `<ul><li>xxx</li><li>yyy</li></ul>`}
}
```
- v-if 元素是否移除或者插入
- v-show
- v-model 双向数据绑定
  JavaScript v-model: <input type="text" v-model="mTest"> {{mTest}} <br> v-bind： <input type="text" v-bind:value="mTest">
- v-bind:value 给value赋值，v-bind是单向的，内部的改变影响显示的改变
class结合v-bind使用
- 需要根据可变的表达式的结果来给class赋值，就需用到v-bind:class=”xxx”
- class：结果的分类
  - 取一个返回一个字符串(三元表达式和对象清单)
  - 取多个，返回一个对象(样式做key，true和false做值)
- v-bind:属性名=”表达式”，最终表达式的运算结果赋值给该属性名
  - 简化的写法是：:属性名="表达式"
```
    //取一个<div><div v-bind:class="isRed?'red':'green'"></div></div>isRed:true,<style>.red{background: red;}.green{background: green;}</style>
```
```
    //取多个<div v-bind:class="{'red':true,'big':'true'}">多个class</div><style>.red{background: red;}.green{background: green;}.big{font: 30px;}
</style>
```
  复杂例子：通过遍历，根据当前对象的成绩，匹配成绩和样式清单对象，用成绩做key，取对象的value，最终返回字符串做样式名
```
    <ul><li v-for="stu in stus" :class="{'A':'red','B':'green'[stu.grade]}">{{stu.name}}</li></ul>stus: [{name:'jack', grade:'A'},{name:'rose',grade:'B'}]
```

2018-8-13

对象属性的声明

var name = 'abc';
var person = {name};  // => var person ={name: name};
// 当属性的key和变量的名相同，而要使用变量的值做value。就可以简写成{name}

函数的声明(干掉了函数function)

var cal = {add: function(){return 1;},add2(){return 2;    //  add1与add2相等},add3: function(n1,n2){return n1 + n2;},add4(n1,n2){return n1 + n2;}                  //  add3与add4相等
}

vue单文件方式
单文件就是以.vue结尾的文件。最终通过webpack编译成.js在浏览器运行
内容： + +
1：template中只能有一个根节点
2：script中，按照exportdefault{配置}来写
3：style中，可以设置scope属性，让其只在template中生效
以单文件的方式启动
webpack找人来理解你的单文件代码
- vue-loader， vue-template-compiler，代码中依赖vue

例子:

1. 挖坑
<body><div id="app"></div>//以上是一个坑，vue文件写好之后往里填
</body>

2. 引入vue
import Vue from 'vue';
import App from './app.vue'3. 创建vue实例。一般一个项目组都是一个实例来完成显示
new Vue({//渲染内容的目的地el: '#app',//渲染内容render: function(creater){    //  render渲染，是个属性.return creater(App);   //App包含template/script/style，最终生成DOM结构},以上相当于 rander：'DOM结构'//a. 当render:function参数为一个的时候，小括号可以省略//b. 当代码只有一行且返是回值的时候，可以省略大括号//c. 可以写成render: c => c(App)data(){}
})

<template><div id="app"></div>
</template>
<script>export default {}
</script>
<style scope></style>

vue介绍
my_project
- node_modules 文件都依赖于node_modules
  - node包的查找机制是逐级向上查找
  - 项目中就一个，对应src的使用
- src 存放人可以看懂的源代码，具有一定的功能划分，MVC
  - 命令行：
    - webpack立刻读取webpack.config.js文件，生成到dist目录下
    - webpack-dev-server 运行src下的代码，虚拟出build.js测试
- dist 存放真实上线的代码（减少请求，混淆代码），机器能看懂
- webpack.congig.js 打包生成dist下的代码
- package.json文件包信息描述
  - 里面全是依赖，如果没有，运行npm i(全部恢复)
  - npm i --production （只恢复dependencies）
  - npm init-y 就能创建出package.json文件

2018-8-8

学习笔记：

$nextTick

2018-7-31

获取DOM元素

救命稻草，前端框架就是为了减少DOM操作，但是在特定情况下，也留了后门
在指定的元素上，添加ref=”名称A”
在获取的地方加入 this.$refs.名称A
- 如果==ref放在了原生DOM元素上==，那么获取的就是原生DOM对象
  - 可以直接操作
- 如果==ref放在了组件元素上==，那么获取的就是组件对象
  - 1: 获取到DOM对象，通过this.refs.名称.refs.名称.refs.名称.el，进行操作
- 对应的事件
  - created 完成了数据的初始化，此时还未生成DOM，无法操作DOM
  - mounted 将数据已经装在到了DOM之上，可以操作DOM

==ref放在了原生DOM元素上==

两个可能获取数据的过程：
- 组件创建后，数据已经完成初始化，但是DOM还未生成
 created(){console.log('====created:',this.$ref.myDiv);}
数据装载后，各种数据已经就位，将数据渲染到DOM上，Dom已经生成
 mounted:{console.log('==== mounted:',this.$refs.myDiv);//直接操作DOMthis.$refs.myDiv.innerHTML = '哈哈';//由于是双向数据绑定，还是操作数据比较好this.text = "嘻嘻";}
==ref放在了组件元素上==
   mounted:{console.log('====sub:',this.$refs.sub)//获取组件对象并获取到其DOM对象//console.log('====sub:',this.$refs.sub.$el)//this.$refs.sub.$el.innerHTML = '嚯嚯';}

app.js

项目的入口模块，一切的请求o都要先进入这里进行处理。调用router.js进行路由分发处理。

router.js

只负责分发路由，不负责业务逻辑处理。调用controller进行业务逻辑处理。

controller

只负责处理业务，不负责处理数据的CRUD。调用model层处理数据的CRUD。

model层

只负操作数据库，执行对应的sql。

view层

每当用户操作界面，，如果需要进行业务处理，都会通过网络请求去请求后端服务器，这个会被app.js检听到。

CRUD：

C: create
R: read
U: update
D: delete

MVVM

VM层是M层和V层之间的调度者：
M: M是保存的是每个页面中单独的数据
VM: 他是一个调度者，分割了M和V（M和V不能互相调用），每当v层想要获取或保存数据时，都要由VM做中间的处理。提供了数据的双向绑定。
V: V是每个单独页面的HTML结构

webpack属性配置

const path = require('path')
module.exports = {enter:{  //main是默认入口，也可以是多入口main: './src/main.js',   },//出口output:{filename:'./build.js'   //指定js文件path: path.jion(_dirname, '..', 'dist')  //代表当前目录上一级的dist}，module: {//一样的功能rules:  webpack2.x之后新加的loaders: [              //require('./a.css || ./a.js'){   test: /\.(jpg|svg)$/,loader:'style-loader!css-loader',//顺序是反过来的  2！1loader: 'url-loader?limit=4096&name=temp.[ext]',//[name].[ext]是内置提供的，因为本身是先读这个文件options: {limit: 4096,name: '[name].[ext]'}}]},plugins:[//插件的执行顺序是依次执行的new htmlWebpackPlugin({template: './src/index.html'})//将src下的template属性描述的文件根据当前配置的output.path，将文件移到该目录]
}

多个插件之间用 ‘|’ 分割；多个loader之间用 ‘!’ 分割

webpack-ES6的处理

ES6的模块，vue本身女神默认支持es6的模块导入
(import xxx from '../compontment')
babel
- babel-loadder(内部依赖babel-core)
  - 关键字(presrts es2015)
  - 函数(plugins babel-plugin-transpform-runtime)

过滤器

组件内的过滤器就是option中的一个filters的属性(一个对象)
- 多个key就是不同过滤器名，多个value就是与key对应的过滤方式函数体
全局过滤器：Vue.filter(名，fn)
总结
- 全局过滤器：范围大，如果出现同名时，权利小
- 组件内过滤器：如果出现同名时，权力大，范围小

//组件内过滤器
<template><div>Please input<input type="text" name="" v-model="text"/>output: {{text | myFilter}}</div>
</template>
<script>export default {filters: {myFilter: funtion(value){  //value就是text//输入的内容进行反转//转换成数组->翻转数组->转换成字符串return value.split('').reverse().join('');}},data() {return {text: ''}}}
</script>

//main.js
//全局过滤器
Vue.filter('myFilter',funtion(value){return '我是全局过滤器'；
}

全局过滤器和组件内过滤器都有时，++组件内过滤器起作用++。也就是更精准的起作用，可以类比css中的样式。

//app.vue
<template><div><sub-vue></sub-vue></div>
</template>
<script>import SubVue from './sub.vue';export default {filters: {myFilter: funtion(value) {  //value就是text//输入的内容进行反转//转换成数组->翻转数组->转换成字符串return value.split('').reverse().join('');}},data() {return {text: ''}},components: {subVue: SubVue}}
</script>

//sub.vue<template><div>{{'大家好，我是sub | myFilter'}}</div></template><script>export default {data(){return{}}}</script>