猫九

V1

2023/04/24阅读:16主题:默认主题

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

分类:

前端

标签:

Vue.js

作者介绍

猫九
V1

学生