Vue学习笔记

目录

一.vue基础知识

1.vue-cli创建项

二 vue资源使用总结

1.vue使用three.js知识总结

2.vue背景图为动图

3.vue使用阿里巴巴矢量库

4.vue使用Animate.css动效库

5.vue使用ElementUI

6.vue使用echarts

7.vue 使用jquery

8.vue 使用jquery supersized插件实现幻灯片的效果

四.vue使用知识总结

1.动态修改class类

---

 

一.vue基础知识

1.vue-cli创建项

首先你要安装vue-cli 之后在要创建项目的地方执行 

vue create my-project

二 vue资源使用总结

1.vue使用three.js知识总结

1.首先执行安装three.js命令

npm install three --save

2.在之后要引入的组件中写入

import * as Three from 'three'

再引入three.js之后我们需要建立scene(屏幕)，camera(相机)，renderer(渲染器) 分别代码如下

  this.scene = new THREE.Scene() // 场景

  this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面

  this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器

我们可以对相机，和渲染器做参数调整例如

 this.camera.position.x = -20
 this.camera.position.y = 40
 this.camera.position.z = 30
 this.camera.lookAt(this.scene.position)//分别设置相机的位置和相机拍摄点位于屏幕中心
 this.renderer.setSize(window.innerWidth, window.innerHeight - 100)//设置渲染器的大小
 this.renderer.shadowMapEnabled = true // 开启阴影

我们可以建立适当的坐标系以供参考

let axes = new THREE.AxisHelper(200) // 坐标轴

如果我们想要鼠标键盘可以旋转模型的话需要引入OrbitControls引入方法为

• 首先先安装npm Install imports-loader and exports-loader，用于向一个模块的作用域内注入变量、从模块中导出变量。
• 配置webpack.base.conf.js文件,在其module中的rules[]中添加

{
test: require.resolve(“three/examples/js/controls/OrbitControls”),
use: “imports-loader?THREE=three”
},
{
test: require.resolve(“three/examples/js/controls/OrbitControls”),
use: “exports-loader?THREE.OrbitControls”
}

• 需要使用的地方引入OrbitControls

import OrbitControls from ‘three/examples/js/controls/OrbitControls’

       使用时不需要通过THREE.OrbitControls了，直接new即可

this.controls = new OrbitControls(this.camera, this.renderer.domElement)

我们还可以加入引入dat.gui 来对其进行可视化控制

只需引入即可执行以下代码

npm install dat.gui -save

最终的代码如下

<template>
  <div ref="demo1"></div>
</template>

<script>
  import * as THREE from 'three'
  import OrbitControls from 'three/examples/js/controls/OrbitControls';
  import dat from 'dat.gui'
  export default {
    name:"three",
    data: () => ({
      controls: {
        scene: null,
        camera: null,
        renderer: null,
        rotationSpeed: 0.02
      }
    }),
    created () {
      this.$nextTick(() => {
        this.init()
      })
    },
    methods: {
      init () {
        let {initMesh, controls} = this
        const gui = new dat.GUI() // gui监测器
        gui.add(controls, 'rotationSpeed', 0, 0.5)
        initMesh()
      },
      initMesh () {
        this.scene = new THREE.Scene() // 场景
        this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) // 相机.视场，长宽比，近面，远面
        this.camera.position.x = -20
        this.camera.position.y = 40
        this.camera.position.z = 30
        this.camera.lookAt(this.scene.position)

        this.renderer = new THREE.WebGLRenderer({ antialias: true })// 渲染器
        this.renderer.setSize(window.innerWidth, window.innerHeight - 100)
        this.renderer.shadowMapEnabled = true // 开启阴影

        let axes = new THREE.AxisHelper(200) // 坐标轴

        let planeGeometry = new THREE.PlaneGeometry(600, 200, 100, 100) // 生成平面
        let planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff}) // 材质
        let plane = new THREE.Mesh(planeGeometry, planeMaterial)
        plane.rotation.x = -0.5 * Math.PI
        plane.position.x = 0
        plane.position.y = 0
        plane.position.z = 0
        plane.receiveShadow = true

        let cubeGeometry = new THREE.CubeGeometry(10, 10, 10)
        let cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0056})
        this.cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
        this.cube.position.x = 10
        this.cube.position.y = 10
        this.cube.position.z = 10
        this.cube.castShadow = true

        let spotLight = new THREE.SpotLight(0xffffff)
        spotLight.position.set(-40, 60, -10)
        spotLight.castShadow = true

        this.scene.add(axes) // 场景添加坐标轴
        this.scene.add(plane) // 向该场景中添加物体
        this.scene.add(this.cube)
        this.scene.add(spotLight)

        this.$refs.demo1.append(this.renderer.domElement)
        var controlss=new OrbitControls(this.camera)
        controlss.addEventListener('change', this.renderer)
        this.renderScene()
      },
      renderScene () {
        let {controls, cube, scene, camera, renderer} = this
        cube.rotation.x += controls.rotationSpeed
        cube.rotation.y += controls.rotationSpeed
        cube.rotation.z += controls.rotationSpeed
        renderer.render(scene, camera)
        requestAnimationFrame(this.renderScene)

      }
    }
  }
