Vue 学习（一）

已于 2024-01-12 14:06:08 修改
阅读量794 收藏
点赞数
分类专栏： Vue学习 文章标签： vue.js 学习 webpack
于 2022-08-11 16:19:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/name_sakura/article/details/126259674
版权

文章目录

1.第一个实例

script标签在HTML页面放置的位置
https://blog.csdn.net/weixin_45832482/article/details/123289919

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<div id="app">
	    <p> {{message}}</p>
	</div>
	<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
	<script>
	    new Vue({
	        el: '#app',
	        data: {
	            message: 'Hello'
	        }
	    })
	</script>
</body>
</html>

2.安装

2.1 安装nvm

用于下载和管理nodejs的版本

nvm安装与使用
https://www.jianshu.com/p/4849adf7fccc

nvm list
nvm list available
nvm install [node版本号] 
nvm uninstall [node版本号]
nvm use [node版本号]

2.2 nodejs

通过nvm下载nodejs

node -v

2.3 npm

npm是nodejs的包管理和分发工具，nodejs中包含npm。

npm 常用命令
https://blog.csdn.net/qq_39579242/article/details/123169709

npm -v
npm config list
npm config set registry https://registry.npm.taobao.org  //设置淘宝镜像源
npm config set registry https://registry.npmjs.org  //设置npm源
npm install cnpm -g --registry= https://registry.npm.taobao.org //安装淘宝镜像

3.构建Vue项目

3.1 安装Vue.js

（1）直接下载vue.min.js，并用 script标签引入
（2）使用 CDN 方法

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

（3）使用NPM安装

cnpm install vue

3.2 创建项目

cnpm install --global vue-cli  // 全局安装 vue-cli
vue init webpack my-project  // 创建一个基于 webpack 模板的新项目
cd my-project
cnpm install  // 安装依赖
cnpm run dev  // 运行

3.3 Vue 项目打包并运行

3.3.1 打包
// 执行完成后，会在 Vue 项目下生成一个 dist 目录，一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images。
// 如果直接双击 index.html 打开浏览器，页面可能是空白了，想要正常显示，可以修改 index.html 文件中 js、css 文件的路径。
npm run build
3.3.2 开发测试-项目中运行
npm run dev
3.3.3 服务器部署-运行dist文件
// 运行dist
npm i -g serve
cd dist
serve

4.Vue项目结构

目录/文件说明
build项目构建(webpack)相关代码。
config配置目录，包括端口号等。初学可以使用默认的。
node_modulesnpm 加载的项目依赖模块。
src开发目录 (1) assets: 放置一些图片，如logo等。(2) components: 存放组件。(3) App.vue: 项目入口文件，可以直接将组件写这里，而不使用 components 目录。(4) main.js: 项目的核心文件。
static静态资源目录，如图片、字体等。
test初始测试目录，可删除。
.xxxx文件一些配置文件，包括语法配置，git配置等。
index.html首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json项目配置文件。
README.md项目的说明文档，markdown 格式

4.1 Vue文件加载执行流程

（1）执行index.html文件
（2）执行main.js文件
（3）main.js挂载了app.vue文件，用app.vue的templete替换index.html中的
（4）main.js中注入了路由文件，将对应的组件渲染到router-view中
（5）router-view中加载Layout文件
（6）Layout 加载Navbar, Sidebar, AppMain

Vue文件加载执行流程
https://blog.csdn.net/IT__learning/article/details/114294180

npm包的安装与卸载
https://blog.csdn.net/ernijie/article/details/104948880

4.2 修改页面并测试

src/App.vue

<!-- 展示模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
// 导入组件
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

<!-- 样式代码 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/components/Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '欢迎来到菜鸟教程！'
    }
  }
}
</script>

5.main.js中实例化Vue

