Vue基础常用指令

最新推荐文章于 2024-07-12 20:49:16 发布

LP_5371

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量666

点赞数

文章标签： vue html

本文链接：https://blog.csdn.net/LP_5371/article/details/107027122

版权

Vue

vue 介绍

Vue 是一套构建用户界面的渐进式前端框架。
只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
特点
- 易用：在有 HTML CSS JavaScript 的基础上，快速上手。
- 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
- 性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。

Vue 快速入门

下载和引入 vue.js 文件。
编写入门程序。
视图：负责页面渲染，主要由 HTML+CSS 构成。
脚本：负责业务数据模型（Model）以及数据的处理逻辑。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        {
  {msg}}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    new Vue({
    
        el:"#div",
        data:{
    
            msg:"Hello Vue"
        }
    });
</script>
</html>

Vue 快速入门详解

Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。
选项列表
el 选项：用于接收获取到页面中的元素。(根据常用选择器获取)。
data 选项：用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。
methods 选项：用于定义方法。方法可以直接通过对象名调用，this 代表当前 Vue 对象。
数据绑定
在视图部分获取脚本部分的数据。
{ {变量名}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门升级</title>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        <div>姓名：{
  {name}}</div>
        <div>班级：{
  {classRoom}}</div>
        <button onclick="hi()">打招呼</button>
        <button onclick="update()">修改班级</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    let vm = new Vue({
    
        el

最低0.47元/天解锁文章

LP_5371

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础常用指令

Vuevue 介绍Vue 是一套构建用户界面的渐进式前端框架。只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。特点易用：在有 HTML CSS JavaScript 的基础上，快速上手。灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。Vue 快速入门下载和引入 vue.js 文件。编写入门程序。视图：
复制链接

扫一扫