VUE一些積累

時間 2019-11-08

標籤 vue 一些積累简体版

原文原文鏈接

1.computed與watch

Vue.js在模板表達式中限制了，綁定表達式最多隻能有一條表達式，但某些數據須要一條以上的表達式運算實現，此時就能夠將此數據放在計算屬性（computed）當中。javascript

Vuejs中關於computed、methods、watch的區別。css

1#computed：計算屬性將被混入到 Vue 實例中。全部 getter 和 setter 的 this 上下文自動地綁定爲 Vue 實例。html

2#methods：methods 將被混入到 Vue 實例中。能夠直接經過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定爲 Vue 實例。vue

3#watch：是一種更通用的方式來觀察和響應 Vue 實例上的數據變更。一個對象，鍵是須要觀察的表達式，值是對應回調函數。值也能夠是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每個屬性。java

通俗來說：jquery

computed是在HTML DOM加載後立刻執行的，webpack
如賦值；而methods則必需要有必定的觸發條件才能執行，如點擊事件；web
watch呢？它用於觀察Vue實例上的數據變更。對應一個對象，鍵是觀察表達式，值是對應回調。值也能夠是方法名，或者是對象，包含選項。npm

因此他們的執行順序爲：默認加載的時候先computed再watch，不執行methods；等觸發某一事件後，則是：先methods再watch。app

下面的例子能夠作爲說明。

computed 屬性 vs watched 屬性：Vue 確實提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變更：watch 屬性。當你有一些數據須要隨着其它數據變更而變更時，你很容易濫用 watch——特別是若是你以前使用過 AngularJS。然而，一般更好的想法是使用 computed 屬性而不是命令式的 watch 回調。

參考文檔：https://zhidao.baidu.com/question/1113826506990786419.html

2.入口文件js的配置

方式1：不設置模板

webpack.config.js

const HTMLPlugin = require('html-webpack-plugin')  
  plugins:[
    new HTMLPlugin({
    })
  ]

src/index.js

import Vue from 'vue'
import App from './App.vue'
const root = document.createElement('div')
document.body.appendChild(root)
new Vue({
  render:(h) => h(App) 
}).$mount(root)

src/App.vue

<template>
    <div>
        <Header></Header>
        <todo></todo>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from './todo/header.vue'
import Footer from './todo/footer.jsx'
import Todo from './todo/todo.vue'
export default {
    components: {
        Header,Footer,Todo
    }
}
</script>

方式2：設置html模板

webpack.config.js

const HTMLPlugin = require('html-webpack-plugin')  
  plugins:[
    new HTMLPlugin({
      template: 'index.html',
    })
  ]

src/index.js

import Vue from 'vue'
import App from './App.vue'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

根目錄下index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>sante</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

src/App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App',
}

</script>

3.外部文件js的引入

方式1：模塊導入導出

xxx.vue導入

<script>
import {map_active} from './assets/js/map-active.js'
</script>

對map-active.js導出

function map_active(){
    var map;#中間是關於js內容德邦邠
}
export {map_active}

方式2：在模板文件index.html中引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>sante</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
    <script src="static/js/map-active.js"></script>
</html>

不須要修改js裏的導出部分，引入也和之前同樣

可是須要在根目錄下新建static文件夾，把靜態資源放進去

jquery的引入

安裝jquery

npm install jquery -D

webpack.config.js

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

index.js

import $ from 'jquery'

xxx.vue

<script>
$(function() {
    alert(123)
});
</script>

能夠直接使用$符號

4.css的引入

（1）文件css

安裝loader

npm i style-loader css-loader -D

webpack.config.js

module:{
    rules:[
      {
        test: /\.css$/,
        use:[
          'style-loader',
          'css-loader'
        ]
      },
    ]
   }

方式1：index.js經過import引入

import './assets/styles/test.css'

方式2：xxx.vue引入

<style scoped src="./assets/styles/test.css"></style>

方式3：index.html常規引入

<link rel="stylesheet" href="static/styles/test.css">

一些文字、圖片引入

安裝

npm i url-loader file-loader -D

webpack.config.js

module:{
    rules:[      
      {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
        use:[{
          loader:'url-loader',
          options:{
            limit:1024,
            name: '[name].[ext]'
          }
        }]
      },
    ]
  }

（2）圖片樣式css

關於background-image: url('./assets/images/bg.jpg')

項目目錄

——src

——assets

xxx.vue

index.html

——static

——webpack.config.js

方式1：xxx.vue中style

<style scoped>
    .beijing{background-image: url('./assets/images/bg.jpg');height:1000px;z-index: 111;width: 100%}
</style>

方式2：行內樣式

<div style="background-image: url('/src/assets/images/bg.jpg')"></div>

注意：經過.的相對路徑在template裏是沒有用的，會被編譯的時候找不到路徑，/根目錄下開始尋找或者前面加上ip/域名的絕對路徑是能夠的

方式3：樣式內資源引入

/src/assets/css/test.styl

body
  background: url('../images/bg.jpg')

方式4：vue內設置變量方式返回及其餘

<template>
  <div>
    <!-- 成功引入的三種方法： -->
    <!-- 1 -->
    <img src="~@/da.jpg" width="100">
    <!-- 2 -->
    <div class="img1"></div>
    <!-- 3 -->
    <div class="img2" :style="{backgroundImage: 'url(' + img + ')' }"></div>
  </div>
</template>

<script>
import Img from '@/da.jpg'

export default {
  data () {
    return {
      img: Img,
    }
  }
}
</script>

<style>
  .img1{
    width: 100px;
    height: 100px;
    background: url('~@/da.jpg') center center no-repeat;
    background-size: 100px auto;
  }
  .img2{
    width: 100px;
    height: 100px;
    background-position: center center;
    background-repeat:  no-repeat;
    background-size: 100px auto;
  }
</style>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。