vue3项目中vue文件的基本使用

结构：

主要分两个

• <template></template> 中间放html文件
• <script></script> 

1. 外层使用：export default ｛｝   导出组件对象

2. 里面可以使用setup()函数

•   setup() 函数可以返回一个对象，其中包含了组件中需要用到的响应式数据、方法等
•         返回的值可以在组件的模板（<template>）中直接使用

这就是基本的结构

使用vbase- reactive  ,可以快速生成代码

 reactive()  可以定义响应式对象。（具体的细节先不追究了，反正能让上面模板用就行）

 

那模板中怎么使用

1.  插值表达式  {{}}  

        如：可以写   {{ str.length }}    {{ str.split('').reverse().join('') }}

                              {{ num1 < num2 ? '是' : '否' }}   也可以数字表达式，为真展示  “是”

                              {{ !aaaa }}   bool值取反

                              数组长度：{{ arr.length }}           数组中第一个元素：{{ arr[0] }}

                              对象中取值方式1:{{ obj.name }}

2. v-text   和  v-html  指令

        如：<p v-text="str1"></p>  这样就可以把 str的内容放到  p标签中

        如:  <p v-html="str2"></p> str2内容如果是 html，就直接渲染出来了

3.  v-bind

        简写：模板中可以使用到 这些数据， 详细见后面

        如： <a v-bind:href="url">   简写  <a :href="url">

4. v-if  

        控制展示哪一部分

        写法： v-if   v-else-if         v-else

5.v-show

        变量用的bool值，控制是否展示

6. v-for

        写法： vue3中好像必须要下面这么写，并且用 v-bind:key  说明 index 为 索引值

          数组的写法：    <li v-for="(item, index) in list" v-bind:key="index">{{ item }}-{{ index }}</li>

          对象的写法：

  <li v-for="(value, key, index) in person" v-bind:key="index">   {{ value }}-{{ key }}-{{ index }} </li>

7 v-on ：详细见 ：有道云笔记 (youdao.com)

        如： <button v-on:click="count += 1">按钮</button>

        简写：<button @click="count += 1">按钮2</button>

        后面接函数名：         <button @click.once="addnum">按钮2</button>

        函数需要传参时：@input="inputHandel('sq')

        函数需要传事件参数时：@input="inputHande2('hello', $event)"

8.v-on 加修饰符

        如：点once ，表示，仅一次 <button @click.once="addnum">按钮2</button>

        点stop， 如果加上了，一次点击到一个重合的地方，就不会继续传递下去，见有道云笔记

9、v-model

        原理见：有道云笔记 (youdao.com)

       可以用在文本框        

        单选框

        多选框等

10. v-model 加修饰符

        .lazy   .trim  .number

v-bind

<template>
  <div>
    <!--这个demo是讲 v-bind :   简写是 :   -->
    <!-- 补充：在css中，内联样式，又称行内样式，就是在HTML标签内部通过style属性来直接设置元素的CSS样式 -->
    <h2>1.传统样式写法(有class、style两种表示法)</h2>
    <div class="color-red f24">A.颜色红色、字体大小24</div>
    <div style="color: red; font-size: 24px">B.颜色红色、字体大小24</div>

    <h2>2.样式绑定写法</h2>
    <div v-bind:class="classString">A.颜色红色、字体大小24</div>
    <div :class="classArray">A.颜色红色、字体大小24</div>
    <div :class="classObj">A.颜色红色、字体大小24</div>

    <div :style="styleString">B.颜色红色、字体大小24</div>
    <div :style="styleObj">B.颜色红色、字体大小24</div>
    <div :style="styleArray">B.颜色红色、字体大小24</div>

    <h2>3.其他属性的绑定</h2>
    <a v-bind:href="url">百度一下</a>
    <button v-bind:disabled="isDisabled">确定</button>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  setup() {
    const state = reactive({
      classString: 'color-red  f24',
      classArray: ['color-red', 'f24'],
      classObj: { 'color-red': true, f24: true },
      styleString: 'color: red; font-size: 24px',
      styleObj: { color: 'red', 'font-size': '24px' },
      styleArray: ['color:red', 'font-size:24px'],
      url: 'http://www.baidu.com',
      isDisabled: false
    })

    return {
      ...toRefs(state)
    }
  }
}
</script>

<style lang="scss" scoped>
.color-red {
  color: red;
}

.f24 {
  font-size: 24px;
}
</style>