如何优雅的学习Vue之基础入门篇(一)

目录

一、Vue的概念

1.1 Vue是什么？

  • 按官方的话来说，是用于构建用户界面的渐进式框架
  • 自底向下逐层的设计
  • 核心只关注视图层，单页面应用

所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

标注：渐进式框架(一开始不需要完全掌握它的全部功能特性，后续可以逐步增加。这对于新手而言很友好) 具体可访问：什么是渐进式框架

Vue.js循着MVVM模式，如官方文档所写一样，Vue 的核心库只关注视图层。

开发架构模式并不止一种，还有如MVC、MVP等，可以在这里了解。

MVVM:

Model:模型，数据和业务在这里定义

View：视图，负责数据的展示

VM：负责监听Model中数据的改变并控制视图的更新，处理用户交互，这是Vue在做的事。

直观理解：

1.2 Vue安装

1、在Vue的官网上直接下载Vue.min.js文件(压缩)

2、使用CDN引入Vue

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

3、使用npm安装 引用菜鸟教程的话：由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。

1.3 Vue的CDN写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <!--CDN方式引入Vue（需联网）-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="App">
        <p>{{name}}</p>
    </div>
</body>
<script>
let Vm = new Vue({
    el:"#App",
    data(){ //data方法，使用了ES6写法
        return{
            name:"你好"
        }
    },
    methods:{}
})
</script>
</html>

二、Vue的基础语法

这里我们会少提及vue提供的语法底层实现，只专注于vue的语法是什么，怎么用。

2.1 插值语法

关键:{{}}

<div id='dl'>
    <p>{{message}}</p>  <!--用两个大括号圈起来，-->
</div>

var sa = new Vue({
     el:'dl',
     data:{
            message:'文本内容'
        }
})

2.2 v-bind 单向绑定

单向：数据只能从data流向页面

双向：数据能从data流向页面，还可以从页面流向data

<span v-bind:title="message"></span>
//title:123
//将这个元素节点的title与实例message值保持一致
​
<a v-bind:href="url">...</a>
//href attribute 与表达式 url 的值绑定
​
//缩写
<a :href="url">...</a>
<!--同样的，可以用到css上-->
<a :style="astyle" :href="alink"></a>
​
​
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
​

new Vue({
    el:'#x',
    data:{
        message:'123',
        astyle:{color:"#000",fontSzie:"18px"},
        alink:"www.baidu.com"
    }
})

2.3 v-for循环

v-for指令可以绑定数组的数据来渲染一个项目

<!-- i代表索引 -->
<p v-for='(s.i) in list'>{{s.id}}+{{s.name}}</p>
​
<!--循环对象,v-for='(值,键,索引) in user' -->
<p v-for='(val,key,i) in user'> </p>
​
<!--循环数字,v-for='user in 4 ' 从1开始循环 -->
<p v-for='user in 4'>{{user}} </p>

new Vue({
    el:'xx'
data:{
        list[
        {id:1,name:'xx1'}
        {id:2,name:'xx2'}
        {id:3,name:'xx3'}
            ]
        user:{
            id:1,
            name:'xxx',
            gender:'男'
        }
    }
})

2.4 v-if v-else 判断

通过v-if来控制切换一个元素的显示与隐藏。将数据绑定在了DOM结构上，在显示或隐藏中，vue提供了过渡效果系统，具体可以看到这个效果，点击左侧的侧边栏模块时，切换的过渡动画效果。

需要注意v-if和v-show的区别，因为在面试中，v-if和v-show的区别常常被问及。百度即可。

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
  
  <p v-else>现在呢</p> <!--当seen不为true时，显示-->
</div>

new Vue({
    el:'#x',
    data:{
        seen:true
    }
})
//当seen为flase时，之前显示的消息消失

更复杂的判断

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

<div id="app">
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else="type === 'NO'">NO A and B</div>
</div>
<!--当type为A时，显示A-->
<!--当type为B时，显示B-->
<!--当type为NO时，显示NO A and B-->

new Vue({
    el:'#app',
    data:{
        return:{
            type:'A',//B,NO
        }
    }
})

v-show 显示隐藏是 display:'none'，DOM还在，有其用武之地

v-if 显示隐藏是 将DOM元素整个添加和删除，消耗更大，但有其用武之地;

2.5 v-show 显示与隐藏

接受布尔值(true || false)，示例如下

<div id="app">
<h1 v-show="type === 'x'">Hello!</h1>
</div>

new Vue({
    el:'#app',
    data:{
        return{
            type:'x',//显示,不为x时隐藏
        }
    }
})

2.6 v-on 事件监听器

v-on事件监听器，调用在Vue实例中定义的方法：

<div>
<button v-on:click="message">点击</button>
</div>
​
<!--缩写-->
<button @click="message">点击</button>
​
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

