【7】【vue】【vue3】【组件】【语法】【路由】【项目结构】
1、项目结构：
asserts用来存放静态资源的（一些图片，公共的css文件等）
components用来存放vue的组件（vue是组件开发）
App.vue是主入口组件 （根组件，所有组件都是从这里开始，从这里显示的）
main.js是主入口文件，（所有程序入口）
template可以理解是写html的
script可以理解为是写业务逻辑的
2、模板语法
目的：为了让标签里显示的数据从静态变为动态
语法：双花括号{{}}
步骤：
（1）写一个data函数（用来返回数据）
（2）用花括号引入数据
学习vue模板语法
{{message}}
结果
目的：为了识别标签里的链接
语法：在标签括号里加v-html
其实就是超链接的做法 以下对比普通的和v-html属性的标签
{{message}}
{{rawHtml}}
结果：
每次点击都会counter都会+1
（2）测试事件处理方法
引入methods方法模块
按钮3 结果：
更改标签中的文本
methods:{
clickHandle(){
//在事件中，读取data中的属性，是需要通过this，属性
this.message="消息被撤回了"
}结果：
----------->
引入event关键字
methods:{
clickHandle(event){
//在事件中，读取data中的属性，是需要通过this，属性
this.message="消息被撤回了"
//event是原生的DOM event
console.log(event);
//把按钮内的文字改一下
event.target.innerHTML="点击之后"
}
}传递参数：
methods:{
say(data){
console.log(data)
}
}结果：
点击标签事件：
-
{{item}}
methods:{
clickItemHandle(item){
console.log((item))
}
}结果：
6、表单输入绑定
目的：用v-model指令在表单、