博思软件实训总结（三）

博思软件实训总结（三）

本次项目每个人都是全栈开发，在此之前没有涉猎过前端方面的知识，这一篇就来介绍一下vue的基础知识。

先上一张MVVM框架逻辑图，不同于传统MVP/MVC前后端分离框架，MVVM保留了M层（模型层）和V层（视图层），而把C/P层（控制层）用框架封装VM层（ViewModel层），用取而代之。省掉了很多C/P层中对DOM的操作代码。如果需要修改V层显示，只需要修改M层就可以。

1. vue 的三个特点：

数据双向绑定，组件化，单文件组件

2、vue的基本概念

全局api： vue.extend、vue.set
实例选项: new Vue()、el、data、compents都是vue实例选项
实例属性和方法： vm.$on、vm.$data、vm.$destroy() 在$都是vue的实例和方法
指令：directive
内置组件：、 、``

3、功能接口

v-for = (item,index) in arry;//item 数组的每一项， index：数组的索引；
v-for = (value,key) in obj // value：对象的值，key对象的属性；

数组中不可用的方法：slice，concat；
直接修改数组list[i] = 值，不可以这样直接修改；
Vue.set(数组，索引，{值}) vue的全局方法set来更改数组的某一项的值

标签属性和条件渲染
标签属性： v-bind：href='link";等效于:href="link"动态绑定；
条件渲染： v-if、v-else、v-show；
数据绑定：{{...}}、v-html(原始-HTML)、v-text；

事件绑定-内置事件绑定，自定义事件绑定
v-on:click="run"等效于@:click="run" 事件绑定；
自定义事件绑定： 父组件自定义事件
``
子组件触发 my-event 自定义事件；this.$emit('my-event', opation)；
父组件执行toggle 函数；

计算属性和数据监听
computed选项 -计算属性：根据我们调用属性来跟新，调用的属性没有变更，我们computed选项里面的方法读取的是缓存；

页面内容响应数据v-once
如果你需要页面内容响应数据的变化，就不加v-once。
如果你需要页面内容渲染后，不随数据的变化而变化，就加上这个。
对于一些固定不变的组件，在调用时我们可以加上v-once，只在第一次渲染执行，保存数据在内存中，后面再调用直接从内容中提取，提高执行效率。

应用

<div id="app">
<div ref="hello" @click="print">hello world</div>
</div>
<script>
var vm=new Vue({
el:"#app",
methods:{
print:function(){
console.log(this.$refs.hello.innerHTML);//this.$refs.hello返回一个引用的dom
}
}
});
</script>

组件的通信
``等同于<动态的组件名> 动态绑定组件
注：Vue有个单项数据流的概念：即父组件传递给子组件的参数，子组件不能直接修改；防止引用类型参数被修改后，如果父组件中其他地方也使用了此参数会受到影响。

子组件props接受的两种形式：
数组：['first-name','two-name']，从父组件传递两个属性值；
动态展现：{{firstName}}
对象：

    {
        'first-name':[number,string]//接受的类型可以是number或者string；
    }

slot：插槽
父组件插件里面定义的内容放到子组件slot中：

<a-parent>
    <p slot='header'>我是父组件header</p>
    <p slot='footer'>我是父组件footer</p>
</a-parent>

子组件

<b-children>
    <slot name= 'header'></slot>
    <p>it is children content</p>
     <slot name= 'footer'></slot>
</b-children>

vue高级功能--过渡和动画

<transition name = 'fade' mode='out-in'>
    // 过渡效果要一定的条件
    多元素过渡：如果标签名相同，我们需要指定一下key，否则没有效果；
    <p v-if = 'ishow' key='1'></p>
    <p v-else key='2'></p>
    <div v-if=''></div> 或者
    <div v-show = ''></div>或者
    <div :is='currentViews'></div>动态组件
</transition>

自定义指令：

<input type='text' v-foucus>
directive:{
    foucus: {
        inserted(el,bind){
            el.foucus()
        }
    }
}

4、 环境搭建和常用插件

使用 vue-cli的优势：
成熟的vue项目架构设计；
本地测试服务器；
集成打包上线方案 webpack

使用vue-cli的系统要求：
node.js  (>=4.x);
git
一个能使用node的命令行终端 git bash  或者cmd
npm install vue-cli -g`  ：全局安装vue-cli
 `vue init webpack my-project`：初始化项目
 `npm install 安装项目依赖

npm run dev：在localhost启动测试服务器；
npm run bulid：生成上线目录（部署）

5. vue-router （设置路由） vue 的插件

a、安装 vue-router

 npm install vue-router --save  

b、配置路由

import VRouter from ‘vue-router’ ： 在入口页引入vue-router；
Vue.use(VRouter);  //Vue.use注册使用vue-router，引入router，我们需要实例化这个router类，
let router = new VRouter({ // 定义自己项目的router变量；
})
new Vue({
  el: '#app',
  router:router,
  template: '<APP/>',
  components: {APP}
})

6、关闭eslint
dev模式下，默认会做eslint检测，若要关闭，打开config/index.js，设置useEslint: false，${}占位符，多行字符串

7、生命周期

image.png

8、支持es6
es6中很多新特性很好用class、promise、then、catch、...（数组转换符号）、函数设置参数默认值等
a、安装babel-polyfill

npm install --save-dev babel-polyfill    //淘宝镜像是cnpm。

b、在入口main.js文件当中引入:

import 'babel-polyfill'

c、找到build文件夹下的webpack.base.conf.js

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    //app: './src/main.js'
    app: ['babel-polyfill', './src/main.js']
  }