雨林君的博客

菜单

liuyulin
发布于 2024-02-02 / 29 阅读
0
0

Vue

#前端#学习笔记

Vue

环境配置

vscode环境配置

Vue声明周期和钩子

Vue对象创建的每一个阶段都能添加钩子，方便开发者开发，具体参考vue的api文档

Vue入门

引入CDN

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

创建Vue对象，绑定元素

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>

Vue语法

插值

文本：使用{{...}}，双大括号的对文本插值，要插值的对象要事先声明在Vue的data中。

html：使用v-html指令，输出html代码

还可以是用v-once指令，设置一次插值，插值之后不会更新

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

属性：使用v-bind指令，为html标签绑定属性，也可以给标签绑定一个对象，

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="color">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
    data:{
      color: 'blue'
  }
});
</script>

<style type="text/css">
    .blue{color:blue;font-size:100px;}
</style>

表达式：Vue提供了完全的JavaScript表达式支持

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>

条件

使用v-if和v-else指令，来进行条件判断，当然，还有v-else-if，判断是否相等使用js中的'==='。

<div id="app">
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
  el: '#app'
})
</script>

循环

使用v-for指令，需要以site in sites形式的特殊语法

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

在使用v-for的时候，最好给标签绑定一个在v-for中定义的变量的key，这样eslint不会报错，也方便vue进行渲染

<el-link v-for="i in total" :key="i" :href=videoList[i-1].url target="_blank" type="primary">
{{ videoList[i-1].title }}
</el-link>

事件

v-on指令可以监听事件

<div id="app">
   <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
 
<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
          alert(event.target.tagName)
      }
    }
  }
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script>

表单

使用v-model实现双向绑定

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vue0</title>
  </head>

  <body>
    <div id="money">
        <input type="text" v-model="yuan">￥=
        <input type="text" v-model="dollar">$
        <p id="info"></p>
    </div>
  </body>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

  <script>
    var vm = new Vue({
        el:'#money',
        data:{
            yuan:0,
            dollar:0
        },
        methods:{},
        conputed:{},
        watch:{
            yuan:function(val){
                this.yuan = val;
                this.dollar = this.yuan / 7;
            },
            dollar:function(val){
                this.dollar = val;
                this.yuan = this.dollar * 7; 
            }
        }
    });
    vm.$watch('yuan',function(newValue,oldValue){
        document.getElementById('info').innerHTML = "before:"+oldValue+',after:'+newValue;
    })
  </script>
</html>

Vue组件

使用Vue.component()来定义一个组件，在Vue中使用components参数就能实现局部注册

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vue0</title>
  </head>

  <body>

    <div id="app">
        <message></message>
    </div>
  </body>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    Vue.component("message",{
        template:'<p>这是一条评论</p>'
    })

    var vm = new Vue({
        el:'#app'
    })
  </script>
</html>

全局注册与局部注

一般注册时是全局注册，若使用局部注册，要在Vue初始化的时候，在components声明局部注册，注册形式是对象形式的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vue0</title>
  </head>

  <body>

    <div id="app">
        <message></message>
    </div>
  </body>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    Vue.component("message",{
        template:'<p>这是一条评论</p>'
    })

    var vm = new Vue({
        el:'#app',
        components:{
            test:{
                template:"<h1></h1>"
            }
        }
    })
  </script>
</html>

单文件组件

在单vue文件中使用<temlpate>标签来定义组件

单文件组件分为三个区域，<template>，<script>，<style>，分别用于编写组件，js，css

在<script>声明组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

组件声明完之后，就可以在App.vue中使用import引入这个组件，再在components里进行局部注册，之后就可以使用标签引用组件了

Axios

方式一

引入CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

发现axios请求

axios.get('./data.json').then(response=>(console.log(response.data)));
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vue1</title>
  </head>

  <body>

    <div id="app">
        <div>
            {{rep.msg}}
        </div>
    </div>
  </body>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    var vm = new Vue({
        el:'#app',
        data:{
        },
        data(){
            return{
                rep:{
                    code:null,
                    msg:null,
                    data:null
                }
            }
        },
        mounted(){
            axios.get('./data.json').then(response=>(this.rep = response.data));
        }
    })
  </script>