Vue 构造器：
（1）el 参数： DOM 元素中的 id
（2）data：定义属性，实例中有三个属性分别为：site、url、alexa
（3）methods ：定义函数，可以通过 return 来返回函数值
（4）{{ }} ：输出对象属性和函数返回值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>site: {{site}}</h1>
        <h1>url: {{url}}</h1>
        <h1>{{details()}}</h1>
    </div>

    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

    <script type="text/javascript">
        var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
        var vm = new Vue({
            el: "#app",
            data: data,
            methods: {
                details: function () {
                    return this.site + "aa";
                }
            }
        })
        vm.site = "教程"
        document.write("===========================<br>");
        document.write(vm.site);
        document.write("<br>");
        document.write(vm.$data === data);  // 前缀$，以便与用户定义的属性区分开
        document.write("<br>");
        document.write(vm.$el === document.getElementById('app')) // true
        document.write("<br>===========================");
    </script>
</body>
</html>

6.模板语法

6.1 显示文本：插值表达式 {{ }}

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

6.2 显示Html：v-html

使用 v-html 指令输出 html 代码

<body>
    <div id="app">
        <div v-html="t"></div>
    </div>

    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
            	t: '<h1>t111<h1>',
            }
        })
    </script>
</body>

6.3 绑定html属性值：v-bind

HTML 属性中的值应使用 v-bind 指令。

label标签中for属性和input绑定，使得点击label时会选中input。
input标签中v-model实现双向绑定。

v-bind绑定div的class属性。

id选择器#，class选择器.

pre预定义格式，等宽字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .class1 {
        background: aliceblue;
        color: bisque;
    }
</style>
<body>
    <div id="app">
        <label for="i1">点击切换颜色</label>
        <input type="checkbox" id="i1" v-model="use">

        <div v-bind:class="{'class1': use}">
            AAAAAAAAAAAAAAAAAAAA
        </div>

		<pre><a v-bind:href="url">菜鸟教程</a></pre>
    </div>

    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

    <script type="text/javascript">
        new Vue({
            el:"#app",
            data: {
                use: false,
                url: 'http://www.runoob.com'
            }
        })
    </script>
</body>
</html>

6.4 表达式

Vue.js 提供了完全的 JavaScript 表达式支持。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #list1 {
        background: aliceblue;
        color: bisque;
    }
</style>
<body>
    <div id="app">
        {{ 5+5 }} <br>
        {{ ok ? 'true' : 'false' }} <br>
        {{ message.split('').reverse().join('') }}
        <div v-bind:id="'list' + id">AAAA</div>
    </div>

    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

    <script type="text/javascript">
        new Vue({
            el:"#app",
            data: {
                ok: true,
                message : '123456789',
                id: 1
            }
        })
    </script>
</body>
</html>

6.5 条件判断是否显示：v-if

指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
v-if 指令将根据表达式 的值(true 或 false )来决定是否插入元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <label for="i1">点击显示</label>
    <input type="checkbox" id="i1" v-model="use">

    <p v-if="use">现在你看到我了</p>
    <template v-if="use">
        <h1>菜鸟教程</h1>
        <p>学的不仅是技术，更是梦想！</p>
        <p>哈哈哈，打字辛苦啊！！！</p>
    </template>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            use: false
        }
    })
</script>
</body>
</html>

6.6 监听DOM事件：v-on

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="按钮" v-on:click="show()">
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            use: false
        },
        methods: {
            show : function () {
                alert(1);
            }
        }
    })
</script>
</body>
</html>

6.7 修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用event.preventDefault()，阻止默认的事件发生。

下面.prevent会阻止表单在submit后的刷新事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <form v-on:submit.prevent="onSubmit">
        <input type="submit" value="submit">
    </form>
    <form v-on:submit="onSubmit">
        <input type="submit" value="submit">
    </form>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            use: false
        },
        methods: {
            onSubmit : function () {
                console.log('submit')
            }
        }
    })
</script>
</body>
</html>

6.8 用户输入：v-model双向数据绑定

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

6.9 文本格式化：过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message | capitalize }}
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>
</body>
</html>

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

这里，message 是第一个参数，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

6.10 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

7.条件语句：v-if v-else-if v-else

也可以使用 v-show 指令来根据条件展示元素，用法和v-if相同

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .class1 {
        background:blue;
        color: grey;
    }
</style>
<body>
    <div id="app">
        <form>
            <input type="radio" name="sex" value="male" v-model="se">Male<br>
            <input type="radio" name="sex" value="female" v-model="se">Female<br>
            <input type="radio" name="sex" value="None" v-model="se">None<br>
        </form>

        <div v-if="se === 'male'">
            Male
        </div>
        <div v-else-if="se === 'female'">
            Female
        </div>
        <div v-else>
            None
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                se: 'male'
            }
        })
    </script>
