命令行创建vue脚手架、引入jq等插件、组件间传值

创建vue脚手架:

https://blog.csdn.net/Ag_wenbi/article/details/86359276

二、vue映入jquery

1、npm install jquery

2、在webpack.base.conf.js中添加

  plugins:[
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],

3、main.js中引用 import $ from 'jquery';

二、引入滚动条niceScroll  

cnpm install jquery.nicescroll

main.js中引用 import 'jquery.nicescroll';//滚动条插件

三、引入echarts

cnpm install echarts --save

main.js中

  1. import Echarts from 'echarts'

  2. Vue.prototype.echarts = Echarts

  3. Vue.use(Echarts)

mounted() {
      var dom = document.getElementById('echarts')
      var myChart = this.echarts.init(dom)
      // 绘制图表
      myChart.setOption({
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          data: [{
              value: 235,
              name: '视频广告'
            },
            {
              value: 274,
              name: '联盟广告'
            },
            {
              value: 310,
              name: '邮件营销'
            },
            {
              value: 335,
              name: '直接访问'
            },
            {
              value: 400,
              name: '搜索引擎'
            }
          ]
        }]
      });
    },

二、模拟后台,传数据

       1、static文件夹下创建mock文件夹,在mock下创建index.json文件

index.json文件模版

2、修改index.js配置文件

proxyTable: {
      '/api':{
        target:'http://localhost:8484',
        pathRewrite:{
          '^/api':'/static/mock'
        }
      }
    },

 4、请求并打印数据

三、父子组件传数据

1、 父组件定义、并赋值,在标签处传值

2、子组件接收值并使用

3、子组件传值个父组件

子组件中:触发一个方法,在方法里执行this.$emit(xx,xx)

父组件中:

监听某个值变化

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章