</html>

方式二

npm安装

npm install axios -S

main.js中全局引入

import axios from 'axios'
Vue.prototype.$http = axios

在组件中引入axios变量（之前的全局引用不知道为什么没生效，这里可以再次局部引用 ）

import axios from 'axios'

之后就可以使用axios方法了

计算属性

计算出来的结果保存在属性中，可以直接通过变量名调用方法，结果缓存在内存中，不会变化。将不经常变化的结果进行缓存，节约系统的开销。

内存中运行：虚拟DOM

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Vue1</title>
  </head>

  <body>

    <div id="app">
        <p>现在的时间是：{{now()}}</p>
        <p>now:{{now1}}</p>
    </div>
  </body>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    var vm = new Vue({
        el:'#app',
        data:{
            message:'hello'
        },
        methods:{
            now : function(){
                return Date.now();
            }
        },
        computed:{// 计算属性，methods中和comouted中的方法不能重名，重名的话只会调用methods中的方法
            now1: function(){
                return Date.now();
            }
        }
    })
  </script>
</html>

slot

可以预留位置，动态拔插

傻逼狂神讲的就是一坨屎，没看懂，后面再看

自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

vue-cli

Vue脚手架

使用vue init webpack helloworld 创建项目（vue2+webpack）

使用 vue create hello-world 创建项目（vue3）

使用 npm run serve 启动项目

通过vue ui命令打开vue图形化界面

webpack

将所有东西打包在一起，后续直接在html页面中引入

ES6

使用export暴露方法，使用import引用方法

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}

vue-router

vue-router用来控制路由

安装vue-router

npm install vue-router --save-dev

创建router目录，在router目录下创建index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import ThisvideoPlayer from '../components/video.vue'

// 安装路由

Vue.use(VueRouter)

export default new VueRouter({
    routes:[
        {
            path:'/video',
            name: 'video',
            component: ThisvideoPlayer
        },
    ]
})

视频播放组件

<template>
    <video-player class="video-player vjs-custom-skin" :options="playerOptions"></video-player>
   </template>
   
   <script>
   import 'video.js/dist/video-js.css'
//    import 'vue-video-player/src/custom-theme.css'
   
   export default {
     name: 'ThisvideoPlayer',
       data() {
           return {
         // 视频播放器配置
         playerOptions: {
           height: 400,
           playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
           autoplay: true, // 如果true,浏览器准备好时开始回放。
           muted: true, // 默认情况下将会消除任何音频。
           loop: true, // 导致视频一结束就重新开始。
           preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
           language: 'zh-CN',
           aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
           fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
           sources: [
             {
               type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
               src: require("../static/video/媒体1.mp4") // url地址
             }
           ],
           poster: require('../static/images/图片1.png'), // 你的封面地址
           // width: document.documentElement.clientWidth, //播放器宽度
           notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
           controlBar: {
             timeDivider: true,
             durationDisplay: true,
             remainingTimeDisplay: false,
             fullscreenToggle: true // 全屏按钮
           }
        }
       }
   }
   }
   
   </script>
   
   <style scoped>
   .vjs-custom-skin{
     width: 100%;
     height: 100%;
   }
   </style>

main.js中使用router

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

App.vue中使用组件

  <router-link to="/video">视频页</router-link>

路由之后的内容显示在<router-view>标签中

ElementUI

安装依赖

npm i element-ui -S

main.js中引用ElementUI

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

导航栏

    <h1>雨林君的个人站</h1>
    <el-menu router :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/videos">视频</el-menu-item>
      <el-menu-item index="/musics">音乐</el-menu-item>
      <el-menu-item index="/about">关于本站</el-menu-item>
    </el-menu>
    <el-main>
      <router-view></router-view>
    </el-main>


Python
JavaScript

评论