Vue快速入门巩固篇

最新推荐文章于 2023-03-14 11:10:57 发布

小峰同学的前端之路

最新推荐文章于 2023-03-14 11:10:57 发布

阅读量361

点赞数 1

分类专栏： Vue+Nuxt.js 文章标签： vue

本文链接：https://blog.csdn.net/abc465200/article/details/115245995

版权

本文介绍了Vue.js的发展背景和重要性，详细讲解了从第一个Vue项目到使用Vue-cli搭建项目的过程，包括MVVM模式、Vue基本语法、组件化、路由、状态管理和异步通信。此外，还探讨了Node.js在全栈开发中的作用、前端框架的演变以及Vue与其他框架的比较。通过实例演示了Vue的数据绑定、事件处理和组件通信，最后提到了Vue-cli的使用和webpack配置。

摘要由CSDN通过智能技术生成

文章目录

Vue

Soc 关注点分离原则

网络通信：axios

页面跳转：vue-router

状态管理：vuex

ice.work

css预处理器

是一门专门的编程语言，进行web设计，再通过编译器转成css文件，供项目使用

SASS 基于Ruby Less 基于Node.js

TypeScript:除了具备ES特征，加上了可选静态类型和基于类的面向对象类型

ja框架

JQuery:兼容IE

Angular:提出模块化开发，将后台MVC搬到前端

Reract：Facebook,提出虚拟dom，减少真实DOM操作，提升前端渲染能力，缺点需要学习语言JSX

Vue：渐进式框架，集合了模块化和虚拟dom

AXios:前端通信框架，因为vue边界清楚，为了处理DOM,不具备通信能力，功能类似于Jquery的ajax

前端发展史

UI框架：

Ant-design:阿里出品，基于React

Element-ui，iview,ice:饿了么，基于Vue

bootstrap

amazeUI:妹子UIhttps://amazeui.shopxo.net/

JavaScript构建工具

Babel:用于编译Ts

Webpack:模块打包工具

三端统一

混合开发：Hybrid App

云打包：HBuild->HBuildX,DCloud出品ApICloud

本地打包：Cordova

微信小程序：WeUI https://weui.io/

Node.js

Express:node.js框架

Koa:Express简化版

NPM:项目综合管理工具，类似Maven

Yarn:NPM的替代款，类似Maven和Gradle关系

Vue.js

Ivew https://www.iviewui.com/docs/introduce

ElementUI:

vue-element-admin：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD

前端为主的MV*模式

MVC：同步通信堵塞

MVP: Presenter

MVVM:Model View ViewModel 是异步通信为主

缺点：代码不能复用、全是异步，seo不利、需要后端配合

Node.js带来的全栈时代

js能在浏览器上运行

挑战：TCP和IP的掌握、Node.js层与java层的高效通信、对部署和运维方面

第一个Vue项目

什么是MVVM

MVVM是一种软件架构设计模式，是简化用户界面的事件驱动编程方式
MVVM是源于MVC,核心在于ViewModel层，负责转换Model中数据对象，来让数据更容易管理和使用
- 1.向上与视图层进行数据双向绑定
- 2.向下与Model层通过接口请求进行数据交互

为什么要使用MVVM

低耦合：View可以独立于Model变化和修改，一个ViewModel可以绑定多个View上，当View变化时，Model可以不变，反之亦然
可复用：可以把一些视图逻辑放在一个ViewModel中，让很多View重用这段视图逻辑
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel),设计人员可以专注页面设计
可测试：界面难以测试，现在可以针对ViewModel来写

MVVM的组成部分

V html css template模板 V和ViewModel是双向数据绑定
VM js+Runtime运行+Compiler编译 M-VM是通过AJAX来获取得到JSON数据
M 数据模型—

VM包含视图状态和行为，而Model层包含状态，VM的内容会实时展现在View层上，不用再操作dom来更新视图了，View层展现的是vm的数据，不是model层数据

demo-1

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--5.view层 数据绑定到页面元素-->
<div id="app">
{
  {message}}
</div>

<!--1.引用vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--2.创建Vue实例 vm-->
<script>
    var vm=new Vue({
        //3.绑定元素ID
        el:'#app',
        //4.Model 数据对象有个message属性，并设置初始值
        data:{
            message:'hello,world!'
        }
    });
</script>
</body>
</html>

测试：

IDEA打开:

为什么使用Vue.js

1.轻量级，体积小，压缩后20k＋，而Angular压缩后56k react是44k

2.移动端优先，更适合移动端，如Touch事件

3.社区活跃

4.易上手、文档齐全、学习趋向平稳

5.吸收了angular和React的长处，加上独有功能，如计算属性computed

MVVM的实现者Vue.js

核心是：实现DOM监听和数据绑定

测试Vue数据绑定

1.在程序上运行Vue文件，打开开发者工具

2.在控制台输入vm.message=’hello’,显示浏览器页面数据也变化了

在这个过程中，没有主动操作dom,页面就发生了变化，就是借助vue的DOM监听和数据绑定的

VM层通过观察者模式实现数据监听和绑定，来做到数据和视图快速响应的

Vue基本语法

v-bind指令，绑定属性

<h3 v-bind:title="message">哈哈哈哈</h3>

v-if、v-else-if、v-else

dome2

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
    <div v-if="ok===1">A</div>
    <div v-else-if="ok===2">B</div>
    <div v-else>C</div>
</div>

<!--1.引用vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            ok:5
        }
    });

</script>
</body>
</html>

for循环

