watch && computed 拓展 &&混入 && 组件
watch && computed 拓展
watch深度监听
<body>
<div id="app">
单价：
<br>
数量：
<hr>
<p> 总价： {{ totalPrice }} p>
div>
body>
<script src="../../lib/vue.js">script>
普通监听
new Vue({
el:'#app',
data:{
money:1000,
totalPrice:0,
num:1
},
watch:{
money( val ) {
this.totalPrice = val * this.num;
},
num( val ) {
this.totalPrice = this.money * val;
}
}
})
深度监听
new Vue({
el:'#app',
data:{
money:1000,
totalPrice:0,
num:1
},
watch:{
money( val ) {
this.totalPrice = val * this.num;
},
num( val ) {
deep:true,//深度监听
this.totalPrice = val + this.money;
}
}
})
计算属性 - 存储器形式
<body>
<div id="app">
姓：<input type="text"
v-model="firstName"> <br>
名：<input type="text"
v-model="lastName"> <br>
全名：<input type="text"
v-model="fullName"> <br>
div>
body>
<script src="../../lib/vue.js">script>
普通类型
new Vue( {
el: '#app',
data: {
firstName: '',
lastName: ''
},
computed: {
fullName(){
return this.firstName + ' ' + this.lastName;
}
}
} )
存储器形式
new Vue( {
el: '#app',
data: {
firstName: '',
lastName: ''
},
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName;
},
set( val ) {
console.log( val );
this.firstName = val.slice( 0, 1 );
this.lastName = val.slice( 1 );
}
}
}
} )
混入mixins && 组件component
混入 mixins
-
混入的形式
- 全局混入 【 不推荐 】
- 局部混入
-
混入的作用：
-
- 将选项中某一个或是多个单独分离出去管理，让职能更加单一高效，符合模块化思想
-
-
局部混入的使用
* 通过mixins选项来引入一个对象
-
全局混入
- 所有的组件都会加上去 选项内容
局部混入
//mixin.js
const obj = {
methods: {
aa () {
alert( 'aa' )
},
bb () {
alert( 'bb' )
}
}
}
<body>
<div id="app">
全局混入
<body>
<div id="app">
<button @click="aa"> aa button>
<button @click="bb"> bb button>
div>
body>
<script src="../../lib/vue.js">script>
<script>
/*
通过Vue.mixin定义是全局混入
全局混入是给所有的都加
不推荐
*/
Vue.mixin( {
methods: {
aa() {
alert( 'fn' )
},
bb() {
alert( 'bb' )
}
}
} )
var vm = new Vue( {
el: '#app',
} )
var vm1 = new Vue( {
} )
console.log( 'vm1', vm1 )
console.log( vm )
script>
component组件
理解模块化
为了解决前端用户交互和数据交互，能够更好的反映到视图中，我们发现视图层的职责太重了，它不仅要展示数据，还要管理逻辑，还得处理数据
所以我们选择将视图的任务分离出去，给其他部分来处理，慢慢的就出现了模块化
理解组件化
当今项目是由团队开发的，我们会将项目功能拆分，交由不同的成员来完成，每一个成员必须保证自己完成的功能是独立的，这样它的功能可以用于多个项目，最后再将每一个成员的项目组合起来，这就是组件化
什么是组件 ？
组件是一个html、css 、 js 、img等的一个聚合体，直接就可以在多个项目中应用
Vue中的组件其实就是Vue的扩展功能
全局组件
const Hello = Vue.extend({
template:'Hello component'
});
Vue.component('Hello',Hello);
<script>
// Vue里面组件的扩展功能是通过 Vue.extend() 来做扩展的
console.log( Vue ) // new Vue( options )
console.log( Vue.extend()) // 组件的扩展中的options和 new Vue( options )使用一致 Vue.extend()不进行实例化 也就是不用 new 而是 Vue.extend()
script>
- Vue.extend() 不会进行实例化
- Vue中组件的使用方式 是 类似于 标签
- 为了符合H5的规范，那么我们需要将这些类似于标签一样的内容进行注册
- 注册的作用是为了使用Vue来进行解析
全局组件
<body>
<div id="app">
<Hello>Hello>
div>
<div id="root">
<Hello>Hello>
div>
body>
<script src="../../lib/vue.js">script>
<script>
const Hello = Vue.extend({
// template选项是为了确定一个模板，模板中写的就是jsx
template: ' Hello Component'
})
// 全局注册
// Vue.component(组件的名称，组件配置)
// 组件用大写表示，作用是为了区分原生html提供的标签
Vue.component('Hello',Hello)
new Vue({
el: '#app'
})
new Vue({
el: '#root'
})
script>
简写形式
// 选项可以不适用Vue.extend() 来得到，可以直接写在注册的配置项中
// Vue.component('Hello',options)
Vue.component('Hello',{
template: ' 预祝大家国庆嗨起来 '
})
局部组件
const Hello = Vue.extend({
// template选项是为了确定一个模板，模板中写的就是jsx
template: ' Hello Component'
})
new Vue({
el: '#app',
components: {
// 组件名称：组件的选项
'Hello': Hello
}
})
new Vue({
el: '#root',
components: {
'Hello': Hello
}
})
简写形式
new Vue({
el: '#app',
components:{
Hello:'hello 局部组册简写'
}
})
全局注册 vs 局部注册
- 全局注册是使用了Vue.component()来实现，它的作用范围是全局的，也就是任意一个实例范围内都可以使用
- 局部注册是在组件内通过一个components选项来进行注册，它的作用范围仅仅是当前实例
- new Vue()也是组件，我们称之为’根实例组件’，用 ,这个组件是Vue组件树的最上层
我们希望大家了解 组件中的 options 选项是来源 Vue.extend( options )
组件的命名
- 一个单词，只要首字母大写就可以了
- 如果是两个以上单词，每个单词首字母大写，但是记得使用的时候，写成小写带横杠
- HeadTitle head-title
- 组件名称可以直接定义为小写带横杠
案例
<div id="app">
<Hello>Hello>
<head-title>head-title>
<banner-list>banner-list>
div>
Vue.component('Hello',{
template: ' Hello '
})
Vue.component('HeadTitle',{
template: ' 头部标题 '
})
Vue.component('banner-list',{
template: ' banner '
})
new Vue({
el: '#app'
})
组件的规则
- 我们的html中有些标签是特殊的，它规定了它的父子级，这类型标签有
- ul li
- ol li
- dl dt dd
- select option
- table tr td
- 这类型的直接父子级关系的标签，是不能直接用组件代替的，如果代替了，那么父级会将组件排斥在外面
解决： is属性
is属性的作用就是将一个绑定的容器解析为一个组件的模板
<body>
<div id="app">
<table>
<tr>
<td>1td>
<td>2td>
<td>3td>
tr>
tr>
table>
div>
body>
<script src="../../lib/vue.js">script>
<script>
Vue.component('Hello',{
template: `
4
5
6
`
})
new Vue({
el: '#app'
})
script>
is属性 —动态组件
-
动态组件
- 可以改变的组件
-
Vue中提供了一个叫做 component 的动态组件
-
动态缓存
- deactived 正在使用应用
- inactived 将应用[ 组件 ] 放到了后台，再次使用时，从后台拿取
-
keep-alive组件的好处
-
类比： 我们手机的app应用
- 没有使用keep-alive ， 就相当于用完app就直接关了，在用的时候，重启
- 如果使用keep-alive,就相当于用完app之后，不关闭，切换到后台，用的时候，直接从后台调用
<body>
<div id="app">
<h2>{{ loginWay }}h2>
<keep-alive>
<component :is="comp">component>
keep-alive>
<button type="button"
@click="changeComp">{{ loginWay }}button>
div>
body>
<script src="../../lib/vue.js">script>
<script>
Vue.component( 'UserLogin', {
template: `
用户名：
密码：
`
} )
Vue.component( 'PhoneLogin', ( {
template: `
手机号：
验证码：
`
} ) )
new Vue( {
el: '#app',
data: {
comp: 'UserLogin'
},
methods: {
changeComp() {
return this.comp = this.comp === 'UserLogin' && 'PhoneLogin' || 'UserLogin';
}
},
computed: {
loginWay(){
return this.comp === 'UserLogin' && '手机号登陆' || '账号登陆';
}
}
} )
script>
标签
- 如果在实力范围内书写template标签，那么将来它是不会在渲染中出现的
- template标签在实例范围外是直接显示的
- 组件的模板可以放在实例范围外书写，但是不好的一点就是这个template标签将来还会存在
- 后期我们可以解决这个问题
<body>
<div id="app">
<Hello>Hello>
<template>{{ info }}template>
div>
<template id="Hello">
<div>
<p>Hello worldp>
div>
template>
body>
<script src="../../lib/vue.js">script>
<script>
Vue.component('Hello',{
template: '#Hello'
})
new Vue({
el:'#app',
data:{
info:'么么哒～'
}
})
script>
注意 ： 组件的template模板中要求根源是唯一
组件中的data选项
- 组件是一个独立的个体，那么它应该拥有属于它自己的数据
- 组件的数据是要有独立作用域的，不容易被外界干扰
- 除了根实例以外，组件的data选项都是一个函数
- 为什么data选项要返回一个对象？
- 因为Vue深入响应式原理要求是对一个对象进行getter和setter设置
- 组件的数据在组件的模板中相当于全局变量
<body>
<div id="app">
<Hello>Hello>
div>
<template id="hello">
<div>
<p>{{ money }}p>
div>
template>
body>
<script src="../../lib/vue.js">script>
<script>
Vue.component('Hello',{
template:'#hello',
data() {
return {
money:'¥2000'
}
},
})
new Vue({
el:'#app'
})
script>
组件的嵌套
组件嵌套就是将子组件以标签化的形式放到父组件的模板中即可
<body>
<div id="app">
<Father>Father>
div>
<template id="Father">
<div>
Father
<Son>Son>
div>
template>
<template id="Son">
<div>
Son
div>
template>
body>
<script src="../../lib/vue.js">script>
<script>
Vue.component( 'Father', {
template: '#Father'
} )
Vue.component( 'Son', {
template: '#Son'
} )
new Vue( {
el: '#app'
} )
script>
组件通信
* 为什么要进行组件通信？
* 将来组件要进行组合时，各个组件之间需要进行联系，这个联系就是组件通信
<!-- 步骤 -->
//第一步Father data(){}设置
Vue.component('Father',{
template: '#father',
data () {
return {
money: 2000
}
}
})
//第二步 组件通过v-bind 接受数据
<template id="father">
<div>
father
<Son :money = "money"></Son>
</div>
</template>
//第三步 Son props 以数组的形式接受数据
Vue.component('Son',{
template: '#son',
props: ['money']
})
<body>
<div id="app">
<Father>Father>
div>
<template id="father">
<div>
father
<Son :money="money">Son>
div>
template>
<template id="son">
<div>
son
<p>老爸给我{{ money }}块钱生活费p>
div>
template>
body>
<script src="../../lib/vue.js">script>
<script>
Vue.component('Father',{
template: '#father',
data() {
return {
money:2000
}
},
})
Vue.component('Son',{
template: '#son',
// props: ['money'],
props: {
// 'money':Number
'money':{
validator( val ){
return val > 1000
}
}
}Ï
})
new Vue({
el: '#app'
})
script>
- 属性验证
- vue提供
- 第三方也有 vue-validate
- 现在流行用TS[ typescript ]
你可能感兴趣的:(vue.js,混入与组件)