01-Vue初体验

HelloWorld程序

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <script src="../js/vue.js"></script>

    <div id="app">
      {{message}}
      <h2>{{name}}</h2>
    </div>
    <script>
      // let(变量)/const(常量)
      // Vue(编程范式：声明式编程)
      const app = new Vue({
        el: "#app",
        data: {
          //定义数据
          message: "Hello World!",
          name: "张三"
        }
      })
    </script>
  </body>
</html>

1.个人理解声明式编程

即vue内部事先绑定好对象和数据的关系，通过修改对象的值就，vue内部就会自动更新到使用该值的标签中。

2.和原生js的对比

原生js(编程范式：命令式编程)的做法主要分为以下三步：

创建div元素，设置id属性
定义一个变量叫message
将message变量放在前面的div元素中显示

3.知识梳理

script标签中新建的Vue对象的el和body中的元素id一致挂载在一起，当前页面所需的变量则保存在该Vue对象的data属性中。其中data中可以有String,Number,Boolean,Array,Object等等。

计数器程序

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h2>当前计数：{{counter}}</h2>
      <!-- <button v-on:click='counter++'>+</button> -->
      <!-- <button v-on:click='counter--'>-</button> -->
      <button v-on:click="add">+</button>
      <button @click="sub">-</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          counter: 0
        },
        methods: {
          add: function() {
            console.log("add被执行")
            this.counter++
          },
          sub: function() {
            console.log("sub被执行")
            this.counter--
          }
        }
      })
    </script>
  </body>
</html>

1.和原生js对比

在js中获取button元素
给元素添加监听事件

2.知识梳理

v-on:click="action"绑定动作事件，
标签添加的动作事件写在和data同级的methods中，方法格式为

methodName: function() {}  或者  methodName() {}

第一次记录自己的学习笔记，如果您发现问题，欢迎指点。

蓝带915

发布了11 篇原创文章 · 获赞 0 · 访问量 63

私信关注