new Vue({
    el:'#x',
    data:{
    },
    methods:{
        message(){
            console.log('成功点击，弹出消息');
        }
    }
})

2.7 v-model 双向绑定

一般应用在表单类元素上，如input、select等

<div>    
<input id="t" v-model="text">
<p>{{text}}</p>
</div>
​
<!--将同步更新消息-->

new Vue({
    el:'#1',
    data:{
        text:'',
    }
})

如下语法将不做介绍:

  • v-html接受html代码

三、Vue的组件基本写法

组件系统是Vue的一个重要概念，使用小型，可复用的组件构建大型应用，就像搭积木一样。抽象的东西，要通过大脑想象来模拟场景。比如看到一个页面，看到布局，把它想象成搭积木、树干与树枝、烫手的砖与搭建好的砖房

SPA(single-page application)

单页面应用，解释为只有一个HTML页面，通过路由实现页面内的局部切换，公共资源部分只加载一次

好处：整体一次下载，频繁的操作，可以减少网络流量

3.1 Vue的基本写法

//js
<script>
  new Vue({
    el:"",//挂载
    data:{},//绑定数据
    methods:{},//绑定的方法
    mounted(){}//一般用来数据的初始化
    created(){},//生命周期
});
</script>

3.2 了解组件

这是一个组件的结构

index.js

//name.js
    Vue.component('xxx',{  //创建自定义的组件xxx
        template:` `, //写html代码 是V：视图
        props:[],   //传输数据
        data:function(){    //定义数据,是M:存储数据
            return:{
                
            }
        },
        methods:{ //方法
            
        },
        //生命周期
        created:function(){
           
        }
    })

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JS/vue.js"></script>
    <script></script> <!--我们需要引用组件的js文件-->
</head>
<body>
    <xxx> </xxx>    <!--我们定义的组件-->
</body>
</html>

3.3 组件的基本使用

这有一个使用组件模板的例子：

index.js

/*定义一个名为index-title的组件，使用<index-title></index-title>来使用
  可通过new Vue实例，作为自定义的元素来使用，
  它具有Vue身上的data、methods、生命周期钩子等，
  当然，作为组件，它可以无限制的复用
*/
​
// Vue.component：全局注册
Vue.component("index-title",{
    //传值
    props:{
        title:{
            type:String,
            default:"这是一个可复用的组件"
        }
    },
    //模板，写HTML
    template:`
        <section>
            <h1>这是一个很好的开始：{{title}}</h1>
        </section>
    `,
    //绑定的数据源
    data(){
        return{}
    },
    //绑定的方法
    methods:{
        
    }
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../assets/vue.js"></script>
​
    <script src="./index.js"></script><!--全局组件的引入-->
</head>
<body>
    <div id="app">
        <span>这是{{name}}</span>
        <index-title :title="title"></index-title>
        <index-title :title="text"></index-title>
        <index-title ></index-title><!--当不给值时，会使用定义的默认值-->
        <!--局部组件-->
        <local></local>
    </div>
​
    <!-- 不要忘记添加 type="module" -->
    <script type="module">
    //局部组件的引入
    import local from "./component.js";
​
    new Vue({
        el:"#app",
        data(){
            return{
                name:"一个实例",
                title:"希望我们能走下去",
                text:"仰望星空",
            }
        },
        // 注册
        components:{
            "local":local
        }
    })
    </script>
</body>
</html>

需要注意的是，上述注册了全局组件和局部组件，局部组件的示例在这里，将component.js写入，报错才会解决。同时要注意路径问题。

component.js

export default{
    template:`<h1>这是个局部组件的例子啊</h1>`,
    data(){
        return{}
    }
}

上述所展现的组件的基本使用，可以在这里找到代码。

3.4 prop 数据传递

prop 数据单项传递，父影响子，子不影响父

所有 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来不行。这样会防止子组件意外变更父组件的状态，从而导致你的应用的数据流向难以理解。

官方提供的例子

3.5 组件工程化

将每个组件封装为一个后缀为.vue的文件，当需要使用时，将其import到页面上，如搭积木一样

上述所示例的代码，是组件的基本使用，Vue提供了vue-cli脚手架来构建项目。

在我们了解了Vue的组件后，我们需要知道一些组件的UI框架，使我们的开发更加高效简便.

如:Element、Ant Design Vue、View Design

四、最后的最后

了解UI框架来更好的开发项目，这里有Ant Design Vue、Element、iview

这里是十五。您的点赞是我努力写高质量、简单生动文章的动力！

posted @   十五十五  阅读(265)  评论(0)  编辑  收藏  举报
相关博文：
· Vue2.0 个人笔记
· 开发架构模式
· Vue快速入门
· Vue简介
· Vue 3.0 介绍
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示