VUE快速入门

最新推荐文章于 2024-07-24 12:54:56 发布

一七得七得八得九

最新推荐文章于 2024-07-24 12:54:56 发布

阅读量409

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_48556559/article/details/125893215

版权

本文是Vue.js的快速入门教程，介绍了Vue的基本概念、安装、创建第一个应用、挂载点、数据对象、Vue指令，包括v-text、v-on、v-if、v-bind、v-for、v-model等，并探讨了Vue与axios结合使用网络应用的方法。

摘要由CSDN通过智能技术生成

Vue简介

vue是一套用于构建用户界面的渐进式JavaScript框架

构建用户界面：可以理解为把你拿到的数据变成界面

渐进式：Vue可以自底向上逐层的应用

进是指递进

简单应用：只需一个轻量小巧的核心库

复杂应用：可以引入各式各样的Vue插件

JavaScript框架
简化Dom操作
响应式数据驱动

安装

尤雨溪：前端框架Vue.js 作者，独立开源开发者

文档传送门：Vue.js (vuejs.org)

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

创建第一个vue应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础</title>
</head>

<body>
    <div id="app">
        {
  { message }}
      </div>
      <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

</script>
</body>
</html>

结果：

el：挂载点

el是用来设置Vue实例挂载（管理）的元素

Vue实例的作用范围是什么？

<body>
  {
  { message }}
    <div id="app">
        {
  { message }}
        <span>{
  { message }}</span>
      </div>
      <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    var app = new Vue({
  el: '#app',
  data: {
    message: '我要好好学vue'
  }
})

</script>
</body>

结果：

结论：el命中的元素内部会被vue所管理，可以任意嵌套其他的标签

是否可以使用其他的选择器？

<body>
  {
  { message }}
    <div id="app" class="app">
        {
  { message }}
        <span>{
  { message }}</span>
      </div>
      <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    var app = new Vue({
  el: '.app',
  data: {
    message: '我要好好学vue'
  }
})

</script>
</body>

结果：