1. vue 使用快速入门三步走

(1) 新建 HTML 页面，引入 Vue.js文件

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>Vue.js 入门示例</title>

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

</head>

(2) 在JS代码区域，创建Vue核心对象，进行数据绑定

new Vue({

    el: "#app",

    data() {

        return {

            name: ""

        }

    }

});

创建 Vue 对象时，传递一个 js 对象，该对象中需要如下属性：

  • el ： 用来指定哪些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
  • data ：用来定义数据模型
  • methods ：用来定义函数。这个我们在后面就会用到

(3) 编写视图，绑定数据和方法

<div id="app">

  <p>{{ message }}</p>

  <button v-on:click="greet">Greet</button>

</div>

2. vue 常见指令及作用　　

常用的指令有

指令 作用
v-bind 为HTML标签绑定属性值，如设置 href , css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-for 列表渲染，遍历容器的元素或者对象的属性　

3. vue 生命周期　

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。

状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 载入前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数

这些钩子方法重点关注 mounted,也最常使用。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据。

小案例

列表查询

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!-- 页面标题 -->

<h1>欢迎你</h1>

<!-- 新增按钮 -->

<input type="button" value="新增" id="add"><br>

<hr>

<!-- Vue.js应用 -->

<div id="app">

    <!-- 数据表格 -->

    <table border="1" cellspacing="0" width="1200">

        <!-- 表头 -->

        <tr>

            <th>序号</th>

            <th>品牌名称</th>

            <th>企业名称</th>

            <th>排序</th>

            <th>品牌介绍</th>

            <th>状态</th>

            <th>操作</th>

        </tr>

        <!-- 利用v-for指令循环渲染品牌数据 -->

        <tr v-for="(brand,i) in brands" align="center">

            <!-- 序号 -->

            <td>{{i + 1}}</td>

            <!-- 品牌名称 -->

            <td>{{brand.brandName}}</td>

            <!-- 企业名称 -->

            <td>{{brand.companyName}}</td>

            <!-- 排序 -->

            <td>{{brand.ordered}}</td>

            <!-- 品牌介绍 -->

            <td>{{brand.description}}</td>

            <!-- 状态 -->

            <td>{{brand.status == 1 ? "启用" : "禁用"}}</td>

            <!-- 操作 -->

            <td>

                <a href="#">修改</a>

                <a href="#">删除</a>

            </td>

        </tr>

    </table>

</div>

<!-- 引入Vue.js库 -->

<script src="js/vue.js"></script>

<!-- 引入Axios库 -->

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

<script>

    new Vue({

        // Vue实例挂载到id为"app"的元素上

        el: "#app",

        data() {

            return {

                // 品牌数据列表

                brands: []

            }

        },

        // 在Vue实例挂载后执行的代码

        mounted() {

            var _this = this;

            // 发起GET请求获取数据

            axios({

                method: "get",

                url: "http://localhost:8080/brand_demo/selectAllServlet"

            }).then(function (resp) {

                // 将获取的数据赋值给brands数组

                _this.brands = resp.data;

            })

        }

    })

</script>

</body>

</html>

　　

vue 基础学习 一的更多相关文章

  1. Vue – 基础学习(4):事件修饰符

    Vue – 基础学习(3):事件修饰符

  2. Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别

    Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别

  3. Vue – 基础学习(2):组件间 通信及参数传递

    Vue – 基础学习(2):组件间 通信及参数传递

  4. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  5. 前端Vue基础学习

    Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...

  6. Vue 基础学习总结

    介绍 Vue.js 中文文档地址:https://cn.vuejs.org/guide/introduction.html#what-is-vue Vue.js 是什么 Vue (读音 /vjuː/, ...

  7. vue基础学习（二）

    02-01  vue事件深入-传参.冒泡.默认事件 <div id="box"> <div @click="show2()"> < ...

  8. vue基础学习（一）

    01-01 vue使用雏形 <div id="box"> {{msg}} </div> <script> window.onload= func ...

  9. 【转】vue基础学习

    1.基本绑定:    new Vue(        {            el:'#elID',            data:{                // data obj     ...

  10. vue基础学习（三）

    03-01  vue的生存周期-钩子函数 <style> [v-cloak]{display:none;} </style> <div id="box" ...

随机推荐

  1. Transformers 中原生支持的量化方案概述

    本文旨在对 transformers 支持的各种量化方案及其优缺点作一个清晰的概述,以助于读者进行方案选择. 目前,量化模型有两个主要的用途: 在较小的设备上进行大模型推理 对量化模型进行适配器微调 ...

  2. 深入理解JMeter中的JSON Extractor

    Apache JMeter是一款出色的开源性能和功能测试工具,这款工具提供了丰富的功能和强大的扩展性,可以应对各种复杂的测试需求.当我们在进行接口测试时,经常会遇到需要从接口响应中提取信息并在后续请求 ...

  3. 持续集成指南：GitHubAction 自动构建+部署AspNetCore项目

    前言 之前研究了使用 GitHub Action 自动构建和发布 nuget 包:开发现代化的.NetCore控制台程序:(4)使用GithubAction自动构建以及发布nuget包 现在更进一步, ...

  4. 在 Ubuntu 22.04 系统上为 SSH 开启基于时间的 TOTP 认证

    前言 一次性密码(英语:one-time password,简称OTP),又称动态密码或单次有效密码,是指电脑系统或其他数字设备上只能使用一次的密码,有效期为只有一次登录会话或一段短时间内.基于时间的 ...

  5. C#12中的Collection expressions（集合表达式语法糖）

    C#12中引入了新的语法糖来创建常见的集合.并且可以使用..来解构集合,将其内联到另一个集合中. 支持的类型 数组类型,例如 int[]. System.Span<T> 和 System. ...

  6. C语言已知四位数3025具有一个特殊性质：它的前两位数字30与后两位数字25之和是55，而55的平方正好等于3025。编程找出所有具有这种性质的四位数。

    #include<stdio.h> void main() { int n, i, j; for (n = 1000; n < 10000; n++) { i = n / 100; ...

  7. poj3710 （无向图删边博弈）

    引入:树上删边博弈 例题:给出一个有 N个点的树,有一个点作为树的根节点.游戏者轮流从树中删去边,删去一条边后,不与根节点相连的部分将被移走.谁无法移动谁输. 结论:叶子节点的SG值为0:中间节点的S ...

  8. SpringBoot实现Flyway的Callback回调钩子

    背景 产品迭代使用CI/CD升级过程中,需要对不同发布环境的不同产品版本进行数据库迭代升级,我们在中间某次产品迭代时加入了Flyway中间件以实现数据库结构的自动化升级. 需求 由于是迭代过程中加入的 ...

  9. 精通TypeScript：打造一个炫酷的天气预报插件

    前言 ​ 随着数字化和信息化的发展,数据大屏使用越来越广泛,我们不仅需要展示数据,更需要以一种更加美观的方式展示数据.这就必然需要使用到各种图表组件,比如柱状图.饼图.折线图等等.但是有一些效果不太适 ...

  10. 测试框架TestNG学习笔记

    目录 一.TestNG的基本介绍和如何在maven中引用 二.TestNG基本注解与执行顺序实战 2.1 注解实战 @Test标签 2.2 注解实战 BeforeMethod和AfterMethod ...