vue的基本使用方式一_vue文件怎么编写-CSDN博客

本文链接：https://blog.csdn.net/2301_81705218/article/details/140958848

一.Vue组件：

1.Vue的组件文件以vue结尾，每个组件由三部分组成：

(1)结构<template>

只有一个根元素(div),由他生成HTML代码

(2)样式<style>

编写css，控制页面展示效果;

全局样式，影响所有组件；

局部样式，只作用于当前组件

（3）逻辑< script>

编写js代码，控制模版的数据来源和行为

二.文本插值

1.作用:用来绑定date方法返回对象的属性

2.用法：{{}}

3.代码实例

<template>
<div>
  <h1>(( name ))</h1>
  <h1>(age > 60 ? '老年' : '青年' 3</h1>
</div>
</template>

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

<template> 标签定义了Vue组件的模板部分。
<div> 标签内包含两个 <h1> 标签，用于显示动态内容。
第一个 <h1> 标签使用双花括号 {{ name }} 来显示 name 数据属性的值。
第二个 <h1> 标签使用三元运算符 ? : 来判断 age 数据属性的值，如果大于60则显示“老年”，否则显示“青年”，后面跟一个数字3。
<script> 标签定义了Vue组件的脚本部分。
export default 表示导出一个默认的Vue组件。
data() 函数返回一个对象，包含组件的初始数据，这里定义了 name 和 age 属性

三.属性绑定

1.作用：为标签的属性绑定data方法中返回的属性

2.用法：v-bind:xxx，简写为:xxx

3.代码实例

<template>
<div>
  <div><input type="text" v-bind:value="name"></div>
  <div><input type="text" :value="age"></div>
  <div><img :src="src"/></div>
</div>
</template>

<script>
export default {
  data() {
    return {
      name: '王五',
      age: 20,
      src: 'https://www.itcast.cn/2018czgw/images/logo2.png'
    };
  }
};
</script>

v-bind:value 是Vue的属性绑定指令，用于将输入框的 value 属性绑定到组件的 data 方法返回的对象的 name 属性上。
简写形式 :value 有相同的功能，但更简洁。
v-bind:src 或简写 :src 用于将 img 标签的 src 属性绑定到组件的 data 方法返回的对象的 src 属性上。
<script> 标签定义了Vue组件的脚本部分，其中 data 函数返回包含组件初始数据的对象，这里定义了 name、age 和 src 属性。

三.事件绑定

1.作用：为元素绑定对应的事件

2.用法：v-on:xxx，简写为@xxx

3.代码实例

<template>
<div>
  <div>
    <input type="button" value="保存" v-on:click="handleSave"/>
    <input type="button" value="保存" @click="handleSave"/>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      name: "张三"
    };
  },
  methods: {
    handleSave() {
      alert(this.name);
    }
  }
};
</script>

v-on:click 是Vue的事件绑定指令，用于为元素绑定点击事件，当事件发生时会调用指定的方法。
简写形式 @click 有相同的功能，但更简洁。
在 <input> 标签中，value 属性用于设置按钮显示的文本。
<script> 标签定义了Vue组件的脚本部分，其中 data 函数返回包含组件初始数据的对象，这里定义了 name 属性。
methods 对象包含组件的方法，这里定义了 handleSave 方法，当按钮被点击时，会弹出一个警告框显示 name 的值。

四.双向绑定

1.作用：表单输入项和data方法中的属性进行绑定，任意一方改变都会同步给另一方

2.用法：v-model

3.代码示例

<template>
<div>
  <div>
    双向绑定：{{ name }}
    <input type="text" v-model="name" />
    <input type="button" value="改变" @click="handleChange"/>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      name: '张三'
    };
  },
  methods: {
    handleChange() {
      this.name = '李四';
    }
  }
};
</script>

v-model 是Vue的双向数据绑定指令，用于将表单输入项（如 input、textarea 或 select 元素）的值与组件的 data 对象中的属性进行绑定。当输入项的值发生变化时，绑定的属性也会更新；反之亦然。
在模板中，{{ name }} 是文本插值表达式，用于显示 name 数据属性的值。
第一个 input 元素使用 v-model 指令与 name 数据属性绑定，实现双向数据绑定。
第二个 input 元素是一个按钮，使用 @click 事件绑定到 handleChange 方法。
在 <script> 标签中定义了Vue组件，包括 data 对象和 methods 对象。data 对象初始化 name 属性为 '张三'。methods 对象中定义了 handleChange 方法，当按钮被点击时，会将 name 的值更改为 '李四'。

五.条件渲染

1.作用：根据表达式的值来动态渲染页面元素

2.用法：v-if、v-else、v-else-if

3.具体代码


<template>
<div>
  <div v-if="sex == 1">
    男
  </div>
  <div v-else-if="sex == 2">
    女
  </div>
  <div v-else>
    未知
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      sex: 1
    };
  }
};
</script>