Vue.js基础入门学习记录

最新推荐文章于 2024-10-07 15:25:09 发布

2301_76805788

最新推荐文章于 2024-10-07 15:25:09 发布

阅读量81

点赞数

文章标签： vue.js 学习前端

本文链接：https://blog.csdn.net/2301_76805788/article/details/135185507

版权

本文介绍了Web前端开发中Vue.js的基础概念，包括其优点（轻量级、双向数据绑定等）、开发模式（MVVM）、安装与使用方法，以及常用的指令如v-model、v-if和v-show。通过实例演示了如何在HTML中集成和使用Vue.js，是初学者学习Vue.js的实用指南。

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

作为一名 Web 前端开发工程师，其主要职能就是将网站的界面更好地呈现给用户。随着互联网技术的爆发，越来越多的前端开发技术如雨后春笋般出现，在众多的 JavaScript 前端框架中，Vue.is 无疑是最出色的(曾经一项针对 JavaScript 的调查表明，Vue.is 有着 89%的开发者满意度)。相比其他前端框架，如 Angular 和 React，Vue.is 框架在实现上更容易，程序员上手更快。使用 Vue.is 技术不仅提高了开发的效率，也改善了开发的体验，因此，熟练掌握Vue.is 前端框架已经成为 Web 前端开发工程师的必备技能。

Vue.js入门

Vue.js官网：Vue.js

Vue.js的基本概念

Vue的优点：轻量级、双向数据绑定、组件化开发、指令、插件

Vue.js的开发模式：MVVM(模型、视图、视图模型)

Vue.js的常用开发工具

浏览器、VSCode、命令行控制台（Win+R、cmd）

Vue.js的安装使用

Vue的安装有多种方式，本文着重介绍vue的直接引入。

在下载好Vue.js的文件后在HTML文件使用<script src="vue.js"></script>语句进行引入。

黄色字体更换为vue.js文件所在的文件目录

实现第一个vue.js案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                msg:"XXX",
            }
        })
    </script>
</body>
</html>

解读：

var app=new Vue({

el:'#app',

data:{

msg:"XXX",

}

})

el内的“#app”表明该vue实例只能影响id为“app”的标签，改为“.app”则表明该vue实例只能影响class为“app”的标签。

<div id="app">

<p>{{msg}}</p>

</div>

如上所说，el内的“#app”表明该vue实例只能影响id为“app”的标签，那么该div的id为app,则只能影响到该div及div内的语句。

{{}}号则表示渲染输出一个名为msg的数据，而msg则意为“XXX”,所以在网页中表示为：

vue实例常用到的构造选项

选项	说明
el	唯一根标签，决定Vue实例会管理哪一个DOM节点
data	Vue实例对应的数据对象
methods	定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用
computed	定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号
components	定义Vue实例的子组件
filters	定义Vue实例的过滤器
watch	监听数据变化，观察和响应 Vue 实例上的数据变动

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

data数据对象

data概述：

data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。

var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

data定义的数据通过插值语法(“{{}}”)绑定到DOM节点，data数据对象有以下两种写法：

对象（Object）的形式

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

    <script>

        var app = new Vue({

            el: "#app",

            data: {

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

            }

        })

    </script>

函数（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>

methods方法

概述：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>

一般的常用指令

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。

v-bind指令用于实现单向动态数据绑定。

前面的v-text和v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。

v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)。

v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for，它需要结合着in或者of来使用。

v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。

v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。

v-if的使用一般有两个场景：

1.通过条件判断展示或者隐藏某个元素或者多个元素；

2.进行视图之间的切换。