day67 vue组件
复习
"""
1、表单指令：
v-model="变量" 变量与value有关
普通：变量就代表value值
单选框：变量为多个单选框中的某一个value值
单一复选框：变量为布尔，代表是否选中
多复选框：变量为数组，存放选中的选项value
2、条件指令：
v-show: display:none
v-if: 不渲染
v-if | v-else-if | v-else
前者条件成立，就不管之后分支，当所有条件都不成功，才执行v-else分支
3、循环指令：
v-for="(v, i) in str|arr"
v-for="(v, k, i) in dic"
v:值 k:键 i:索引
4、sessionStorage | localStorage
sessionStorage：生命周期同所属标签(标签关闭被销毁)
localStorage：永久保存
localStorage.key = value
localStorage.clear()
5、分隔符：delimiters: ['[{', '}]'],
6、过滤器：
{{ n1, n2 | f1(30) | f2 }}
filters: {
f1(n1,n2,n3) {return 过滤结果},
f2(f1的res) {return 过滤结果},
}
7、计算属性：
result必须渲染；绑定的方法内部出现的变量更新方法被调用；方法返回值是result的值；result不能在data中重复定义
computed: {
result() {
// 一个方法属性值依赖于多个变量
return this.n1 + this.n2;
}
}
8、监听属性：
监听属性属性更新方法被调用；方法参数为被监听属性当前值，上一次值；多个变量依赖一个变量
watch: {
full_name(n, o) {
this.first_name = n.split('')[0]
this.last_name = n.split('')[1]
}
}
9、冒泡排序：
for (let i=0; i<arr.length-1; i++) { // 趟数
for (let j=0; j<arr.length-1-i; j++) { // 比较次数
// 处理条件即可
if (arr[j]参数 > stus[j + 1]参数) {
let temp = stus[j];
stus[j] = stus[j + 1];
stus[j + 1] = temp;
}
}
}
"""
补充
在data里，属性名与值为变量的变量名相同时，可以简写忽略值
data{
scores
}
for in 遍历的是取值关键 |for of 遍历的是值
for (score of scores) {
score.total = score.math + score.chinese + score.english;
}//scores是一个列表套字典
组件
什么是组件
html、css、与js的集合体，为该集合体命名，用该名字复用html、css、与js组成的集合体=>复用性
组件分类
根组件：new Vue() 生成的组件
局部组件：组件名={}，{}内部采用的是Vue语法
全局组件：Vue.component(‘组件名’，{})，{}内部采用的是vue语法
组件特点：
1）组件都有管理组件html页面结构的 template 实例成员，template中有且只有一个根标签
2）根组件都是作为最顶层父组件，局部与全局组件作为子组件，也可以成为其他局部与全局组件的父组件
3）子组件的数据需要隔离（数据组件化，每个组件拥有自己数据的独立名称空间）
4）局部组件必须注册才能使用，全局组件不要需要注册，提倡使用局部组件
5）组件中出现的所有变量（模板中、逻辑中），都由该组件自己提供管理
6)局部全局和根组件都是一个vue示例，一个实例对应一套html、css、js结构，所以实例就是组件
总结：跟组件，可以不明确template，template默认采用挂载点页面结构；如果设置了template，挂载点内部的内容无效
解释：html、body标签不能被替换，所以不能作为挂载点
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',//被组件template模块进行替换的占位符
data:{
msg:'组件信息'
},
template:'<p>{{ msg }}</p>'
})
</script>
子组件
<body>
<div id="app">
<div class="wrap">
<local-tag></local-tag>
<global-tag></global-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//声明局部组件：局部组件要在其父组件中注册才能使用
//1、声明组件 2、注册组件 3、渲染组件 全局组件不需要注册
let localTag={
template:`
<div class="box" @click="fn">
<img src="img/001.jpg" alt="">
<h2>美女</h2>
</div>`,
method:{
fn(){
console.log(this)
}
}
};
Vue.component('global-tag',{
template:`
<div class="box" @click="fn">
<img src="img/002.jpg" alt="">
<h2>美女呀</h2>
</div>`,
methods:{
fn(){
console.log(this)
}
}
})
new Vue({
el:'#app',
data:{},
components:{//注册组件
localTag,
}
})
</script>
</html>
组件化
<body>
<div id="app">
<div class="wrap">
<local-tag></local-tag>
<local-tag></local-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let localTag={
template:`
<div class="box" @click="fn">
<img src="img/002.jpg" alt="">
<h2>锤了美女{{ count }}下</h2>
</div>`,
data(){//局部或全局组件，一个组件可能会被复用多次，每个组件都应该有自己独立的变量名称空间
return {
count:0,
}
},//数据需要组件化，作为方法的返回值（方法执行之后会产生一个局部作用域）
methods:{
fn(){
this.count++
}
}
}
new Vue({
el:'#app',
data:{},
components:{
localTag,
}
})
</script>
</html>
组件传参-父传子
总结：
1）子组件可以通过props自定义组件属性（采用反射机制，需要填写字符串，但是使用时可以直接作为变量）
2）子组件会在父组件中渲染，渲染时，将父组件的变量绑定给子组件的自定义属性,就可以将变量值传递给子组件
<body>
<div id="app">
<local-tag v-for="dog in dogs" :dog="dog"></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let dogs=[
{
name:'美女一号',
img:'img/001.jpg',
},
{
name:'美女二号',
img:'img/002.jpg',
},
{
name:'美女三号',
img:'img/003.jpg',
},
{
name:'美女四号',
img:'img/004.jpg',
},
]
let localTag={
props:['dog','def','xyz'],
template:`
<div class="box" @click="fn">
<img :src="dog.img" alt="">
<h2>锤了{{ dog.name }}{{ count }}下</h2>
</div>`,
data(){
return {
count:0,
}
},
methods:{
fn(){
this.count++
}
}
}
new Vue({
el:'#app',
data:{
dogs
},
components:{
localTag
}
})
</script>
</html>
组件传参-子传父
自定义组件标签的事件：
自定义事件是属于子组件的，子组件在父组件中渲染并绑定事件方法，所以事件方法由父组件来实现
子组件如何触发自定义事件：this.$emit('自定义事件名',触发事件回调的参数们)
子组件触发自定义事件，携带出子组件的内容，在父组件中实现自定义事件的方法，拿到子组件传递给父组件的消息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{ h1 }}</h1>
<h2>{{ h2 }}</h2>
<tag @action="actionFn"></tag>
<hr>
<tag2 @h1a="aFn1" @h2a="aFn2"></tag2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let tag={
template:`
<div>
<input type="text" v-model="t1">
<input type="text" v-model="t2">
<button @click="changeTitle">修改标题</button>
</div>
`,
data(){
return {
t1:'',
t2:'',
}
},
methods:{
changeTitle(){
if (this.t1 && this.t2){
this.$emit('action',this.t1,this.t2);
this.t1='';
this.t2='';
}
}
}
};
let tag2={
template:`
<div>
<input type="text" v-model="t1" @input="t1Fn">
<input type="text" v-model="t2">
</div>
`,
data(){
return {
t1:'',
t2:'',
}
},
methods:{
t1Fn(){
this.$emit('h1a',this.t1)
}
},
watch:{
t2(){
this.$emit('h2a',this.t2)
}
}
}
new Vue({
el:'#app',
data:{
h1:'主标题',
h2:'子标题'
},
components:{
tag,
tag2,
},
methods:{
actionFn(a,b){
this.h1=a;
this.h2=b;
},
aFn1(a){
if (!a){
this.h1='主标题';
return
}
this.h1=a;
},
aFn2(a){
if (!a){
this.h2='子标题';
return
}
this.h2=a;
}
}
})
</script>
</html>
vue基础知识
组件：
组件概念：vue实例就是组件
根组件、局部组件、全局组件
组件传参：
父传子：自定义组件属性
子传父：自定义组件事件
实例成员：
el data methods computed watch fileters delimiters props template components
指令:
{{}} v-text v-html v-once v-on v-model v-bind v-if v-show v-else-if v-else v-for v-cloak
vue项目环境
vue~~django
node~~python
npm~~pip
1) 安装node
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
2) 换源安装cnpm
>: npm install -g cnpm --registry=https://registry.npm.taobao.org
3) 安装vue项目脚手架
>: cnpm install -g @vue/cli
注：2或3终端安装失败时，可以清空 npm缓存 再重复执行失败的步骤
npm cache clean --force
