vue 表单和自定义组件

vue 表单和自定义组件

vue能够安装成功npm，node.js,并且能够成功创建一个项目，我觉得就已经成功一半了。但是需要需要注意node的版本不要下载太高，建议是16版本，我之前因为下载太高版本的node导致一直不能成功创建项目，后来把node的版本降低到16版本才成功。
创建项目建议用vite+vue共同创建
步骤：
1。在目标文件夹中打开powershell
输入命令：

npm create vite@latest my-vue-app -- --template vue

2.进入新创建的文件夹中，重新安装npm依赖，一定要安装依赖，不然无法创建项目

npm install

3.启动项目

npm run dev

今天是组件和表单的部分，组件的template和各绑定v-bind绑定属性，v-on绑定方法。在各个template中定义好样式在app.vue文件中进行运行。需要提前导入组件
导入组件代码

import xxxxx from "./component/xxxx.vue"

注意导入文件后需要在template中进行调用，不可以只引入而不掉用不然会一直出现运行报错。
data

data(){
data是关于数据的属性，所有的数据都可以存储到data中进行运算常见的存储方式有两种
"属性名" : xxxx
类似于结构的那种类型
"属性名":{
	属性名1:xxxx
	属性名2:xxxx
}
}

methond属性

methods(){
	methods属性用来定义各种自定义方法，以mousemove为例
	大体结构“：
	mousrMove()
	{
		定义事件的操作
	}
}

computed属性

computed()
{
	computed属性是用来计算数据，是以data中的数据为基础的属性，检测到数据的变化computed会进行一次的计算，如果data中的数据没有变化，computed不会进行计算，这点与methods不同，可以用来优化
	mousrMove()
	{
		定义事件的操作
	}
}

今天的代码：

<template>
    <!-- v-for进行循环渲染 -->
    <div>
        <!-- v-for 要求必须有唯一的key值，不要求全局唯一，在v-for中唯一即可 -->
        <ul>
            <li v-for="user in userList" :key = "user.id">{{user}}</li>
        </ul>
        <ul v-for="(user,index) in userList" :key = "index">
            <li v-if="index % 2 === 0" style="color:red">{{index}}--{{user}}</li>
            <li v-else style="color:green">{{index}}--{{user}}</li>
        </ul>
    </div>

</template>

<script>
export default {
    data(){
        return {
            userList:[
                {
                    name:"YL",
                    id : "正源"
                },
                {
                firstname : "YYX",
                lastname : "Anine"
                },
                {
                firstname : "于笨笨",
                lastname : "笨笨于"
                }
            ]
        }
    }
}
</script>

第二个文件的代码：

<template>
    <!-- <div>ppppppp</div> -->
    <div>{{msg}}</div>
    <div>{{html}}</div><!--此处直接使用插值语法，会让文本原封不动得展示出来-->
    <div v-html="html"></div><!--渲染原生得html代码要用v-html，此处不需要在使用插入语法-->
    <div v-bind:id="id">此处的代码绑定的有id</div><!--v-bind : id = ""-->
    <br>
    {{count}}
    <br>
    {{count + 1}}
    <br>
    {{count + 'yulei'}}
    <br>
    <!-- 定义绑定事件。v-on绑定事件，定义绑定事件一定要定义相应的方法 -->
    <button v-on:click="onclick">a button</button>
    <br>
    <!-- <br>
    <div v-on:mousemove="mouseMove">a hover</div> -->
    {{user.firstname + user.lastname}}
    <br>
    {{fullname()}}
    {{fullname()}}
    {{fullname()}}
    {{fullname()}}
    {{fullname()}}
    <br>
    <!-- 此处并不需要加上()来表示是它不是一个方法 -->
    {{getfullname}}
    {{getfullname}}
    {{getfullname}}
    <br>
    <button v-on:click="changeName">改名字</button>
</template>
<script>
import { computed } from '@vue/runtime-core'
export default {
    // data是数据源
    data(){
        return {
            msg:'ppppppppp',
            html:'<h1 style = "color:red">ok,这是html文本</h1>',
            id : "aaaaaaaaaa",
            count : 1,
            timer:null,
            user:{
                firstname : "张",
                lastname : "三"
            }
        }
    },
    //methods是事件的集合
    methods:{
        //防抖案例
        onclick(){
            console.log(new Date(),"onClick")
            if(this.timer){
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() =>{
                console.log(new Date(),'onClick')
            },2000)
        },
        mouseMove(){
            alert("mouseMove")
        },
        fullname(){
            return this.user.firstname + this.user.lastname
        },
        changeName(){
            //结构体中变量的修改方法
            this.user = {
                firstname : "王",
                lastname : "三"
            }
        }
    },
    //计算属性computed
    computed:{
        getfullname(){
            return this.user.firstname + this.user.lastname
        }
    }
}
</script>

主文件的代码：

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
<!-- 此处用来解决定义组件后得使用操作，自定义组件不使用的话会报错 -->

  <div>
    <div id="app">
       
      <Yu1 />
      <Stu />
      <br>
      <!-- <Yu-1 /> -->
      <!-- <yulei /> -->
    </div>
  </div>
</template>

<script>
import Yu1 from './components/yu1.vue'
import Stu from './components/stuyu.vue'
export default {
  name : 'App',
  components : {
    Yu1,
    Stu //组件命名采用大驼峰得方式
  }
  
}
</script>



<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>