VUE一些积累

最新推荐文章于 2024-07-28 19:41:36 发布

weixin_34150503

最新推荐文章于 2024-07-28 19:41:36 发布

阅读量147

点赞数

文章标签： webpack javascript python ViewUI

原文链接：https://my.oschina.net/u/3018050/blog/1836876

版权

2019独角兽企业重金招聘Python工程师标准>>>

1.computed与watch

Vue.js在模板表达式中限制了，绑定表达式最多只能有一条表达式，但某些数据需要一条以上的表达式运算实现，此时就可以将此数据放在计算属性（computed）当中。

Vuejs中关于computed、methods、watch的区别。

1#computed：计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

2#methods：methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

3#watch：是一种更通用的方式来观察和响应 Vue 实例上的数据变动。一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

通俗来讲：

computed是在HTML DOM加载后马上执行的，
如赋值；而methods则必须要有一定的触发条件才能执行，如点击事件；
watch呢？它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

所以他们的执行顺序为：默认加载的时候先computed再watch，不执行methods；等触发某一事件后，则是：先methods再watch。

下面的例子可以做为说明。

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>

转载于:https://my.oschina.net/u/3018050/blog/1836876