vue.js 学习笔记（二）

一、环境搭建及初始化vue cli 项目

1安装和搭建npm

参见教程：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5acb5125baf0882000

最好使用阿里提供的npm 镜像 cnpm 进行开发环境的搭建，

具体使用参见:https://www.cnblogs.com/yominhi/p/7039795.html

还看参见教程：https://www.jianshu.com/p/9ef3fb3576e6

1、使用npm搭建vue环境

npm(cnpm)安装成功后，使用以下命令安装vue-cli 

npm install vue-cli -g

2、创建vue cli 项目

所有命令均在命令行下执行：

1）创建vue cli 项目

vue init webpack demo-webpack

2）进入项目目录，使用npm 安装项目文件

npm install

3)运行项目

npm run dev

4)编译生成项目

npm run build

5）在vue cli 中导入第三方插件，如：jquery等

参见教程：https://www.cnblogs.com/maomao93/p/7742516.html

参见教程：https://www.cnblogs.com/handoing/p/5866830.html

5）在vue cli 中使用d3.js

安装d3包

npm install  d3 --save-dev    

在js文件中导入d3.js

import * as d3 from ' d3'

6)在vue-cli环境下进行调试

在vue文件的js部分中添加debugger，采用chrome相当于在debugger出设置了断点；

在chrome中使用vue调试插件：Vue.js devtools 

二、vue-cli中常用函数及命名说明：

Vue.use(pluginName):实现插件注册与安装，其中pluginName表示插件名称，插件只能是对象或者函数；

三、去掉eslint

ESlint语法检查太过严苛，再实际编程时造成了不少困扰，最好是去掉ESlint,方法如下：

即：不在加载ESlint模块；

四、vue cli  代码调试：

使用 chrome插件 vue devtools;

在chrome中调试vue文件，需要修改webpack.dev.conf.js文件，将该文件中的devtools属性值修改为：

devtool: '#cheap-module-eval-source-map'

在.vue文件的script 部分添加 debugger,就可以在chrome中调试 js代码了

五、vue.js数据传递

1）、父组件数据传递到子组件

Vue.js可通过设置子组件属性，绑定子组件属性到父组件数据的方式，实现父组件数据到子组件数据的传递。

示例如下：

子组件代码示例：

<template>
    <span>Hello {{message}}</span>
</template>
<script>
    export default {
        // 在 props 中声明获取父组件的数据通过 message 传过来
        props: ['message']
    }
</script>

父组件代码：

<template>
    <div class="app">
        // message 定义在子组件的 props 中
        <child :message="name"></child>
    </div>
</template>
<script>
    import child from './child.vue';
    export default {
        components: {
            child
        },
        data() {
            return {
                name: 'linxin'
            }
        }
    }
</script>

通过父组件中的数据属性name赋值给子组件的属性props，注意：子组件中的属性数据值单项传递，同时属性数据的值在子组件中不能更改，如果存在需要在子组件中更改属性值的情况（如存在通过属性赋于子组件初值，用户可更改初始值的情况），可通过观察的方式，即watch方式，将属性赋予子组件中相应的数据属性，实现数据值的更改

2）子组件传递数据到父组件

子组件可以通过事件的方式向父组件传递数据，即：子组件触发事件，将待传递数据作为事件参数进行传递，父组件相应事件，获取事件参数，示例如下：

子组件代码：

export default{
  name:'stuinfo',
  data(){
  return {
    uname:'',
    options:
      [{text:'男',value:'男'},{text:'女',value:'女'}],
    mystuprop:{
      id:'',
      name:'',
      sex:'',
      classnum:'',
      born:''
    }
  }},
  methods:{
    save:function(){
        alert('data saveed')
        this.$emit('datachange',this.mystuprop)
            }
          }
    }

父组件代码：

 <ss ref="stuDetail" :stuprop="mystuprop"  v-on:datachange="saveData"></ss>
<script>
 export default{
    name: 'list',
    data(){
      return {
        student:students,
        columns:['序号','姓名','性别','班级','出生年月'],
        buttons:['编辑','删除'],
        active:'active',
        active2:'active2',
        showed:false,
        mystuprop:{
          id:'',
          name:'',
          sex:'',
          classnum:'',
          born:''
        }
      }
    },
    methods:{      
      saveData:function($event){
        this.stuprop=$event.mystuprop
        this.student.forEach(function(item,index){
            if (item.id===this.stuprop.id)
            {
              item.name=this.stuprop.name;
              item.borndate=this.stuprop.born;
              item.class=this.stuprop.classnum;
              item.sex=this.stuprop.sex;
            }
        },this)
        this.showed=false
      }
    },
    components:{ss:stuinfo}
  }
</script>