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>