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