10.28内容整理和概述
今日内容概要
内容目录
- 计算属性
- 监听属性
- 组件
- 组件通信
- ref属性
- 动态组件
- 插槽
- vue-cli
- 战略补充
计算属性
应用背景：当我们插值一个函数的时候，每次页面刷新，函数都会重新执行，这是没有必要的浪费资源行为
解决方法：引用计算属性，将函数当属性来使用，直接用缓存加载，节省资源
计算属性的使用：
1.在Vue实例中增加新的computed属性
2.在computed属性定义方法
3.将最终计算值返回出去
4.在插值语法中直接调用方法名，不需要加括号
计算属性特性：
1.定义内方法都当属性用(不需要加括号) # 例子：{{upper}}
2.当计算属性中使用的变量发生变化时，属性重新运算
3.当计算属性中使用的变量没有发生变化时，无需重新加载，直接用缓存 # 第一次加载，计算属性方法必定运行
4.计算属性方法的计算值必须return出去
计算属性案例：
<input type="text" v-model="name2">--->{{upper}}
<script>
var vm = new Vue({
el: '#app',
data: {
name: '',
name2: ''
},
computed: {
upper() {
return this.name2.slice(0, 1).toUpperCase() + this.name2.slice(1)
}
}
})
</script>
监听属性
功能：监听一个属性的变化，只要它发生变化，就执行一个函数
监听属性的使用：
1.在Vue实例中增加新的watch属性
2.在watch属性定义方法
3.在标签中调用该属性并监听一个数据，数据一旦发生变化，执行监听属性方法 # 例子：<button @click="type='人文'">人文</button>
监听属性案例：
<span>
<button @click="type='人文'">人文</button>
<button @click="type='社科'">社科</button>
<button @click="type='地理'">地理</button>
</span>
<script>
var vm = new Vue({
el: '#app',
data: {
type: '人文',
},
watch: {
type(val) {
console.log('修改后变成了，', val)
console.log('向后端加载数据了')
}
}
})
</script>
组件
目的：复用代码
特点：
1.扩展 HTML 元素，封装可重用的代码
2.独有自己的js，css，html
分类：
全局组件：
特点：
1.全局可以使用，可以用在任意其它组件中
2.在script标签中独立调用 # 例子：Vue.component('child', obj)
代码案例：
var obj = {
template: `
<div>
<button>后退</button>
{{ title }}
<button @click="handleClick">前进</button>
</div>`,
data() {
return {title: '标题'}
},
methods: {
handleClick() {alert('前进')}
},
}
Vue.component('child', obj)
局部组件：
特点：
1.局部组件只能在定义的位置(组件中)使用
2.需要在组件的components属性中注册
代码案例：
var lqz = {
template: `
<div>
<h1>我是lqz组件</h1>
{{ name }}
<child3></child3>
</div>`,
data() {
return {name: 'lqz'}
},
components: { # 第一种局部组件
'child3': {
template: `
<div>
<h2>我是lqz组件内的组件</h2>
</div>`,
}
}
}
var vm = new Vue({
el: '#app',
data: {},
components: {
lqz # 第二种局部组件
}
})
组件通信
应用背景：如何实现父组件和子组件之间数据的传递
父传子之自定义属性：
实现步骤：
1.在子组件标签上自定义新属性，并传入值 # 例子：<lqz :myname="name"></lqz>
2.在子组件的配置中增加props属性
3.props属性可以是数组和对象数据对象，并把自定义的属性名传入 # 例子：props:['myname']
4.当想对父组件传来的数据进行约束时，可以让props属性数据类型为对象，并对属性进行约束 # props:{'myname':String,'isshow':Bololeon,'aaa':Null}
案例实现：
<lqz :myname="name"></lqz>
var lqz = {
template: `
<div>
<h1>我是lqz组件</h1>
{{ myname }}
</div>`,
//props: ['myname'],
props: {
myname: String,
},
}
var vm = new Vue({
el: '#app',
data: {
name: '刘亦菲'
},
components: {
lqz
}
})
字传父之自定义事件：
实现步骤：
1.在子组件标签上自定义事件，并传入函数 # 例子：<lqz @myevnet="handleEvent"></lqz>
2.在子组件传输数据的标签上绑定事件并自定义方法
3.在自定义方法中调用this.$emit方法，并绑定自定义事件名，并传入参数，该参数就会被传入到父组件里 # 例子：this.$emit('myevnet', this.name，'xxxxx')
4.在父组件定义的对应自定义事件的函数，需要接收子组件传来的形参 # 例子： handleEvent(name) {...}
案例实现：
var lqz = {
template: `
<div>
<h1>我是lqz组件</h1>
<input type="text" v-model="name"> ---》{{ name }}
<br>
<button @click="handleSend">点我把name传给父组件</button>
</div>`,
data() {
return {name: ''}
},
methods: {
handleSend() {
this.$emit('myevnet', this.name)
}
}
}
var vm = new Vue({
el: '#app',
data: {
name: '刘亦菲'
},
methods: {
handleEvent(name) {
this.name = name
}
},
components: {
lqz
}
})
补充：组件之间通信不止这些
'---------------------------------'
props属性：
功能：用于接收父组件传来的数据
三种数据类型：
1.数组类型 # 例子：props: ['msg','name']
2.对象类型，用于单重属性验证 # 例子：props: {msg:String,id:int}
3.对象套对象，用于多重属性验证
例子：
props: {
msg: {
type: String, # 类型
required: true, # 必要性
default: '老王' # 默认值
}
},
ref属性
功能：通过增减ref属性实现拿取当前标签/组件
使用：
普通标签：
1.直接在标签上增加ref属性，并定义变量 # 例子：<input type="text" ref="myinput" v-model="name">====>{{name}}
2.负责管理的Vue对象里会多一个$refs属性，该属性对应的是所有增加ref属性的标签对象(原生的dom对象)
3.可以通过此方法使用原生dom操作 # 不推荐
组件：
1.直接在组件上增加ref属性，并定义变量 # 例子：<lqz ref="mylqz"></lqz>
2.负责管理的Vue对象里会多一个$refs属性，该属性对应的是所有增加ref属性的标签对象(原生的dom对象)
3.这时候就意味着已经可以拿到该组件的对象 # 拿取组件对象操作：this.$refs.mylqz
4.意味着可以对该组件进行编辑(组件通信的另一种实现) # 例子：this.$refs.mylqz.handleQJ(this.name)
动态组件
应用背景：通过对数据的切换，实现组件的切换
关键技术：在组件标签上增加is属性
案例实现步骤：
1.定义多个全局组件
2.在html中定义一个component标签，并增加is属性，并赋予数据 # 例子：<component :is="type"></component>
3.定义事件，实现is对应的数据变换 #
4.当is属性等于某个全局组件名时，该component标签会自动替换成该组件 # 例子：<span @click="type='home'">首页</span>
案例代码：
<body>
<div id="app">
<div>
<span @click="type='home'">首页</span>|
<span @click="type='goods'">商品</span>|
<span @click="type='order'">订单</span>
</div>
<div>
<component :is="type"></component>
</div>
</div>
</body>
<script>
Vue.component('home', {
template: `
<div>
<h1>首页</h1>
</div>`,
})
Vue.component('goods', {
template: `
<div>
<h1>商品</h1>
</div>`,
})
Vue.component('order', {
template: `
<div>
<h1>订单</h1>
</div>`,
})
var vm = new Vue({
el: '#app',
data: {
type: 'home'
},
})
</script>
插槽
使用位置：html中组件标签之间 # 例子： <home><img src="a.jpg" width="200px" height="200px"></home>
普通插槽使用步骤：
1.在组件定义的template属性任意位置插入<slot>标签
例子：
Vue.component('home', {
template: `
<div>
<button>后退</button>
<span>首页</span>
<button>前进</button>
<hr>
<slot></slot>
</div>`,
})
2.在调用该组件时，向标签中插入的html语句会自动替代<slot>标签的位置
例子：<home><img src="a.jpg" width="200px" height="200px"></home>
具名插槽使用步骤：
1.在组件定义的template属性任意位置插入<slot>标签，并自定义name属性
例子：
Vue.component('goods', {
template: `
<div>
<slot name="top"></slot>
<hr>
<button>后退</button>
<span>首页</span>
<button>前进</button>
<hr>
<slot name="bottom"></slot>
</div>`,
})
2.在调用该组件时，向标签中插入的html语句，并加入slot属性，就会自动替换和<slot>标签同名的位置
例子：
<goods>
<div slot="bottom">
我是底部
</div>
<a href="" slot="top">点我看美女</a>
</goods>
vue-cli
vue的脚手架：快速帮我们创建出vue的项目
脚手架：
1.vue-cli：可以创建vue2和vue3的项目 # webpack构建工具
2.Vite：创建vue3的项目
优点：编译快
vue-cli使用前提：
1.安装nodejs # 网址：https://nodejs.org/zh-cn/download/
npm安装vue-cli：
2.安装vue-cli：npm install -g @vue/cli
cnpm安装vue-cli：
2.安装npm install -g cnpm --registry=https://registry.npm.taobao.org # 淘宝做的npm镜像站
3.安装vue-cli：cnpm install -g @vue/cli
4.安装成功后，会增加一个可执行文件——Vue.exe
通过vue-cli脚手架创建Vue项目：
1.在终端输入：vue create myfirstvue(项目名)
2.选择Manually select features，回车
3.选择Babel，Router，Vuex插件，回车
Babel插件功能：将高版本语法都转为ES5的语法
Router插件：路由
Vuex插件：状态管理器
4.选择版本
5.选择yes，再选择In package.json
6.再选择yes，并给当前配置命名
ide的选择：
1.vscode # 官方推荐
2.webstorm # jetbrains公司的
3.pycharm
战略补充
nodejs：
1.语法和js一样
2.语言性质为后端语言
3.浏览器的v8引擎安装在操作系统上，所以可以在操作系统上操作node.js
4.一些内置库是c语言编写 # 内置库例子：文件操作，网络操作
浙公网安备 33010602011771号