</script>

2.vue背景图为动图

<template>
<div class="video-container" >
      <div style="overflow-y: hidden" class="filter" >

      </div>
      <video :style="fixStyle" autoplay loop class="fillWidth" v-on:canplay="canplay">
        <source src="./assets/video/Magic-Mouse-Scroll.mp4" type="video/mp4"/>
        浏览器不支持 video 标签，建议升级浏览器。
        <source src="./assets/video/Magic-Mouse-Scroll.mp4" type="video/webm"/>
        浏览器不支持 video 标签，建议升级浏览器。
      </video>
      <div class="poster hidden" v-if="!vedioCanPlay">
        <img :style="fixStyle" src="./assets/img/backgroud/Magic-Mouse-Scroll.jpg" alt="">
      </div>

    </div>
</template> 

<script>
    ......
    mounted(){
        //为了使动画随界面边框大小移动和变幻
        window.onresize = () => {
        const windowWidth = document.body.clientWidth
        const windowHeight = document.body.clientHeight
        const windowAspectRatio = windowHeight / windowWidth
        let videoWidth
        let videoHeight
        if (windowAspectRatio < 0.5625) {
          videoWidth = windowWidth
          videoHeight = videoWidth * 0.5625
          this.fixStyle = {
            height: windowWidth * 0.5625 + 'px',
            width: windowWidth + 'px',
            'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
            'margin-left': 'initial'
          }
        } else {
          videoHeight = windowHeight
          videoWidth = videoHeight / 0.5625
          this.fixStyle = {
            height: windowHeight + 'px',
            width: windowHeight / 0.5625 + 'px',
            'margin-left': (windowWidth - videoWidth) / 2 + 'px',
            'margin-bottom': 'initial'
          }
        }
      };
      window.onresize()
    }
</script>

<style>
  .video-container {
    position: absolute;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
  }

  .video-container .poster img,

  .video-container video {
    filter: blur(5px);
  }

  .video-container .filter {
    overflow-y: hidden;
    z-index: 1;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
  }     
</style>

 

3.vue使用阿里巴巴矢量库

打开http://www.iconfont.cn/ 登陆之后，将想要的图标加入购物车之后，点击加入购物车之后去购物车下载代码，之后在assets中新建一个文件夹，将下载之后解压的文件放到新建的文件夹之下，在vue中用到图标的地方写明

<style>
@import "新建文件路径"     
</style>

引用的时候写

<i class="iconfont 图标简称如(icon-user)"></i>

4.vue使用Animate.css动效库

 

1.首先先安装执行

npm install animate.css

2.在main.js里面写入

import  animate from'animate.css'
Vue.use(animate)

3.使用的时候在要加的标签上加上

class=“animated fadeInRight”

5.vue使用ElementUI

1.首先安装element执行代码

npm install npm install element-ui@2.0.3 -S

2.在main.js中写入代码

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3.element使用，在要使用的组件总直接引入标签对即可。

<el-row>
   <el-col></el-col>    
</el-row>

6.vue使用echarts

1.首先你先执行安装命令

npm install echarts -S 

2.全局引用

 在main.js中写入如下代码

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

7.vue 使用jquery

首先先安装jquery执行

npm install jquery --save

之后在webpack.base.conf.js中添加以下代码

首先现在开头写入

const webpack=require("webpack")

之后在module.exports中写入以下代码

  plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })
  ],

最后在main.js中作为全局引用

import $ from 'jquery'

8.vue 使用jquery supersized插件实现幻灯片的效果

首先先要安装和使用jquery 参考第六条

之后下载supersized.css和supersized.js

再在需要使用的地方引用即可如：

<script>
  import  "./assets/js/supersized.3.2.7.min"
<script>

<style>
@import "./assets/css/supersized.css";
</style>

最后完成的代码如下

<template>
  <div>
    <div id="supersized"></div>

  </div>
</template>

