vue基础

最新推荐文章于 2024-06-14 10:39:01 发布

一勺雪糕

最新推荐文章于 2024-06-14 10:39:01 发布

阅读量48

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/TianMing_xe/article/details/132095806

版权

以下代码是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>
    <!-- 引入vue.js文件 -->
    <script src="../file/vue.js"></script>
  </head>
  <body>
    <!-- 事件表达：@事件名 ，为整个div添加键盘按键事件-->
    <div id="first" @keyPress.enter="xx">
      <!-- 绑定提交表单事件（这里只是案例不发送请求） -->
      <form action="" @submit.prevent="abc">
        <!-- v-model是表单控件：用于给表单传值 -->
        <input type="text" v-model="username" /><br />
        <input type="text" v-model="password" /><br />
        <!-- 插值表达式{{名字}} -->
        <!-- v-text和v-html 也可以进行页面的渲染，v-text和插值表达式无法解析标签但是v-html可以进行标签的解析-->
        <span>这是输入框获取到的：{{username}},{{password}}</span><br />
        <button>提交按钮</button>
      </form>
    </div>

    <script>
      //通过new Vue({})创建Vue实例
      new Vue({
        el: "#first", //当前实例通过页面中的标签的id属性值进行与页面标签绑定
        //data参数用于存储数据，通过data给页面进行传值
        data: {
          //username和password都是上面v-model的值，输入框中输入什么data中对应的属性的值就会等于什么
          //data中属性的值是什么，上面span标签中对应的插值表达式就会显示什么，以此进行页面渲染
          username: "",
          password: "",
        },
        //methods参数用于定义函数
        methods: {
          //事件函数，与上面表单提交的事件绑定，提交表单后，控制台会进行打印内容
          //这里的this.username，this.password代表的就是data中的username和password
          abc() {
            console.log(this.username + " " + this.password);
          },
          //与上面的键盘按键事件进行绑定，按下回车键出现弹窗
          xx() {
            alert("敲了一下回车");
          },
        },
      });
    </script>
  </body>
</html>