Vue3.0高阶实战:开发高质量音乐Web app

时间:2021-04-08 13:16:05   收藏:0   阅读:0

Vue3 特性升级

  • 体积更小、速度更快
  • 解决遗留问题
  • 相对于原生的JS编程,Vue3是面向数据编程,直接操作数据,
    少了通过 组件id 去get到组件 完了set值等面向DOM的编程,提高开发效率;

本文主要涉及的 语法糖 与 知识点:

文章内容将围绕这些 语法糖 与 知识点 展开 demo实现讲解 和 相关阐述;

-Vue.createApp(),创建Vue实例,开始使用Vue;

-.mount()指定在哪个组件上使用Vue;
注意没有被mount()指定的组件是不会生效的!

-变量的使用,用双花括号{{}}表示【也叫插值表达式】,
template:‘<div>{{content}}</div>‘

-template:vue的重点,
意思是在mount()指定的组件中,展示template的内容,
其中的组件可以与data()中的数据相互绑定;

-data(){ return{ ***:*** (, ***:***, ... ) } }:vue的重点,
用于存放数据,可以为template提供数据供其绑定,
配合template完成数据UI双向绑定

【!!!数据UI 双向绑定!!!】
组件UI绑定数据的值
数据发生改动,则UI随之发生变化!!!
开发者可以通过js脚本去控制数据变化从而使得相关UI组件发生变化
(学过安卓的同学可能发现这有点类似于安卓的Adapter设计模式 / MVVM 设计模式

-mounted()方法,当页面加载完成的时候会调用,其实它就是一个 Vue生命周期回调

-template的冒号之后,可以用反引号 “ ` ” 来囊括表述更多的组件;

-v-on:是Vue的一个指令,表示要绑定事件
v-on:click表示要绑定点击事件

-methods对象中可以用来编写Vue架构中使用到自定义函数/方法

-v-if:标签配置了v-if指令的话,
则标签(对应UI组件)的显示与否v-if指令所指定的值决定;

-v-for:标签配置了v-for指令,
则标签(对应UI组件)可以迭代遍历其绑定的数据List,
遍历的内容(index、item等)可以由v-for指定;

-v-model:标签配置了v-model指令,
则标签(对应UI组件)的内容(如input标签对应的输入框组件的内容),
会跟v-model指定的数据变量/字段(一般这个数据字段存放在data()特性函数中)的值双向绑定!!!;

-v-bind:指定标签组件的某个属性(如例子中挂载的title属性)跟数据绑定;
注意跟v-model区分开来,
v-model指定的是标签组件的内容跟数据绑定;

另外注意,
v-bind的冒号后接着的是v-bind 修饰的组件的属性,
接着等号后面接着的是组件属性对应要绑定的数据字段名,
<my-todoItem v-for="item of hehedaList" v-bind:content="item"/>中,
content为组件my-todoItem的属性,content这个属性绑定的数据字段为item;

-【拆组件设计思想】,将页面的某一个部分 作为 独立的模块 聚合出来;
避免把整个网站的内容编写全部放在一个文件中;

-注意调用顺序!!!
必须先实例化Vue()应用实例,
然后再component()注册组件,
然后再mount()挂载入;

-【使用component()注册组件,组件化的组件模块】,
注册之后可以直接作为一个标签组件来使用:
heheApp.component(‘my-todoItem‘, {...});是注册组件的代码,
一参为组件名字,二参可以编写组件的UI和数据等描述,
之后在Vue.createApp()template中,
就可以像这样,把我们自己注册的组件的组件名,
像DOM标签一样去使用:<ul><my-todoItem .../></ul>

-【v-bindprops
v-bind组件绑定的数据字段(如下面demo中的content),
会在注册该组件的代码模块(heheApp.component())中的props字段中被接收到

 

Demo:HelloWorld

本demo涉及的 语法或知识:

-Vue.createApp(),创建Vue实例,开始使用Vue;

-.mount()指定在哪个组件上使用Vue;
注意没有被mount()指定的组件是不会生效的!

 

开始步骤
  • 下载好 VSCode

  •  

     

    随便创建一个新的文件夹:
     
    技术图片
     

 

  •  

     

    把文件夹拖到VSCode打开;
     
    技术图片
     

 

  •  

     

    创建一个html文件:
     
    技术图片
     
     
    技术图片
     

 

  • 输入!然后敲一下Tab键,自动生成H5代码架构
     
    技术图片
     
     
    技术图片
     

 

  • 接着在head标签中,
    加入一行<script src="https://unpkg.com/vue@next"></script>
    就可以直接引入Vue库,使用Vue编写代码了:
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

 

  • 键入例程:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root_div"></div>
</body>
<script>
    //使用Vue创建一个实例连接到root_div组件,注入内容
    Vue.createApp({
        template:‘<div>Hello World! heheheheheheda</div>‘
    }).mount(‘#root_div‘);
</script>
</html>

 

  • 保存键入的例程之后,在文件夹处双击html文件:
     
    技术图片
     
    成功显示内容:
     
    技术图片
     

 

  • &举一反三:
    再来一个例程,再度理解Vue.createApp()mount()的用法:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root_div"></div>
    <div id="root_div2"></div>
</body>
<script>
    //使用Vue创建一个实例连接到root_div组件,注入内容
    Vue.createApp({
        template:‘<div>Hello World! heheheheheheda!!!</div>‘
    }).mount(‘#root_div‘);
    Vue.createApp({
        template:‘<div>Hello World! lueluelueluelue!!!</div>‘
    }).mount(‘#root_div2‘);
</script>
</html>

效果:

 
技术图片

把对应的mount()注释掉,对应的组件就不会生效了:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root_div"></div>
    <div id="root_div2"></div>
</body>
<script>
    //使用Vue创建一个实例连接到root_div组件,注入内容
    Vue.createApp({
        template:‘<div>Hello World! heheheheheheda!!!</div>‘
    }).mount(‘#root_div‘);
    // Vue.createApp({
    //     template:‘<div>Hello World! lueluelueluelue!!!</div>‘
    // }).mount(‘#root_div2‘);
</script>
</html>
 
技术图片
 
 
技术图片
 

 

Demo:变量、数据UI绑定

本demo涉及的 语法或知识:

-template:意思是在mount()指定的组件中,展示template的内容;

-变量的使用,用双花括号{{}}表示,如template:‘<div>{{content}}</div>‘

-data(){ return{ ***:*** } }函数的使用,可以配合template完成数据UI双向绑定;

  • 修改body#script部分的代码:
<script>
    //使用Vue创建一个实例连接到root_div组件,注入内容
    Vue.createApp({
        data(){
            return{
                content: ‘66668686‘
            }
        },
        template:‘<div>{{content}}</div>‘
    }).mount(‘#root_div‘);
</script>

 

 

效果:
 
技术图片
 

data()完成数据配置,template指定UI,两者配合完成双向绑定;
mount()指定渲染的目的HTML组件,各司其职!

 

Demo:mounted()应用

本demo涉及的 语法或知识:

-mounted()方法,当页面加载完成的时候会调用,其实它就是一个 Vue生命周期回调

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root_div"></div>
</body>
<script>
    Vue.createApp({
        data(){
            return{
                content: ‘66668686‘
            }
        },
        mounted(){
            console.log(‘monnted ====‘)
        },
        template:‘<div>{{content}}</div>‘
    }).mount(‘#root_div‘);
</script>
</html>

效果:

 
技术图片
可见当页面加载完成时候,会自动调用mounted()中的逻辑,执行其中的代码;


&举一反三:
再一例,利用这个生命周期回调,我们写一个迭代计时器:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World! heheheheheheda</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root_div"></div>
</body>
<script>
    Vue.createApp({
        data(){
            return{
                content: 66668686
            }
        },
        mounted(){
            setInterval(() => {
                this.content += 1;
                console.log(‘monnted ====‘ + this.content)
            }, 1000);            
        },
        template:‘<div>{{content}}</div>‘
    }).mount(‘#root_div‘);
</script>
</html>

注意:this.content等价于this.$data.content

效果图:

 
技术图片

 

 

Demo:Vue事件绑定(v-on)、methods对象

vue3需要node版本至少8.9

  • 卸载vue 2.x npm uninstall -g vue-cli
  • 安装vue3.x npm install -g @vue/cli

初始化vue项目

  • 初始化项目 vue create myproject,选择默认安装方式即可
  • 启动项目 npm run serve
  • vue add element
  • vue add iview
  • vue add vant
  • vue add router
  • vue add axios

vue.config.js

module.exports = {
    devServer: {
        port: 8081,//端口
        open: true,//是否自动打开浏览器
        proxy: {
            "/api": {
                target: "http://192.168.1.141:20081",
                ws: true,
                changeOrigin: true,
                pathRewrite: {‘^/api‘: ‘‘}
            }
        }
    }
};






评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!