只是曾路过
只是曾路过

Vue | 基础语法快速入门

文章目录

  • 一、初识 Vue.js
  • 二、Vue.js 模板语法
  • 三、Vue.js 基础指令
    • 1、分支判断
    • 2、循环
    • 3、事件绑定
  • 四、表单数据双向绑定
    • 1、输入框
    • 2、文本域
    • 3、单选框
    • 4、下拉框
  • 五、Vue 组件
  • 六、网络通信 Axios
  • 七、计算属性
  • 八、插槽的使用
  • 九、自定义事件分发

一、初识 Vue.js

Vue.js 是啥 ？

  • Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
  • Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
  • 当与现代化的工具链以及各种支持类库结合使用时，Vue 能够为复杂的单页应用提供驱动。

为啥要用 Vue.js ？
学过 jsp 与 php 的应该都知道，当前端页面要加载后台数据时，如发送 Ajax 请求，往往需要通过繁琐的修改 DOM 来更新数据。
有了 Vue.js，我们便可以轻轻松松地完成数据绑定工作，同时也避免大量的原生 javascript 或者是 jQuery 代码，给前端开发带来了很大的方便
除此之外，许多 UI 框架都会涉及到 Vue，因为其具有丰富的组件库
最后，Vue.js 是实现前后端分离的关键，其可以实现前端模块化与工程化开发

二、Vue.js 模板语法

Vue.js 的模板语法为：{ { data }}，其中的 data 为需要显示的数据的变量名（即在 Vue 实例的 data 中定义的 key 值）
在写 Vue 之前，需引入其 CDN：

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

第一个 Vue 程序如下：

    <div id="app">
        {
    {message}}
    div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
    <script>
        var vm = new Vue({
      
            el: "#app",
            data: {
      
                message: 'vue-01~~~',
            }
        });
    script>

浏览器运行后会显示 js 中 Vue 实例对应的 data 的 message 值（这里为：vue-01~~~），我们无需与 HTML 直接交互，一个 Vue 应用可以挂载到一个 DOM 元素上，即 Vue 实例中 el 的 id 与 html 标签的 id 一一对应绑定，data 定义 Vue 应用的数据，如这里的 message，HTML 的 DOM 中只需通过模板（两个大括号）包裹 data 中定义的 key 即可显示对应的数据

三、Vue.js 基础指令

掌握了 Vue.js 的模板语法后，我们首先掌握一些基础指令的使用，同时以下的基础指令也是经常要用到的

1、分支判断

    <div id="app">
        <h1 v-if="date=='Yesterday'">昨天h1>
        <h1 v-if="date=='Today'">今天h1>
        <h1 v-else-if="date=='Tommrrow'">明天h1>
        <h1 v-else>后天h1>
    div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
    <script>
        var vm = new Vue({
      
            el: "#app",
            data: {
      
                date: 'Today'
            }
        });
    script>

date 的值为 Toady，则最终显示的是文本是“今天”

2、循环

    <div id="app">
        
  • 
            第{
    {index}}个标签： {
    {item.message}}
        li>
    div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
    <script>
        var vm = new Vue({
      
            el: "#app",
            data: {
      
                items: [
                    {
      message: '昨天不够认真'},
                    {
      message: '今天加油冲'},
                    {
      message: '明天会更好'}
                ]
            }
        });
    script>

    • v-for 标签类似于 for each 循环，在 javascript 中，方括号对应数组，大括号对应对象，需通过【对象.属性名】获取对象的属性值，
    同时通过 index 参数，我们可以得到循环的索引，其默认从 0 开始

    3、事件绑定

        <div id="app">

    通过 v-on 绑定事件，v-on:click 表示绑定的是点击事件，绑定的事件需在 Vue 实例的 methods 中声明，注意不要少了 methods 末尾的 s

    四、表单数据双向绑定

    表单通过 v-model 实现数据双向绑定，当表单的数据发生变化时，对应 Vue 实例中 data 中相应变量的值也会发生变化
    我们可将 Vue 实例中的变量回显出来，以查看双向绑定的效果，具体实例如下：

    1、输入框

        <div id="app">
        输入：
        回显：{
    {message}}
    div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
    <script>
        var vm = new Vue({
      
            el: "#app",
            data: {
      
                message: ''
            }
        });
    script>

    运行效果如下：
    在这里插入图片描述

    2、文本域

        <div id="app">
        输入：