VUE2.0学习总结

最新推荐文章于 2025-05-06 10:38:55 发布

Meter_Bulacn

最新推荐文章于 2025-05-06 10:38:55 发布

阅读量582

点赞数 1

分类专栏： vue框架文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_41500222/article/details/107433863

版权

vue框架专栏收录该内容

5 篇文章

订阅专栏

vue项目运行提示Warnings while compiling.警告

在这里插入图片描述

关于vue各种import导入

其他导入方式:博主链接

我遇到的问题

在这里插入图片描述

关于在学习中方法的框架梳理

1. 配置别名及路径简写操作

首先找到vue主框架里面的build目录下的webpack.base.conf.js

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      // 在这里配置src下的路径
      'common':resolve('src/common'),
      'components':resolve('src/components')
    }
  }

结果配置如果是main.js 就可以这样导入子类文件

import 'common/stylus/index.styl'

2. 编译运行页面默认跳转指定路径配置

首先找到配置页面的路由

import Vue from 'vue'
import Router from 'vue-router'
import Recommend from 'components/recommend/recommend'
import Singer from 'components/singer/singer'
import Rank from 'components/rank/rank'
import Search from 'components/search/search'

Vue.use(Router)

export default new Router({
    routes: [
    {
    // 如果不带参数进行跳转指定页 设置redirect: '/recommend'带指定参数
        path: '/',
        redirect: '/recommend'
    },
    {
        path: '/recommend',
        component: Recommend
    },
    {
        path: '/singer',
        component: Singer
    },
    {
        path: '/rank',
        component: Rank
    },
    {
        path: '/search',
        component: Search
    }
]
})

3.babel-polyfill的引用和使用

chrome、ff浏览器下都能正常显示的页面，在百度浏览器下愣就显示不出来了

解决办法 npm install --save-dev babel-polyfill

babel-polyfill用正确的姿势安装之后，引用方式有三种：

1.require("babel-polyfill");

2.import "babel-polyfill";

3.module.exports = {

　　entry: ["babel-polyfill", "./app/js"]

};

博主原帖:博主原帖链接

我的解决方式是在main.js 最顶部分增加import ‘babel-polyfill’

4.fastclick 解决移动端点击300m延迟

进入main.js

import fastclick from 'fastclick'
// 整个body下的div标签点击都没有300m的延迟	
fastclick.attach(document.body)

含义说明博主链接:博主链接

5. 新手练习制作幻灯片

最后图标隐藏是因为 index从0-5 而length从1-6 所以图片翻到最后 5<5 结果不成立返回 false 图标隐藏

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>新手练习</title>
</head>

<body>
  <div id="app">
    
    <button @click="prev" v-show="index!=0">《</button>
    <img :src="imgarr[index]" alt="">
    <button @click="next" v-show="index<imgarr.length-1">》</button>
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        imgarr: [
          "http://y.gtimg.cn/music/photo_new/T002R300x300M0000044GiMq06Bbqc.jpg",
          "http://y.gtimg.cn/music/photo_new/T002R300x300M000003Lr7ct0vUSj3.jpg",
          "http://y.gtimg.cn/music/photo_new/T002R300x300M0000009C3rp3Kfwg0.jpg",
          "http://y.gtimg.cn/music/photo_new/T002R300x300M000004dFbDj2kl3Pn.jpg",
          "http://y.gtimg.cn/music/photo_new/T002R300x300M000003Ls5Jo4EFBIH.jpg",
          "http://y.gtimg.cn/music/photo_new/T002R300x300M000000ZtuIr3Je4h6.jpg"
      ],
        index:0
      },
      methods: {
        prev: function () {
            this.index --;
      },
        next: function () {
          this.index ++;
          console.log(this.index.length)
      }
    }
    })
  </script>

</body>

</html>

新手学习制作记事本

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>新手练习</title>
</head>

<body>
  <section id="todoapp">
    <header class="header">
      <h1>记事本</h1>
      <!-- inputvalue:"好好学习" 默认绑定数据   @keyup.enter="add" 敲回车add:function运行点击事件this.list.push(this.inputvalue)将内容添加到list中 -->
      <input  v-model="inputvalue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入" class="new-todo">
    </header>
    <section class="main">
      <ul class="todo-list">
        <!-- v-for="(item,index) in list" 遍历list中的内容 -->
        <li class="todo" v-for="(item,index) in list">
          <div class="view">
            <span class="index" >{{ index+1 }}</span>
            <label>{{ item }}</label>
            <!-- 点击事件remove携带index索引 -->
            <button class="destroy" @click="remove(index)">X</button>
          </div>
        </li>
      </ul>
    </section>
    <footer class="footer">
      <span class="todo-count" v-if="list.length!=0"><strong>{{list.length}}</strong></span>
      <button class="clear" @click="clear" v-if="list.length!=0">清空</button>
    </footer>

  </section>

  <!-- 开发环境版本 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#todoapp',
      data: {
        list: [
          "语文",
          "英语",
          "数学",
          
      ],
        inputvalue:"好好学习"
      },
      methods:{
        add:function () {
          this.list.push(this.inputvalue);
        },
        // index 携带的行参
        remove:function (index) {
          // 删除1个
          this.list.splice(index,1)
        },
        // 清空事件
        clear:function () {
          this.list = []
        }
      }
      
    })
    

  </script>

</body>

</html>

结果

在这里插入图片描述

在线音乐案例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>新手练习</title>
</head>

<body
    ><div id="app">
        <input type="text" v-model="content"  value="请输入" @keyup.enter="searchmusic">
        <ul>
            <p style="color: brown;">正在播放:&nbsp;&nbsp;{{ musicName }}<audio  controls autoplay loop :src="musicU" controls="controls" autoplay="autoplay"></audio></p>
                
            
            <li v-for="item in content">
                {{ item.name }} 
                <button @click="playmusic(item.id,item.name)"  type="audio/mp3"  >
                    播放 
                </button>
            </li>
        </ul>
    </div> 
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.3/qs.min.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                content:"",
                musiclist:[],
                musicU:"",
                musicName:""
            },
            methods:{
                searchmusic:function () {
                    // var that =this
                    // "https://autumnfish.cn/api/joke/list?num=3"
                    // "https://www.pgnice.com/musicjs_bo/"
                    // ${name}
                    console.log(this.content)
                    var that = this
                    axios.get( "https://autumnfish.cn/search?keywords="+this.content)
                    
                //    "http://59.111.181.38/song/media/outer/url?id="
                    // "http://antiserver.kuwo.cn/anti.s?useless=/resource/&format=mp3&rid={}&response=res&type=convert_url&"
                    .then(response=>{
                        that.content = response.data.result.songs
                        
                    })
                },
                playmusic:function(musicId,musicname){
                    var that = this
                    axios.get("https://autumnfish.cn/song/url?id="+musicId)
                    .then(response=>{
                        that.musicU = response.data.data[0].url
                        that.musicName = musicname
                        // console.log(response.data.data[0].url)
                    })
                }
            }
        })
        // document.querySelector(".get").onclick = function () {
        //     axios.get("https://autumnfish.cn/api/joke/list?num=3")
        //     .then(function (response) {
        //         console.log(response)
        //     },function(err){
        //        console.log(err); 
        //     })
        //  }
         
    </script>

</body>

</html>