</body>
</html>

8.循环语句：v-for

8.1 数组

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .class1 {
        background:blue;
        color: grey;
    }
</style>
<body>
    <div id="app">
        <ul>
            <li v-for="site in sites">
                {{ site.name }}
            </li>
        </ul>

		<ul>
            <template v-for="site in sites">
                <li>{{ site.name }}</li>
            </template>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                sites: [
                    { name: 'Runoob' },
                    { name: 'Google' },
                    { name: 'Taobao' }
                ]
            }
        })
    </script>
</body>
</html>

8.2 迭代对象

通过一个对象的属性来迭代数据：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .class1 {
        background:blue;
        color: grey;
    }
</style>
<body>
    <div id="app">
        <ul>
            <li v-for="object in objects">
                {{ object }}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                objects: {
                    name: '菜鸟教程',
                    url: 'http://www.runoob.com',
                    slogan: '学的不仅是技术，更是梦想！'
                }
            }
        })
    </script>
</body>
</html>

用value-key-index接收数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .class1 {
        background:blue;
        color: grey;
    }
</style>
<body>
    <div id="app">
        <ul>
            <li v-for="(value, key, index) in objects">
                {{ key }} : {{ value }}: {{ index }}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                objects: {
                    name: '菜鸟教程',
                    url: 'http://www.runoob.com',
                    slogan: '学的不仅是技术，更是梦想！'
                }
            }
        })
    </script>
</body>
</html>

迭代整数

<div id="app">
    <ul>
        <li v-for="n in 10">
            {{ n }}
        </li>
    </ul>
