Vue.js相关基础知识

Vue.js（通常简称为Vue）是一个流行的JavaScript前端框架，用于构建用户界面。它的主要目标是使前端开发变得更加简单和高效。

Vue.js的关键特点

响应式数据绑定： Vue允许你将数据与DOM元素进行绑定，当数据发生变化时，DOM会自动更新以反映这些变化。这使得开发交互式的界面变得更加容易。

组件化开发： Vue将应用程序分解为可重用的组件，每个组件都有自己的模板、逻辑和样式。这使得大型应用程序的开发和维护更加简单。

指令： Vue提供了一系列指令，如v-if、v-for、v-bind等，用于处理DOM元素和数据之间的交互。这些指令使你可以在模板中轻松地执行各种操作。

路由管理： Vue有一个名为Vue Router的官方路由管理库，用于处理单页面应用程序（SPA）的导航。它允许你创建多个页面并在它们之间进行导航，而无需刷新整个页面。

状态管理： Vue也提供了一个名为Vuex的官方状态管理库，用于管理应用程序的状态（如用户身份验证信息、购物车内容等）。这对于大型应用程序中的数据共享和管理非常有用。

生态系统： Vue拥有庞大的生态系统，包括第三方库和插件，可以帮助你处理诸如国际化、表单验证、动画等各种需求。

Vue.js实例的构造选项

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

el属性

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

<div id="app>
{{msg}}
</div>
<script> 
var vm=new Vue({
el: "#app",
data:{
msg:"Vue实例绑定div成功!",
},
})
</script>

data属性

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

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

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

<div id="app">{{msg}}</div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "获取到msg的值"
            }
        })
    </script>

<div id="app">{{content}}</div>
    <script>
  var app = new Vue({
            el: "#app",

  data(){
        return {
           name:'张三',
            age:18
        })

methods属性

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

在methods方法中访问 data 的数据，可以直接通过 this.属性名 的形式来访问，this表示Vue实例

<div id="app">
        <div>
            {{msg}}
             <button @click="btnClick">点击</button>
        </div>
    </div>
    <script>
    
        var app = new Vue({
            el: "#app",
            data: {
                msg: "旧文本"
            }
            methods:{
                btnClick(){
                    this.msg="新文本"
                }
            }
        })
    </script>