<script>

  import  "./assets/js/supersized.3.2.7.min"
  export default {
    name: "App",
    data(){
      return {
        isShow:true,

      }
    },
    components:{
      vHead,vAside
    },
    methods:{
      //首页背景变幻
      showfp(){
        $(function($){
          $.supersized({
              // 功能
              slide_interval     : 4000,    // 转换之间的长度
              transition         : 1,    // 0 - 无，1 - 淡入淡出，2 - 滑动顶，3 - 滑动向右，4 - 滑底，5 - 滑块向左，6 - 旋转木马右键，7 - 左旋转木马
              transition_speed   : 1000,    // 转型速度
              performance        : 1,    // 0 - 正常，1 - 混合速度/质量，2 - 更优的图像质量，三优的转换速度//（仅适用于火狐/ IE浏览器，而不是Webkit的）

              // 大小和位置
              min_width          : 0,    // 最小允许宽度（以像素为单位）
              min_height         : 0,    // 最小允许高度（以像素为单位）
              vertical_center    : 1,    // 垂直居中背景
              horizontal_center  : 1,    // 水平中心的背景
              fit_always         : 0,    // 图像绝不会超过浏览器的宽度或高度（忽略分钟。尺寸）
              fit_portrait       : 1,    // 纵向图像将不超过浏览器高度
              fit_landscape      : 0,    // 景观的图像将不超过宽度的浏览器

              // 组件
              slide_links        : 'blank',    // 个别环节为每张幻灯片（选项：假的，'民'，'名'，'空'）
              slides             : [    // 幻灯片影像
                {image : require( './assets/img/backgroud/1.jpg')},
                {image : require( './assets/img/backgroud/2.jpg')},
                {image : require( './assets/img/backgroud/3.jpg')},
                {image : require( './assets/img/backgroud/4.jpg')},
                {image : require( './assets/img/backgroud/5.jpg')},
              ]
            }
          );
        });
      }
    },
    mounted(){
      if(this.$route.path==='/'){
        this.isShow=false;
        this.showfp()
      }else{
        this.isShow=true;
      }
    },
    watch:{
      $route: {
        handler:function (val,oldVal) {
          if(val.path==='/'){
            this.isShow=false;
          }else{
            this.isShow=true;
          }
        }
      }
    }
  }
</script>

<style>
@import "./assets/css/supersized.css";
  *{margin:0;padding:0}

  html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .content{
    height: 100%;
    width: 88%;
    position: absolute;
    left: 12%;
    right: 0;
    top: 60px;
  }
</style>

四.vue使用知识总结

1.动态修改class类

<template>
    <div>
       <h2>动态添加类名</h2>
       <!-- 第一种方式:对象的形式 -->
       <!-- 第一个参数 类名， 第二个参数：boolean值 -->
       <!-- 对象的形式: 用花括号包裹起来，类名用引号， -->
       <!-- 优点: 以对象的形式可以写多个，用逗号分开 -->
       <p :class="{'p1' : true}">对象的形式(文字的颜色)</p>
       <p :class="{'p1' : false, 'p': true}">对象的形式(文字的颜色)</p>
 

       <!-- 第二种方式:三元表达式 注意点：放在数组中，类名要用引号-->
       <p :class="[ 1 < 2 ? 'p1' : 'p' ]" >三元表示式(文字的颜色)</p>
 
 
        <!-- 第三种方式: 数组的形式 -->
        <p :class="[isTrue, isFalse]">数组的形式(文字的颜色)</p>
 
        <!-- 数组中用对象 -->
        <p :class="[{'p1': false}, isFalse]">数组中使用对象(文字的颜色)</p>
 
 
  <!--补充:  class中还可以传方法，在方法中返回类名-->
  <p :class="setClass">通过方法设置class类名</p>
    </div>
</template>
 
<script>
    export default {
        data () {
           return {
               isTrue: 'p1',
               isFalse: 'p'
           }；
        }，
 
  method: {
  setclass () {
        return 'p1';
      }
  }
    }
</script>
<style scoped>
    .p1 {
        color: red;
        font-size: 30px;
    }
    .p {
        color: blue
    }
</style>

2.Vue运用<el-table>进行表数据的动态展示

1.进行一行数据的显示

<template>
  <el-table :data="data_list" border stripe>
    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
    <el-table-column  label="项目"  :key="key" v-for="(date, key)  in data_list[0].project">
      <template slot-scope="scope">
        {{data_list[0].project[key]}}
      </template>
    </el-table-column>
  </el-table>
 
</template>
 
<script>
  export default {
    data() {
      return {
          data_list:[{"name":"zhc","project": [1, 2, 3, "aaa",5,6,7,8,9,10,11,12,13,45,16]}
          ]
      }
    },
  }
</script>
 
 
<style scoped>
 
 
</style>

 

2.进行多行数据的显示

<template>
  <el-table :data="this.tabletail" border stripe>
    <el-table-column  label="姓名" width="120">
      <template slot-scope="scope">
      </template>
    </el-table-column>
    <el-table-column  :label="date"  :key="key" v-for="(date, key)  in this.aaa">
      <template slot-scope="scope">
          <el-button type="text" size="small"  @click="handleJoinPeople(scope.$index, scope.row.project2)"> {{scope.row[key]}}</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
  export default {
    data() {
      return {
        tabletail:[[1,2,3,4,5],[1,2,3,4]],
        aaa:["a","b","c","d","e"],
      }
    },
    }
  }
</script>
 
 
<style scoped>
 
 
</style>