demo-3

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
    <li v-for="(item,index) in items" :key="item.message">{
  {index}}---{
  {item.message}}</li>
</div>

<!--1.引用vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            items:[
                {message:'喻峰1'},
                {message:'喻峰2'},
                {message:'喻峰3'},
            ]
        }
    });

</script>
</body>
</html>

Vue绑定事件

v-on:click=可简化成@

vm的七大属性现在学会了三个

el（v-bind)
data(iv-if v-if-else v-else)
methods （v-on)

方法定义在Vue对象的methods中

demo-4

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
<!--在这里使用了v-on绑定了click事件，并指定了名为sayHi的方法-->
<div v-on：click="sayHi">111</div>
</div>

<!--1.引用vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:'#app', //学会v-bind
        data:{   //学会if if-else if-else-if for循环
            message:'喻峰学前端'
        },
        methods:{ //方法必须定义在Vue的methods对象里
            sayHi:function () { //学会v-on
                alert(this.message)
            }
        }
    });
</script>
</body>
</html>

Vue双向绑定

数据----视图双向变化v-model

只是对UI控件来说的，非UI控件没有双向数据绑定。
单向数据绑定是状态管理工具的前提。
我们用Vuex,数据流也是单向的；UI控件来说，对于我们处理表单，用双向绑定舒服来处理局部数据更方便

在表单中使用双向数据绑定

v-model用在**input`textarea`\select**元素上创建双向数据绑定

它会根据控件类型自动更新选取正确的方法更新元素

它监听用户的输入事件并更新数据

注意：v-model会忽略所有表单元素的value\checked\selected特征初始值，总是以Vue实例的数据作为数据来源，通过js在组件的data选项上声明初始值

demo-5

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
<!--    文本框-->
    <input type="text" v-model='radio'>{
  {radio}}<br>
<!--    textarea 区域-->
    <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>{
  {message}}<br>
<!--    radio单选的checked是默认选中，value，相同的name,双向绑定显示到底选中的是啥，这是改变了页面，页面里面绑定了数据-->
    <input type="radio" name="sex" value="男" v-model="随机">男
    <input type="radio" name="sex" value="女" v-model="随机">女
    选中的是：{
  {随机}}<br>

<!--    下拉框:注意--请选择--这里设置为value-->
    <select  v-model="selected">
        <option value="" disabled>--请选择--</option>
        <option value="A">1</option>
        <option value="B">2</option>
        <option value="C">3</option>
    </select>
选中的值是：{
  {selected}}
</div>

<!--1.引用vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            radio:'radio',
            message:'radio',
            // checked:true
            随机:'男',
            selected:''
        },
    });

</script>
</body>
</html>

注意：v-model表达式的初始值未匹配选项，元素会被渲染成未选中状态。

在IOS中，这会使得无法选中，就无法触发change事件，所以推荐用为空值的禁用状态

Vue组件component

1.在Js中创建Vue组件component,注意

Vue.component(‘yu’,{
props:[‘xx’],
template:’
{ {xx}}
’
});

2.组件获取页面数据，注意绑定参数

<yu v-for=“item in items” v-bind:xx=“item”>

其中data是在主页面上的

demo-6

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
<yu v-for="item in items" v-bind:xx="item"></yu>
</div>
<!--1.引用vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    // 3.创建Vue组件 component
    Vue.component('yu',{
        props:['xx'],
        template:'<li>{
  {xx}}</li>'
    });
   // 2.创建Vue实例
    var vm=new Vue({
        el:'#app',
        data:{
            items:['你','我','他']
        }
    });

</script>
</body>
</html>

使用props属性传递参数

传递参数到组件，用props

分析上面代码:

1.v-for="item in items"会遍历Vue实例中定义为items的数组，并且会创建同等数量的组件

2.v-bind:xx="item"会把遍历的item项，绑定到组件中props定义的 xx 属性上，

其中**=号左边为props定义的属性名**，右边为items遍历的item项的值

Axios异步通信

1.先引入axios cdn和data.json文件

2.mounted() 数据前

**axios.get(’’)**和 .then(res=>res.data)

    // get()里面是字符串
    mounted(){
   
        axios.get('../data.json').then(response=>this.info=response.data)}
});

3.创建data()方法

返回info对象，内部格式和json数据一致，null

4.在视图层使用

url，用**v-bind:href=‘info.url’**来绑定属性

<div>{
  {info.name}}</div>
<!--<div>{
   {info.url}}</div>-->
<a v-bind:href="info.url">{
  {info.url}}</a>
<div v-for="item in info.links" :key="item.name">
    <span>{
  {item.name}}</span>
    的链接是
    <a :href="item.url">{
  {item.url}}</a>
</div>

data(){
    return{
        info:{
            'name':null,
            'url':null,
            'page':null,
            'address':{
                'street':null,
                'city':null,
                'country':null
            },
            link:[
                {
                    "name":null,
                    "url":null
                }
            ]
        }
    }

demo7.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
<div>{
  {info.name}}</div>
<!--<div>{
   {info.url}}</div>-->
<a v-bind:href="info.url">{
  {info.url}}</a>
<div v-for="item in info.links" :key="item.name">
    <span>{
  {item.name}}</span>
    的链接是
    <a :href="item.url">{
  {item.url}}</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--1.引入axios-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    var vm=new Vue({
    
        el:'#app',
        // data:'1', 此时是错误的，要返回数据，需要data方法而不是数据
        data(){
    
            return{
    
                info:{
    
                    'name':null,
                    'url':null,
                    'page':null,
                    'address':{