初学Vue

onforget

于 2024-04-01 17:41:06 发布

阅读量511

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/onforget/article/details/137241001

版权

本文介绍了Vue.js，一个流行的用于构建SPA的JavaScript框架，其特点包括轻量级、响应式、组件化和丰富的生态系统。文章详细讲解了Vue.js的基础概念、插值表达式和常用指令，以及通过实例展示了如何使用v-on指令实现DOM事件处理。

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

什么是vue

Vue.js是一种流行的JavaScript前端框架，用于构建用户界面和单页面应用程序（SPA）。它是由尤雨溪（Evan You）于2014年创建的开源项目，并由一个活跃的社区维护和支持。Vue.js的核心思想是通过简单的API和响应式数据绑定来构建交互式的Web界面。

Vue.js具有以下特点：

轻量级： Vue.js的核心库很小，体积轻巧，易于学习和使用。
响应式： Vue.js采用了响应式数据绑定的机制，当数据发生变化时，相关的DOM元素会自动更新。
组件化： Vue.js鼓励使用组件来构建用户界面，使得代码更加模块化、可维护性更高。
简单灵活： Vue.js提供了简洁明了的API和灵活的选项，使得开发者可以根据项目需求进行定制。
生态丰富： Vue.js拥有庞大的生态系统，包括官方提供的路由器（Vue Router）、状态管理工具（Vuex）以及丰富的第三方库和插件。

总的来说，Vue.js是一个功能强大、灵活易用的前端框架，被广泛应用于构建各种规模的Web应用程序。

第一个vue程序

<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>插值表达式的用法</title>
    <!-- step 1：引入 Vue.js 框架 -->
    <script src="https://labfile.oss.aliyuncs.com/courses/9775/vue.global.js"></script>
</head>
<body>
<!-- step 2：创建 id=root 的 DOM 元素（id 值可自定义）-->
<div id="root">
    <img v-bind:src="url">
    <ul>
        <li>姓名：{{userInfo.name}}</li>
        <li>年龄:{{userInfo.age}}</li>
        <li>
            宠物是一只{{`${userInfo.pet.type}，它的名字叫${userInfo.pet.name}，它的毛色是${userInfo.pet.color}`}}。
        </li>
    </ul>
    <p>
        {{"大家好，我叫"+userInfo.name+"，今年"+userInfo.age+"岁，明年我就"+(userInfo.age+1)+"岁了。"}}
    </p>
    <a v-bind:href="userInfo.pet.url">蓝桥云课</a>
</div>

<script>
    // step 3：使用 Vue.createApp 创建 Vue 实例对象
    Vue.createApp({
        data() {
            return {
                url:"https://labfile.oss.aliyuncs.com/courses/5428/1.jpg",
                userInfo: {
                    name: "小杨琴",
                    age: 40,
                    pet: {
                        type: "小耗子",
                        name: "杨琴",
                        color: "大橘",
                        url:"https://www.lanqiao.cn/"
                    },
                    hasGF: true,
                },
            };
        },
    }).mount("#root"); // step 4：将创建好的 Vue 实例对象挂载在 id=root 的 DOM 元素上。
</script>
</body>
</html>

插值表达式

在Vue.js中，插值表达式是一种特殊的语法，用于将数据绑定到视图中。它可以让你在HTML模板中直接插入Vue实例中的数据。插值表达式用双大括号{{ }}包裹，例如：

htmlCopy Code

<div>{{ message }}</div>

在这个例子中，{{ message }}就是一个插值表达式，它将Vue实例中的message数据动态地插入到HTML中。当message数据发生变化时，视图中相应的部分也会自动更新。

除了简单的变量插值外，插值表达式还支持一些JavaScript表达式，例如：

htmlCopy Code

<div>{{ message.toUpperCase() }}</div>

在这个例子中，message.toUpperCase()会将message的值转换为大写字母后插入到HTML中。

需要注意的是，插值表达式只能用于文本内容，而不能直接用于HTML属性。如果需要动态绑定HTML属性，可以使用指令（Directives）来实现，例如v-bind。

指令

在Vue.js中，指令（Directives）是一种特殊的标记，用于在DOM元素上添加特殊行为或功能。指令以v-开头，后面跟着指令的名称，例如v-bind、v-on等。指令可以用于动态地修改DOM元素的行为、样式和属性，从而实现丰富的交互和功能。

以下是一些常用的Vue.js指令：

v-bind: 用于动态地绑定HTML属性到Vue实例的数据。例如：
htmlCopy Code
<a v-bind:href="url">Click me</a>
v-on: 用于监听DOM事件，并在事件触发时执行Vue实例中指定的方法。例如：
htmlCopy Code
<button v-on:click="handleClick">Click me</button>
v-model: 用于在表单元素上创建双向数据绑定。它会自动将表单元素的值与Vue实例中的数据进行同步。例如：
htmlCopy Code
<input v-model="message" type="text">
v-for: 用于遍历数组或对象，并将每个元素渲染为相应的DOM元素。例如：
htmlCopy Code
<ul> <li v-for="item in items">{{ item }}</li> </ul>
v-if / v-else-if / v-else: 用于根据条件渲染或销毁DOM元素。例如：
htmlCopy Code
<div v-if="seen">Now you see me</div> <div v-else>Now you don't</div>
v-show: 类似于v-if，但是使用CSS的display属性来控制元素的显示和隐藏，而不是直接操作DOM。例如：
htmlCopy Code
<div v-show="show">This will be shown/hidden</div>

这些是Vue.js中最常用的一些指令，它们可以帮助你实现动态、响应式的用户界面。

案列

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>v-on 指令</title>
    <!-- step 1：引入 Vue.js 框架 -->
     <script src="https://labfile.oss.aliyuncs.com/courses/9775/vue.global.js"></script>
  </head>
  <body>
    <!-- step 2：创建 id=root 的 DOM 元素（id 值可自定义）-->
    <div id="root">
      <a v-on:click="changeMsg">{{msg}}</a>
    </div>
    <script>
      // step 3：使用 Vue.createApp 创建 Vue 实例对象
      Vue.createApp({
        data() {
          return {
            msg: "Hello World！",
          };
        },
        methods: {
          changeMsg() {
            this.msg = "Hello 蓝桥！";
          },
        },
      }).mount("#root"); // step 4：将创建好的 Vue 实例对象挂载在 id=root 的 DOM 元素上。
    </script>
  </body>
</html>

onforget

关注

10
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
初学Vue

Vue.js是一种流行的JavaScript前端框架，用于构建用户界面和单页面应用程序（SPA）。它是由尤雨溪（Evan You）于2014年创建的开源项目，并由一个活跃的社区维护和支持。Vue.js的核心思想是通过简单的API和响应式数据绑定来构建交互式的Web界面。
复制链接

扫一扫