TUTORIAL

Vue&&Vue-cli

new Vue and export default{}

  1. 前者是实例化一下vue组件,[如下面main.js。
  2. 后者是ES6语法,导出当前组件(Vue实例)。
export default {
name: 'app',//指定name选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外,当在有vue-devtools, 未命名组件将显示成<AnonymousComponent>, 这很没有语义。通过提供name选项,可以获得更有语义信息的组件树。
  components: {
    HelloWorld
  },
  data() { //必须为函数,返回一个全新的data对象。
      mes: 'hello'
  }
}

main.js

new Vue({
  el: '#app',//挂在的id为app的dom上
  template: '<App/>',//默认模板--如果忽略则渲染index.html的内容
  components: { App },//注册&声明组件--使用组件前必须注册组件
  data: {
    mes: 'hello Vue'
  }
})

VueJs如何正确的引用图片

  1. html中直接引用
    <img src="./../assets/avatar.png" />
  2. import || require
import logoSrc from './../assets/avatar.png';
const logoSrc = require('./assets/author.jpg')
<img :src="logoSrc " />

而不是这样

<img :src="logoSrc" >
export default {
  data () {
    return {
      logoSrc: './../assets/avatar.png' 
      logoSrc: require('./../assets/avatar.png')//正确写法
    }
  }
}

放在模版里是会被 webpack 打包出来 所以可以而在 js 里写图片路径其实只是字符串 webpack 不会(打包)处理
如果想这么做 你可以把图片放在最外层的 static 文件夹或使用 import require 引入

3.直接放static目录

<img :src="logoSrc" >
export default {
  data () {
    return {
      logoSrc: './static/avatar.png'
    }
  }
}

vue-img-methonds
vue-img-methonds-codes

Loaging·····

回复

This is just a placeholder img.