vuejs基礎知識總結
阿新 • • 發佈:2019-01-05
1.資料庫返回資料渲染dom。img圖片src的問題
<img :src='"http://www.forsta.cn/webapp/res/upimg/thumb/"+list.img' alt="" width="100%" height="">
屬性新增。v-bind縮寫 :
不要花括號,需編譯為字元。外加單引號
2.同理繫結自定義屬性
<div class="pro-list" v-for="list in items" @click="goDetail" :data-value="list.hid"></div>
3.上面2繫結事件獲取自身元素的屬性值,
e.target 拿到點選的目標元素
event.currentTarget物件就是當前元素,vue傳遞event獲取屬性:
goDetail(event){
console.log('go detail');
console.log(event.currentTarget.getAttribute('data-value'))
}
4.vue-router重定向:
{
path:'/',
redirect:'/index'
}
5.build 部署頁面空白config - index.js
assetsPublicPath: './',
5.單資料繫結var path = require('path') module.exports = { build: { env: require('./prod.env'), index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', productionSourceMap: true, // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. // Before setting to `true`, make sure to: // npm install --save-dev compression-webpack-plugin productionGzip: false, productionGzipExtensions: ['js', 'css'], // Run the build command with an extra argument to // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off bundleAnalyzerReport: process.env.npm_config_report }, dev: { env: require('./dev.env'), port: 8080, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: {}, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false } }
使用者名稱<input type="text" name="username" v-model="uname">
export default {
name: 'hello',
components:{
bot
},
data () {
return {
uname:'',
moveList:[1,2,3,4,5]
}
},
mounted(){
this.init()
},