</div>
你那是什么调调
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue学习（一）
qq_52245126的博客
10-11 587
.vue vue对象和基础指令 插入数据：在标签中使用{{}}插入js表达式：变量，函数，三目运算符等简单js表达式 <h1>{{msg}}</h1>//在h1标签中插入vue对象中的data中属性名为msg的变量 -------- msg:"hello,vue" 插值表达式中的标识符 代表vue对象中的data的属性名或者methods中的方法名 指令 v-html <h2 v-html="title"></h2>//在h2标签中插入
VUE学习(一)
sincelegend的博客
06-10 235
VUE 学习 1.初次体验VUE （掌握） VUE的使用方式有很多 刚学我们先直接用 创建一个文件夹 在js中放上刚才下载的Vue.js 我这里使用 VSCode编辑器 打开文件夹 新建一个叫helloVUE的html文件 输入! 再按TAB键会生成html模版 开始写代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp
vue export default name属性
yanlei233的博客
08-27 2771
vue export default name属性 前言： 刚开始使用vue就是拿别人的项目，依样画瓢，很多属性都不了解。一般涉及到什么就去查什么，从而导致很多很基础的地方不明白。最近有时间去看这些知识点，但是官网的都很简洁，有些不是很好理解。 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮
Vue: export default中的name属性到底有啥作用呢？
u010227042的博客
08-12 3116
原文链接 前言 又开始一个全新的项目，每天都要元气满满呀~在划分模块和创建单页面组件时，常常写到name。嵌套路由中，index.vue极为常见，那么在vue中，export default { name: 'xxx'} 中的name到底有啥作用呢？ 开始 还是先回到官方的文档：https://cn.vuejs.org/v2/api/#name 官方文档已经给我们描述了两种使用情况，可能在开发中，并不是常用，举例子说明一下。 实践 1.组件自身的递归调用，就是在当前组件中，调用组件自己 c
知识1： VUE里面的export default 是什么
qq_38210427的博客
03-13 1万+
vue
Vue: export default中的name属性的作用
weixin_58689699的博客
12-28 541
3.当我们使用 keep-alive时可以使用include和exclude指定需要缓存和不需要缓存的组件。指定的依据就是组件的name。2.当我们使用vue.js官方提供的调试工具调试时，可以看到组件的名称，更好地定位。1.组件自身的递归调用，就是在当前组件中，调用组件自己。
vue入门（二）export default常用代理，method和data，created、computed
weixin_37778355的博客
01-07 3251
vue中export default里面常用的代理，声明变量，方法等
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，于2014年发布。它以简单易学和高效为核心，适用于构建复杂且响应式的用户界面。Vue的特点在于其渐进式架构，允许开发者逐步将Vue融入现有的项目中，而不必...
vue学习一：点击表格展开列表（表格）
Yuka9499的博客
10-16 1979
一、效果 2、前端： <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row> <el-table-column type="expand"> <template slot-scope="props"> ...
vue学习笔记之vue1.0和vue2.0的区别介绍
12-29
今天我们来说一说vue1.0和vue2.0的主要变化有哪些 一.在每个组件模板，不在支持片段代码 VUE1.0是:　 我是组件</h3><strong>我是加粗标签 VUE2.0:必须有根元素,包裹住所有的代码 我是组件 我是加粗标签 ...
vue学习教程之带你一步步详细解析vue-cli
01-19
在开发前，我们要至少通读一遍vue官方文档和API(看官方文档是最重要的，胜过看五十、一百篇博客),英文阅读能力还行的建议阅读英文文档，中文文档内容会稍落后，还要通读相关的vue-router、axios、vuex等。...
Vue学习20210314.pdf
08-27
Vue.js 是一款流行的前端JavaScript框架，用于构建...总的来说，这篇Vue学习总结涵盖了从环境配置到基础语法和指令的讲解，是初学者入门Vue的良好资源。理解并掌握这些知识，将有助于开发者构建高效、动态的前端应用。
vue组件之属性Props
weixin_33816821的博客
05-27 473
组件的属性和事件 父子组件之间的通信 父子组件之间的通信就是 props down,events up，父组件通过 属性props向下传递数据给子组件，子组件通过 事件events 给父组件发送消息。 比如，子组件需要某个数据，就在内部定义一个prop属性，然后父组件就像给html元素指定特性值一样，把自己的data属性传递给子组件的这个属性。 而当子组件内部发生了什么事情的时候，就通过自定义事件...
app.vue文件干啥的
u012778609的博客
02-14 1万+
app.vue是vue页面资源的首加载项，是主组件，页面入口文件，所有页面都是在App.vue下进行切换的；=
Vue的export default
Akio的博客
10-25 695
看别人Vue的项目时，老是遇到各种奇奇怪怪的语法，后来一看，都是ES6的语法，所以我们认认真真的把ES6熟读，才能更好的理解Vue的搭建。 1、export default 和 import 以及 export 这两个都是构成模块功能的主要命令，因此会频繁的出现，理解他以后会更好的理清各模块的关系。 export 和 export default 是规定模块对外的接口，输出的变量可以在别的模...
JS模块导入导出大全——module.exports、exports、export和export default的使用和区别
qq_53669554的博客
12-23 2万+
一、介绍 1.module.exports 和exports是commonjs的规范 2.export 和export default 是es6 规范 3.require 是amd规范引入方式 4.import 是es6 的一个语法标准 二、module.exports 和exports的使用 module 变量代表当前模块，这是个对象，会创建exports的属性，属性的默认值是空对象 //导出使用方法： function add(a,b) { return a+b; }...
Vue export default 函数的构成
lbuskeep的专栏
06-22 1743
<script> import CheckLogin'../login/CheckLogin'; export default { name : "Names", components: { // 组件注册 CheckLogin }, props: {// 属性注册 name: { type: String, defau.
vue里的export default
热门推荐
张木期的博客
08-19 5万+
相信大家看Vue项目肯定会看到各种导入导出,下面来介绍一下. Vue 的模块机制 Vue 是通过 webpack 实现的模块化，因此可以使用 import 来引入模块，例如： 　　此外，你还可以在 bulid/webpack.base.conf.js 文件中修改相关配置： 　　意思是，你的模块可以省略 “.js”，".vue"，“.json” 后缀，weebpack 会在之后自动添加上；可以用 “@” 符号代替 “src” 字符串等。 　　 　export 用来导出模块，Vue 的单文件组件通常需要导出
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 2528
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
写一篇vue学习笔记
01-18
以下是一篇关于Vue学习的简单笔记： 1. Hello World ```html <!DOCTYPE html> <title>Vue Hello World <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> <h1>{{ message }} var app = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值