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. 巅峰对决：英伟达 V100、A100/800、H100/800 GPU 对比

    近期,不论是国外的 ChatGPT,还是国内诸多的大模型,让 AIGC 的市场一片爆火.而在 AIGC 的种种智能表现背后,均来自于堪称天文数字的算力支持.以 ChatGPT 为例,据微软高管透露,为 ...

  2. L2-031 深入虎穴

    并没有说根是谁 #include <bits/stdc++.h> using namespace std; using pii = pair<int, int>; const ...

  3. Android 面试知识总结

    Android知识点 1. 四大组件 分别是Activity.Service.ContentProvider.BroadcastReceiver. Activity称为活动,属于展示型组件,主要负责显 ...

  4. 4个LED流水灯

    #include "reg52.h" //此文件中定义了单片机的一些特殊功能寄存器 #include<intrins.h> //因为要用到左右移函数,所以加入这个头文件 ...

  5. Android app兼容低版本Java环境

    原文地址: Android app兼容低版本Java环境 - Stars-One的杂货小窝 起因是修复一个Bug遇到的问题,找到了一个可以让app兼容低版本java的方法 众所周知,Android版本 ...

  6. 一道入门的java安全题

    [XCTF]Zhuanxv 收获 java题的一般流程 HQL注入 SQL注入 看题 目录扫描 dirsearch扫目录,发现list目录: 一个登录界面,本着尽量不写sql注入题目的原则(因为太菜了 ...

  7. .NET8极致性能优化AOT

    前言 .NET8对于性能的优化是方方面面的,所以AOT预编译机器码也是不例外的.本篇来看下对于AOT的优化.原文:.NET8极致性能优化AOT 详述 首先明确一个概念,.NET里面的AOT它是原生的. ...

  8. Maven仓库settings.xml配置信息

    找到你的settings.xml配置文件E:\maven3.6.3\apache-maven-3.6.3\conf # 你的本地依赖仓库路径 <localRepository>E:\mav ...

  9. C++ Qt开发：Charts折线图绘制详解

    Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍QCharts ...

  10. java之switch用法

    多条件判断,判断条件是等值判断时,可以用switch 比如: 变量level=0时,输出"非会员" 变量level=1时,输出"打9折" 变量level=2时, ...