0 ref属性（组件间通信）
# 1 ref属性放在普通标签上
<input type="text" v-model="name" ref="myinput">
通过 this.$refs['myinput'] 拿到的是 原生dom对象
操作dom对象：改值，换属性。。。
# 2 ref属性放在 组件上
<Child ref="mychild"></Child>
通过 this.$refs['mychild'] 拿到的是 组件对象
组件对象.属性
组件对象.方法
实现父子间通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
</head>
<body>
<div id="app">
<h1>ref属性</h1>
<input type="text" v-model="name" ref="myinput">
<img src="./img/3.png" alt="" ref="myimg">
<button @click="handleClick">点我执行代码</button>
<div style="background-color: aquamarine">
<Child ref="mychild"></Child>
</div>
</div>
</body>
<script>
Vue.component('Child', {
template: `
<div>
<img :src="url" alt="" height="300px" width="200px">
<button @click="handleClick('子组件传入的')">点我弹窗</button>
</div>`,
data() {
return {
url: './img/1.png'
}
},
methods: {
handleClick(name) {
alert(name)
}
}
})
var vm = new Vue({
el: '#app',
data: {
name: ''
},
methods: {
handleClick() {
console.log(this.$refs)
// 1 根据ref指定的名字，取出原生dom对象
// var i = this.$refs['myinput']
// console.log(i)
// i.value = "你好"
// 2 改图片
// var i = this.$refs['myimg']
// i.src='./img/6.png'
// 3 操作组件对象-->实现组件间通信
var i = this.$refs['mychild']
console.log(i.url)
// 改图片
i.url = './img/2.png'
// 执行方法
i.handleClick('lqz')
}
}
})
</script>
</html>
1 动态组件
# 小案例---》点击按钮，切换组件
1.1 使用v-if控制组件显示与否
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>点击按钮切换组件</h1>
<button @click="who='home'">首页</button>
<button @click="who='goods'">商品</button>
<button @click="who='order'">订单</button>
<Home v-if="who=='home'"></Home>
<Goods v-else-if="who=='goods'"></Goods>
<Order v-else></Order>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
who: 'home',
},
components: {
Home: {
template: `
<div>
<h3>我是首页</h3>
</div>
`
},
Goods: {
template: `
<div>
<h3 style="background-color: aquamarine">我是商品页面</h3>
</div>
`
},
Order: {
template: `
<div>
<h3 style="background-color: red">我是订单</h3>
</div>
`
},
}
})
</script>
</html>
1.2 通过动态组件控制组件显示谁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>点击按钮切换组件</h1>
<button @click="who='Home'">首页</button>
<button @click="who='Goods'">商品</button>
<button @click="who='Order'">订单</button>
<keep-alive>
<component :is="who"></component>
</keep-alive>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
who: 'Home',
},
components: {
Home: {
template: `
<div>
<h3>我是首页</h3>
</div>
`
},
Goods: {
template: `
<div>
<h3 style="background-color: aquamarine">我是商品页面</h3>
</div>
`
},
Order: {
template: `
<div>
<h3 style="background-color: red">我是订单</h3>
<input type="text" v-model="search">
</div>
`,
data() {
return {
search: ''
}
}
},
}
})
</script>
</html>
1.3 keep-alive的使用–组件缓存
<keep-alive>
<component :is="who"></component>
</keep-alive>
2 插槽
#一般情况下，编写完1个组件之后，组件的内容都是写死的，需要加数据 只能去组件中修改，扩展性很差
# 然后就出现了插槽这个概念，只需在组件中添加<slot></slot>，就可以在的组件标签中添加内容
2.1 基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>插槽使用</h1>
<div style="background-color: aquamarine">
<Home>
<div>
<img src="./img/1.png" alt="" width="200px" height="300px">
</div>
</Home>
</div>
<hr>
<div style="background-color: pink">
<Home>
<a href="">点我看美女</a>
</Home>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
who: 'Home',
},
components: {
Home: {
template: `
<div>
<h3>我是首页</h3>
<slot></slot>
<h3>结束了</h3>
</div>
`
},
}
})
</script>
</html>
2.2 具名插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>具名插槽使用</h1>
<div style="background-color: aquamarine">
<Home>
<div slot="foot">
<img src="./img/1.png" alt="" width="200px" height="300px">
</div>
<div slot="middle">
<a href="">点我看美女</a>
</div>
</Home>
</div>
<hr>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
who: 'Home',
},
components: {
Home: {
template: `
<div>
<h3>我是首页</h3>
<slot name="middle"></slot>
<h3>结束了</h3>
<slot name="foot"></slot>
</div>
`
},
}
})
</script>
</html>
3 vue-cli创建项目
# 创建vue项目，需要借助于几个东西
- nodejs：
-javascript只能运行在浏览器中
-把谷歌浏览器的js解释环境---》使用c重写，--》能够运行在操作之上
-使用js的语法，就可以写后端了：c写了网络，文件操作，数据库操作
-js的语法，运行在操作系统上的一个解释型后端语言
- vue-cli：vue脚手架 是node的一个模块
# 安装node环境
-官网下载安装包：node-v18.16.1-x64.msi 一路下一步安装
-node---》python的python命令
-npm---》python的pip命令
-下载模块，去国外，很慢
-加速下载第三方模块：（用来替换npm命令的)
npm install -g cnpm --registry=https://registry.npm.taobao.org
-安装模块使用：npm install
-现在使用 cnpm install 速度快
# 安装vue脚手架
cnpm install -g @vue/cli
安装完就会释放 vue 令 #装完django 释放了django-admin一样，用来创建项目
# 使用vue脚手架，创建vue项目
vue create 项目名
操作如下图
# 另一种创建vue项目方式：图形化界面
4 vue项目目录介绍
# 使用pycharm开发
# 运行vue项目的两种方式
-使用名：npm run dev
-使用pycharm运行：绿色箭头
# 目录结构
first_vue #项目名
-node_modules # 项目有很多依赖都放在这，等同python的 .venv文件夹，可以删掉，非常多小文件，复制很慢，如果没了，执行 cnpm install 就可以在装上，装完项目可以运行
-public # 文件夹（一般不动）
favicon.ico # 网站小图标
index.html # spa：单页面应用---》整个vue项目其实就这一个html页面，以后都是组件切换
-src # 开发重点，以后代码几乎都是写在这里
-assets # 放一些静态资源：图片，css，js
-logo.png # 组件中使用的图片
-components # 放组件：小组件
-HelloWorld.vue # 默认提供给咱们的
-views # 放组件：页面组件
HomeView.vue # 首页
AboutView.vue#关于
-router # 装了vue-router就会有这个文件夹，后面讲
-index.js
-store # 装 vuex 就会有这个文件夹，后面讲
-index.js
-main.js # 整个项目的入口
-App.vue #根组件
-.gitignore # 使用了git，忽略文件
-babel.config.js #装了bable就会生成它---》语法转换--》可以写es高版本语法
-package.json # 放了项目的依赖
-package-lock.json # 锁定文件--》锁定依赖的版本
-README.md #介绍文件
-vue.config.js # vue配置文件 一般不动
4.1 大致看一下文件中写了什么内容
# index.html 单页面应用，全局只有一个html
-不能禁用js，否则，vue项目执行不力
-div id是app，跟咱们之前写的一样
# HelloWorld.vue 组件化开发，开发阶段，以后再vue项目中，写组件 写 xx.vue
template：在这里写 html内容
script：在这里写js
style：在这里写样式
之前写组件
#组件名字就是：HelloWorld 文件名
# template：template内写的内容
# data(){} :在script中
<script>
export default {
data(){
return {}
},
methods:{}
}
</script>
# 之前不能写独立的css，以后都写在 style中
#总结：之前定义组件，写起来很麻烦，现在定义组件，只要创建一个 xx.vue,在固定的位置，写固定的代码即可
# main.js--》控制 index.html 使用哪个跟组件 ---App.vue
-import store from './store' # 导入语法
- 在这里 new 了vue实例
new Vue({
render: h => h(App)
}).$mount('#app')
# package.json 里面有项目依赖
5 vue项目开发规范
# 以后做vue开发，只需要创建 组件
xx.vue
# 会有三部分
##第一部分### 写html，插值，事件绑定
<template>
</template>
##第二部分### data，methods，watch，created
<script>
export default {
}
</script>
##第三部分### 写样式
<style scoped>
</style>
6 es6导入导出语法
# 以后，做了项目开发，肯定要导入某些模块使用
-之前是使用<script src=""></script>
-以后再项目中：import App from './App.vue' 语法引入
# 默认导出和默认导入的使用
#在utils.js中 ，导出
var NAME = '彭于晏'
function add(a, b) {
return a + b
}
export default { #导出
add,
NAME
}
# 在想用的位置导入
import lqz from './lqz/utils' # 以后使用lqz代指就是导出的对象
![[JAVA] Java中如何使用throws语句声明异常类型](https://i-blog.csdnimg.cn/direct/8c39545c2e6c4033868ef39bcbe99bff.png)
