小白学习vuejs-03--小demo入门

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

自学前端

• 前文

  • 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
  • 介绍本次学习的是vue的是vue的一些基本语法和两个小demo

基本语法

• el

  类型: string | HTMLElement

  作用: 决定之后Vue实例会管理哪一个DOM

• data:

  类型: Object | Function (组件当中data必须是一个函数)

  作用: Vue实例对应的数据对象

• methods:(方法)

  类型: {[key: string]: Function }

  作用: 定义属于Vue的一些方法, 可以在其他地方调用

• 胡子语法

  {{}}

  
  

• 事件监听

  • 在前端开发中, 我们需要经常和用户交互.
    • 这个时候, 我们就必须监听用户发出的指令, 比如点击, 拖拽, 键盘事件等等
    • 在Vue中如何监听事件呢?使用v-on指令
  • v-on介绍
    • 作用: 绑定事件监听器
    • 缩写: @
    • 预期: Function | Inline Statement | Object
    • 参数:event
  • v-on参数
    • 当通过methods中定义方法, 以供@click调用时, 需要注意参数问题
    • 情况一: 如果该方法不需要额外参数, 那么方法后的()可以不添加.
    • 但是注意: 如果方法本身中有一个参数, 那么会默认将原生事件event参数传递进去
    • 情况二: 如果需要同时传递某个参数需要event时, 可以通过$event传入事件
  • v-on修饰符
    • 在某些情况下, 我们拿到event的目的可能是进行事件处理.
    • Vue提供了修饰符来帮助我们方便的处理一些事件:
    • .stop(停止冒泡) - 调用 event.stopPropagation()
    • .prevent (阻止默认事件)- 调用 event.preventDefault()
    • .{keycode | keyAlias} - 只当事件是从特定键触发时才触发回调
    • .nation - 监听组件根元素的原生事件
    • .once - 只触发一次回调
  • v-bind 动态绑定属性
    • 语法糖

      :class="属性名 | 属性值"

hellovue.js小demo

1. 代码演示

   div id="app">
           <h2>{{massage}}</h2>
       </div>
   
       //需要额外使用js文件夹引入
       <script src="..js/vue.js"></script>
       <script>
   
            //编程范式: 声明式编程
            const app = new Vue({
               el: "#app", //用于挂载要管理的元素
               data: { //定义数据
                   massage: "helloVue.js",
               }
            });
            
       </script>
   </body>
   

列表展示

• 
• 大家可已通过上边的介绍来尝试实现一波

后记

• 希望对对前端有兴趣的朋友们有帮助
• 后面的教学将会讲到vue的语法
• vue的作者是中国人尤雨溪, 非常厉害的人