Vue.js开发教程

最新推荐文章于 2024-09-13 14:34:15 发布

Alana974

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量72

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Alana974/article/details/134887804

版权

vue.js不仅改善了前端的开发体验，还极大地提高了开发的效率。为了更好理解以掌握vue.js的使用方法，我将会对vue.js的基础特性进行介绍，主要包括vue实例的创建、模板、data初始数据的定义、method方法的定义、常用指令、事件修饰符、v-model双向数据绑定以及计算属性与监听属性等内容，并通过几个实例进行案例演示。

一、第一个vue.js实例

在创建vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。例如以下是使用el选项绑定DOM元素的实例：

<!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>Document</title>

    // 第一步：引入vue.js

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

  </head>

  <body>

    // 第二步：创建根节点

    <div id="app">

    </div>

    <script>

       // 第三步：初始化vue实例，绑定根节点

      var app= new Vue({

        el: "#app",
       
        data: {

          msg: "第一个vue实例!",

        },

      })

    </script>

  </body>

</html>

注意：一个Vue实例必须要绑定一个元素节点，且为根节点。

二、 data数据对象

data概述：

data是Vue实例的数据对象，vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。var app=new Vue{{data：数据}}，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。data定义的数据通过插值语法（“{{}}”）绑定到DOM节点，data数据对象有以下两种写法：

1.对象（object）的形式

<div id="app">{{content}}</div>

    <script>

        var app = new Vue({

            el: "#app",

            data: {

                content: "Mustache表达式通过data为对象获取content的值"

            }

        })

    </script>

2.函数（function）的形式

<div id="app">{{content}}</div>

    <script>

        var app = new Vue({

            el: "#app",

            // 这是下面function的简写形式

            data(){

                       return {

                            name:'张三',

                            age:18

                    }

              },

             // 另一种写法

            // data:function() {

            //     return {

            //         name: '张三',

            //         age: 18,

            //         sex: '男'

            //     }

            // },

        })

    </script>

三、method定义方法

概述：methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。

在methods方法中访问 data 的数据，可以直接通过 this.属性名的形式来访问，this表示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>Document</title>

    1、第一步   引入vue.js

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

</head>



<body>

   2、第二步

   <div id="app">

        <div>

            {{msg}}

            <p>tip:点击按钮把“旧文本”字样修改为“新文本”</p>

            <!-- v-on  可以简写为  @ -->

            <button v-on:click="btnClick">点击</button>



            <!-- 简写形式 -->

            <!-- <button @click="btnClick">点击</button> -->

        </div>

    </div>



    <script>

       3、第三步

        var app = new Vue({

            el: "#app",

            data: {

                msg: "旧文本"

            },

           // 页面的点击事件都需要放到  methods 里面

            methods:{

                btnClick(){

                    this.msg="新文本"

                }

            }

        })

    </script>

</body>

</html>

四、常用指令

概述：

指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。

Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。