vue基础知识

vue基础知识

vue基础

1. 引入vue库

通过script标签引入

https://cdn.jsdelivr.net/npm/vue/dist/vue.js

2.初始化vue

创建一个Vue对象，通过new来创建

3.vue属性

(1) el属性

挂载点(为啥需要挂载点)
vue框架的本质是通过js动态添加html元素，那么需要一个根节点，所有的元素都添加到此根节点下，因此根节点通过el属性指定

(2)data属性

定义页面中需要用到的数据
比如页面上需要动态显示的数据，通过vue模板语法进行绑定显示

(3)methods属性

定义页面中使用到的方法
比如自定义处理方法和事件回调等

4.vue指令

定义

vue指令是指v-开头，作用于html标签，提供一些特殊的特性，当指令被绑定到html元素的时候，指令会为被绑定的元素添加一些特殊的行为，可以将指令看成html的一种属性

分类

v-on指令
绑定事件，结合method属性实现事件回调处理

		<template>
  <div>
    <button v-on:click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    },
  },
};
</script>

在上面的代码中，我们使用 v-on 指令来监听按钮的 click 事件，并绑定了一个名为 handleClick 的方法。当按钮被点击时，Vue.js 会自动调用该方法。在 handleClick 方法中，我们使用 console.log() 函数输出一条消息。
v-model属性
v-model 属性用于双向绑定表单元素和组件的数据

		<template>
  <div>
    <label for="name">姓名：</label>
    <input type="text" id="name" v-model="name">
    <p>你输入的姓名是：{{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
    };
  },
};
</script>

在上述代码中，我们使用 v-model 指令将 input 元素与 Vue 实例中的 name 数据进行双向绑定。这意味着当 input 元素中的值发生变化时，Vue 实例中的 name 数据也会相应地更新；而当 Vue 实例中的 name 数据发生变化时，input 元素中的值也会自动更新。

在模板中，我们还使用了双括号语法来显示当前输入的姓名。在 Vue.js 中，这种情况被称为插值，它允许我们将数据动态地插入到模板中。
node.js模块化
webpack