VUE

vue介绍

一、官网：https://cn.vuejs.org/

1.vue特点：易用，灵活，高效
2.渐进式：根据需求的不同加载不同模块
3.库和框架的区别：
库=>jq …js 功能单一
框架=>vue react angular
4.vue核心：数据驱动&组件化
5.vue安装
1).cdn方式需要引入的开发版本
2).npm install vue
3).直接下载vue.js

二、指令

v-text/v-html
v-if,v-show
v-if:直接移除元素
v-show:通过display：none设置元素
应用场景：如果频繁切换元素需要用v-show
v-if/v-show
v-else-if v-else
注意：v-if v-else 中间不允许有内容
v-bind 绑定属性

  <!-- v-bind简写: --><div :abc='abc'>我是div</div>

v-on 绑定方法

<!-- v-on：的简写方式:@ -->
<button @click='fn'>点击弹出内容</button>

v-model:
数据的双向绑定只能应用于表单元素

 <div >{{content}}</div><input type="text" v-model='content'>

三、绑定样式

:class 方式绑定:

 <div class="box div3">我是div</div><!-- 通过绑定属性的方式 --><div :class='box'>我是div2</div><!-- 通过三元方式添加样式 --><div :class='[1==2?box:div3]'>我是div3</div><!-- 复合样式--><div :class='box+" div3"'>我是div4</div>

:style 方式绑定:

<div style='width: 100px;height: 100px;background-color: red;'>我是div</div>
<!-- style的行内样式 -->
<div :style='obj'>我是div2222</div>
<div :style='[obj,obj1]'>我是div33333</div>

知识点: :key的作用; 绑定一个唯一值，避免勾选不正确的问题与v-for的固定搭配

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><div v-for='(item,index) in list' :key='item.id'><input type="checkbox">{{index+1}}---- {{item.name}}---{{item.age}} </div><div>姓名: <input type="text" v-model='user.name'></div><div>年龄: <input type="text" v-model='user.age'></div><div><button @click = 'add'>添加</button><button @click = 'reset'>重置</button></div></div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>new Vue({el: '#app', data: {user:{name:'张三',age:20},list:[{id:1,name:'李四',age:15},{id:2,name:'王五',age:25},{id:3,name:'赵六',age:35},]},methods: {**// 重置数据  this 指的就是vue的实例**reset(){this.user={name:'',age:''} },// 增加add(){// this.list.push({id:4,name:'王麻子',age:18})let obj = {id:4,name:'王麻子',age:18}this.list.splice(2,0,obj)}},})
</script>
</html>

四、表单

姓名 name eg:"张三"
性别 sex  eg:"0"   说明：男-0 女-1 
电话 tel  eg:"15747474747"
密码 pass eg:"123"
爱好 hobby eg:["codding","playing"] 说明：唱歌-sing 跳舞-dancing 打游戏-playing 写代码-codding 
专业 job eg:"web"  说明：java工程师-java web工程师-web php工程师-php 
证书 cert eg:["erji","siji"] eg:计算机二级-erji 英语四级-siji 英语6级-liuji 
备注 des eg:"他是一个党员"
是否同意 isAgree eg:true  同意-true 不同意-false

1.单选框: 绑定的属性一定要与value的值保持一致，提交还是会提交value的值

 <!-- 单选框的使用  --><div>性别: <input type="radio" name="sex" value="0" v-model='sex'>男<input type="radio" name="sex" value="1" v-model='sex'>女</div>

2.多选框：

1）如果初始值为数组:会把value的值赋值给数组

2）如果初始值是对象，则会把数据类型转为布尔值，那么最终的结果就会以true/false展示

 <!-- 多选框  --><div><input type="checkbox" checked value="sing" v-model='hobby'>唱歌<input type="checkbox" value="dance" v-model='hobby'>跳舞<input type="checkbox" value="coding" v-model='hobby'>敲代码{{hobby}}</div><!-- 初始值为对象 --><div><input type="checkbox" checked value="sing" v-model='hobby2'>唱歌2<input type="checkbox" value="dance" v-model='hobby2'>跳舞2<input type="checkbox" value="coding" v-model='hobby2'>敲代码2{{hobby2}}</div>

3.下拉框:把初始值需要绑定到select上,还是根据value的值对select进行赋值

<!-- 下拉框 --><div><select v-model='edu'><option value="小学">小学</option><option value="中学">中学</option><option value="大学">大学</option></select></div>

4.文本域

文本域:
<div>
<textarea  cols="30" rows="10" v-model='text'></textarea>
</div>

PS:VUE单页应用

SPA：signal page application（单页应用）

多页面：1个url->1个html文件多个url->多个url

单页面:1个url->多个组件他们之间的切换是通过路由

五、修饰符

1. 事件修饰符

stop :阻止事件冒泡

prevent:阻止默认行为

capture:事件捕获给谁添加谁先出来

once:只执行一次

self:只有自己才可以触发自己

2.鼠标修饰符

left:左键触发
right:右键触发
middle:中间滚轮
注意：对于修饰符自多只能写两个

3.键盘修饰符

up,down,left,right,enter

4.表单修饰符

lazy:失去焦点后获取最新数据
number:只判断第一个值是否是number类型是number返回number 不是返回string
trim:去除用户输入内容的首位空格

六、vue生命周期

钩子函数：8个
beforeCreate : el data name 都是undefined
created：el ：undefined data：可以拿到数据
beforeMount：el：有节点了，data：有数据此时el中的数据没有渲染
mounted:页面渲染完成
beforeUpdate:更新数据
updated：更新完成注意：更新前后数据是一致的
beforeDestory：销毁之前
destory:销毁完成

七.动画

1.基础使用

第一步：给需要添加动画的元素用包裹起来
第二步：设置6个样式

<transition>
<div class="box" v-show='isShow'></div>
</transition>

 .v-enter{opacity: 0;}.v-enter-to{opacity: 1;}.v-enter-active{transition: all 2s;}.v-leave{opacity: 1;}.v-leave-to{opacity: 0;}.v-leave-active{transition: all 2s;transform: rotate(360deg);}

注意:如果需要添加多个动画，只能修改样式中的v 把v换成自己定义的类名即可

		.aa-enter{opacity: 0;}.aa-enter-to{opacity: 1;}.aa-enter-active{transition: all 2s;}.aa-leave{opacity: 1;}.aa-leave-to{opacity: 0;}.aa-leave-active{transition: all 2s;}

<transition name='aa'>
<div class="box" v-show='isShow'></div>
</transition>

2.动画库的使用

引入animate.css这个库
地址;https://animate.style/

<transition enter-active-class='animate__animated animate__rubberBand'leave-active-class="animate__animated animate__bounceOutUp"><div class="box" v-show='isShow'></div></transition>

八、watch

案例：百度搜索框

接口：百度：http://suggestion.baidu.com/su?cb=callback&wd=123

1.深浅监听

 watch:{//浅监听msg(newVal,oldVal){console.log(newVal,oldVal)},//深监听json:{//这个名字不能更改handler(a){console.log(a)},//主要通过deep属性deep:true},注意：不建议使用深监听，通常转换为浅监听方式}

2.百度案例

1).跨域的解决 jsonp

2).通过监听用户输入，发送请求，渲染页面

<!DOCTYPE html>
<html lang='en'>
<head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>Document</title><style>.select{background-color: red;}</style>
</head>
<body><div id='app'><input type="text" v-model='search'  @keydown.up.prevent='up' @keydown.down = 'down' @keydown.enter = 'enter'><ul><li v-for='(item,index) in arr' :key='item' :class='[index==n?"select":""]'>{{item}}</li></ul></div>
</body>
<script src='./vue.js'></script>
<script>let vm = new Vue({el: '#app',data: {search:'',arr:[],//请求回来的数据n:-1,//自己定义的标识},methods: {down(){console.log(111)this.n++;if(this.n>this.arr.length-1){this.n = 0}},up(){this.n--;if(this.n<0){this.n=this.arr.length-1}},enter(){// https://www.baidu.com/s?wd=123//在下拉列表的范围内点击跳转到对应的搜索页面if(this.n>=0&&this.n<=this.arr.length-1){window.open('https://www.baidu.com/s?wd='+this.arr[this.n])}else{window.open('https://www.baidu.com/s?wd='+this.search)}}},watch: {search(){if(this.search==''){return}// 发送数据请求 jsonp方式var os = document.createElement('script');os.src = 'http://suggestion.baidu.com/su?cb=aa&wd='+this.search;document.body.appendChild(os)}},})function aa(res){console.log(res)// 找到与vm中data的关系，并且赋值vm.arr = res.s}
</script>
</html>

九、过滤器

1.全局： Vue.fliter(‘过滤器名字’,回调函数) 回调函数中做的是业务逻辑

2.局部：在vue实例中通过filters配置项来配置 filters:{ 过滤器名称(){ 业务逻辑} }

案例:

1).电话号码过滤

<div id='app'>
<!-- | 管道符  -->
{{tel | filterTel}}
</div>

Vue.filter('filterTel',(tel)=>{return tel.slice(0,3)+'****'+tel.slice(7)
})

2).过滤价格

 <div id='app'><!-- | 管道符  -->{{price | filterPrice}}</div>

Vue.filter('filterPrice',(price)=>{return price.toFixed(2)
})

3).过滤时间

<div id='app'><div>当前时间{{ time | filterTime}}</div></div>

Vue.filter('filterTime',(time)=>{// padStart   首位补零方法  padEnd  末尾补零let date = new Date(time)console.log(date)// 年let year = date.getFullYear()// 月let month = ((date.getMonth()+1)+'').padStart(2,'0')// 日let day = (date.getDate()+'').padStart(2,'0')// 时let hours = (date.getHours()+'').padStart(2,'0')// 分let minutes = (date.getMinutes()+'').padStart(2,'0')// 秒let seconds = (date.getSeconds()+'').padStart(2,'0')return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
})

十、计算属性

1.通过计算得出来的，所以就没有初始值

computed

十一、购物车案例

流程：

1.先画静态页面利用bs

 <div id='app' class="container"><h2>购物车</h2><table class="table table-bordered table-hover"><tr><th><input type="checkbox" v-model='allChecked' @change='checkAll'>全选</th><th>商品名称</th><th>商品单价</th><th>商品数量</th><th>小计</th><th>操作</th></tr><tr v-for='(item,index) in list' :key='item.id'><td><input type="checkbox" v-model='item.checked' @change='changeOne(index)'></td><td>{{item.name}}</td><td>{{item.price}}</td><td><button type="button" class="btn btn-primary" @click= 'cut(index)'>-</button><span>{{item.num}}</span><button type="button" class="btn btn-danger" @click= 'add(index)'>+</button></td><td>小计:{{item.price*item.num}}</td><td><button type="button" class="btn btn-primary" @click = 'del(index)'>删除</button></td></tr><tr><td colspan="6">总价:{{total}}</td></tr></table></div>

2.实现点击添加，点击减少数量，点击删除功能

 let vm = new Vue({el:'#app',data:{allChecked:false,list:[{id:1,name:'手机',price:1999.9,num:1,checked:false},{id:2,name:'电脑',price:4999.9,num:1,checked:true},{id:3,name:'平板',price:2999.9,num:1,checked:false},{id:4,name:'相机',price:999,num:1,checked:false},]},methods: {// 添加add(index){this.list[index].num++},cut(index){this.list[index].num--if( this.list[index].num<0){this.list[index].num=0}},del(index){this.list.splice(index,1)},// 全选checkAll(){this.list.forEach(item=>{item.checked = this.allChecked})},//改变一个的状态changeOne(index){this.allChecked = this.list.every(item=>item.checked)}},})

3.判断选中状态完成总价的计算

<tr><td colspan="6">总价:{{total}}</td>
</tr>

computed: {total(){var sum=0;this.list.forEach(item=>{if(item.checked){sum+=item.price*item.num}               })return sum}},

bootstrap

十二、组件

特点：一组可复用的vue实例
组件化和模块化的区别？
组件化：组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程，有多种属性、状态反映其内部特性
特点：一个具有html+css+js的页面
模块化：侧重的功能的封装，主要是针对Javascript代码，隔离、组织复制的javascript代码，将它封装成一个个具有特定功能的的模块。

1.命名规则

1）.不能以标签起名，包含大写

2）.建议用驼峰起名

3）.首字母大写，后面直接写名字。如果后面有大写需要转换为驼峰

2.template模板

<!DOCTYPE html>
<html lang='en'>
<head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>Document</title>
</head>
<body><div id='app'><v-one></v-one><v-two></v-two><v-three></v-three></div>
</body>
<!-- 开发环境 -->
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>// 组件：一组可复用的vue实例// 用法：全局定义,局部定义// Vue.component('组件名',模板对象)// components:{组件名:{模板对象}}
//必须要写在实例对象之前
Vue.component('vOne',{// template:要往页面上渲染的模板template:'<div>我是第一个组件</div>'
})let vm = new Vue({el: '#app',data: {},methods: {},components:{vTwo:{template:'<div>我是第二个模板对象<div>abc</div></div>'},vThree:{template:`<div>我是第二个模板对象<h2>我是标题2</h2></div>`}   }})// 特点：template 有且只能有一个根元素 通常是div
</script>
</html>

3.data使用

重点：组件中定义data为函数，原因是：为了共享数据但是又互相不干扰.
<body><div id='app'><div>{{msg}}</div><p>{{msg}}</p><button @click = 'change'>点击修改msg</button><hr><v-one></v-one><v-one></v-one></div><template id="temp1"><div><p>{{content}}</p><button @click='changeOne'>修改内容</button></div></template>
</body>

 let vm = new Vue({el: '#app',data: {msg:'abc'},methods: {change(){this.msg='123'}},components:{vOne:{template:'#temp1',data(){return {content:'我要被修改了'}},methods: {changeOne(){this.content = '我被修改了'}},}}})// 总结:data定义为函数的原因:由于需要共享数据，但是又要互不干扰,所以定义为函数

十三、组件嵌套

注意：子组件只能在父组件中使用   子组件中的数据目前仅能供自己使用
<!DOCTYPE html>
<html lang='en'>
<head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>Document</title>
</head>
<body><div id='app'>{{msg}}<v-one></v-one></div><template id="temp1"><div><h2>我是模板一</h2>{{name}}<!-- {{msg}} --><!-- <v-inner></v-inner> --></div></template><template id="temp2"><div><h2>我是模板二</h2>        </div></template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>// 组件：一个可复用的vue实例let vm = new Vue({el: '#app',data: {msg:'hello '},methods: {},components:{vOne:{template:'#temp1',components:{vInner:{template:'<div>我是里层嵌套的模板<v-three></v-three></div>',components:{vThree:{template:'#temp2'}}},vOuter:{}},data(){return {name:'张三'}}}}})
</script>
</html>

总结：组件中关系：只有父子和非父子关系
嵌套:子组件只能在父组件中使用
组件中的data ：定义为方法，必须有返回值，同时返回值的类型为对象
data 中的数据只能供自己使用如果其他组件需要使用需要传值
比如：data,methods,filter,cmpputed,watch…

十四、后台管理页面实现

注意：

1.外层嵌套大盒子（container）

2.划分布局

3.书写组件

4.组件嵌套

5.添加样式

6.生命周期 --8个钩子函数 =>mounted 是最常用的

v-if 会引起生命周期的改变
v-show 不会引起

<!DOCTYPE html>
<html lang='en'>
<head><meta charset='UTF-8'><meta name='viewport' content='width=device-width, initial-scale=1.0'><title>Document</title>
</head>
<body><div id='app'><div v-html='msg' v-if='isShow'></div><button @click='change'>点击</button><hr><v-one v-show='isShow'></v-one></div><template id="temp1"><div><div v-if='show'>{{con}}</div><button @click='changeC'>点击切换内容</button></div></template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>let vm = new Vue({el: '#app',data: {msg: 'hello world！',isShow: true},methods: {change() {this.isShow = !this.isShow}},components: {vOne: {template: '#temp1',data() {return {con: '我是组件模板',show: true}},methods: {changeC() {this.con = '我被修改了!!!!!!!'}},mounted() {console.log('组件内容挂载完成')},destroyed() {console.log('销毁执行了')},}},mounted() {console.log('vm内容挂载完成')},destroyed() {console.log('vm销毁执行了')},})
</script>
</html>

上述案例生命周期的执行过程为：

首先是vm实例的生命周期执行beforeCreate，created，beforeMount，
之后是到组件走生命周期beforeCreate，created，beforeMount，mounted，最后是走vm的mounted。

十五、脚手架

步骤：

全局安装webpack

npm i webpack -g

查看版本

webpack -v

全局安装vue脚手架

npm i vue-cli -g

查看版本

vue -V

创建项目

vue init webpack demo

进入项目

cd demo

启动

npm run dev //localhost:8080

注意：安装cnpm方法淘宝镜像

npm i -g cnpm --registry=https://registry.npm.taobao.org

十六、组件通信

1.父传子：

总结：

1）.父传子：传递的是基础数据类型给父组件中的子组件绑定属性，此时属性的值在父组件中已经定义，子组件需要通过props接收,要用数组接收在子组件中直接渲染接收到的值即可

2）.父传子:子修改父组件传递的值报错,如果解决，把父组件传递过来的值变为自己的属性，直接修改自己属性即可。后果：父组件修改不会影响自己的数据

3）.父传子:父变，子变，子变，父变，需要在父组件中定义对象，传递给子组件的就是对象的方式，子组件正常接收即可

parent.vue 父组件

<template><div>parent<div>这是给儿子的礼物----{{ msg }}</div><input type="text" v-model="msg" /><div>{{info}}</div><input type="text" v-model='info.name'><v-child :gift="msg" :money="money" :info='info'></v-child></div>
</template>
<script>
import vChild from "./child";
export default {components: {vChild,},data() {return {msg: "大奔",money: 2000,info:{name:'张三'},};},methods: {},mounted() {},
};
</script>
<style>
</style>

child.vue 子组件

props: ["gift", "money",'info'],

父传子例子=>parentCase

case.vue
<template>
<div><v-java></v-java><v-ui></v-ui><v-web></v-web>
</div>
</template>
<script>
import vJava from './java'
import vUi from './ui'
import vWeb from './web'
export default {
components:{vJava,vUi,vWeb},
data () {return {}
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
</style>

java.vue 
<template>
<div><h2>java讲师</h2>//这是循环添加的  key必须要绑定   由于card里面渲染的是具体的数据，所以传递过去对象即可<v-card v-for='item in arr' :key='item.id'  :teachers='item'></v-card><!-- <v-card></v-card> -->
</div>
</template>
<script>
import vCard from './card'
export default {
components:{vCard},
data () {return {arr:[{ id:1, img:'', name:'', job:''},{ id:2, img:'',name:'', job:''},{ id:3,img:'',name:'', job:''},]}
},
methods:{},
mounted(){}
}
</script>
<style scoped>
</style>

card.vueprops:['teachers']

2.子传父

子组件通过this.$emit触发方法

child.vue
<template>
<div>child<button @click="send">点击给父亲打钱</button>
</div>
</template>
<script>
export default {
components:{},
data () {return {money:'2万'}
},
methods:{send(){// $emit 用来触发子传父的方法的this.$emit('giveTo',this.money)}
},
mounted(){
}
}
</script>
<style scoped>
</style>

parent.vue
<template>
<div>parent这是儿子给的钱----{{myMoney}}//第六步<v-child @giveTo='own'></v-child> //第三步，giveto是子组件中的emit传过来的方法，再定义一个名字
</div>
</template>
<script>
import vChild from './child' //第一步
export default {
components:{//第二步vChild},
data () {return {myMoney:''//第四步}
},
methods:{own(e){//第五步 写具体操作console.log(e)this.myMoney = e}
},
mounted(){
}
}
</script>
<style scoped>
</style>

3.非父子:

1.首先创造关系     main.js->Vue.prototype.Event=new Vue()
总结：发送数据用$emit 需要触发条件        接收数据用$on
a.vue
<template>
<div>aaaaa<button @click="sendB">把数据发送给B</button>
</div>
</template>
<script>
export default {
components:{},
data () {return {msgA:'我是a的数据'}
},
methods:{sendB(){// 发送数据this.Event.$emit('sendB',this.msgA)}
},
mounted(){console.log(this.Event) //Vue 
}
}
</script>
<style scoped>
</style>

b.vue
<template>
<div>bbbbb----fromA{{fromA}}
</div>
</template>
<script>
export default {
components:{},
data () {return {fromA:''}
},
methods:{
},
mounted(){// 接收数据 $on()this.Event.$on('sendB',(e)=>{console.log(e)this.fromA = e})
}
}
</script>
<style scoped>
</style>

b->c数据
b.vue
<template>
<div>bbbbb----fromA{{fromA}}<button @click="sendC">发送给C</button>
</div>
</template>
<script>
export default {
components:{},
data () {return {fromA:''}
},
methods:{sendC(){this.Event.$emit('sendC',this.fromA)}
},
mounted(){// 接收数据 $on()this.Event.$on('sendB',(e)=>{console.log(e)this.fromA = e})
}
}
</script>
<style scoped>
</style>

c.vue
<template>
<div>cccccc -----{{fromA}}
</div>
</template>
<script>
export default {
components:{},
data () {return {fromA:''}
},
methods:{
},
mounted(){this.Event.$on('sendC',(e)=>{this.fromA = e})
}
}
</script>
<style scoped>
</style>

十七、is

1.解决标签的固定搭配问题

2.动态组件

<template>
<div><!-- is  1.解决标签的固定搭配  ul>li 2.动态组件--><ul><li is='vOne'>我是li的内容-------- <v-one></v-one></li></ul><hr><!-- one two  动态组件切换--><button @click="name='vOne'">one</button><button @click="name='vTwo'">two</button><div :is='name'></div>
</div>
</template>
<script>
import vOne from './one' 
import vTwo from './two' 
export default {
components:{vOne,vTwo},
data () {return {name:'vOne'}
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
</style>

十八、slot

1.无名插槽

在子组件中添加<slot></slot>
在slot.vue
<v-one>
<div>我就是插入到one组件中的内容1111</div>
<div>我就是插入到one组件中的内容22222</div>
</v-one>
在one.vue
<!-- 无名插槽 -->
<slot></slot>	
one
<slot></slot>

2.具名插槽

在slot.vue中<v-two><div slot="aa">白日依山尽</div><div slot="bb">黄河入海流</div><div slot="cc">欲穷千里目</div><div slot="dd">更上一层楼</div><p>我是新增加的</p></v-two>在two.vue中<div><slot name='aa'></slot><slot name='bb'></slot>two<slot name='cc'></slot><slot name='dd'></slot><slot></slot></div>

十九、ref(不建议使用)

1.ref 操作普通元素就是获取到的dom元素

2.ref 操作的组件获取的就是组件的数据和方法

3.使用ref 需要通过this.$refs来获取

在ref.vue中
<template>
<div><div class="box" ref='box'></div><v-one ref='one'></v-one>这是从one组件拿回来的数据{{myMsg}}
</div>
</template>
<script>
import vOne from './one'
export default {
components:{vOne},
data () {return {myMsg:''}
},
methods:{
},
mounted(){// 总结：1.对于普通元  ref ->$refs来获取元素，获取之后就是普通的dom元素.// console.log(this.$refs.box.offsetWidth)console.log(this.$refs.one.fn())console.log(this.$refs.one.msg)this.myMsg = this.$refs.one.msg
}
}
</script>
<style>
.box{width: 100px;height: 100px;background: red;
}
</style>

二十.jquery

1.npm install jquery --save

2.哪个页面需要直接导入即可

import $ from 'jquery'
mounted(){$('button').click(()=>{$('.box').width()})
}

3.全局导入

在main.js

import $ from 'jquery'
Vue.prototype.$ = $;
//此时这个$是vue实例中的一个属性，所以需要通过this调用
this.$('button').click(()=>{this.$('.box').width()
})

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

浏览器Performance面板性能监控详解
研背景介绍 1.1 What Chrome DevTools的Performance面板：可以记录和分析页面在运行时的所有活动。 1.2 Why 使用Performance面板解决应用性能瓶颈为应用的高性能开发提供参考指导价值 1.3 How 如何使用Performance面板查看网页性能对影响性能的指标进行具体分…...
2024/4/21 12:47:47
佛山割双眼皮医院领衔美来
...
2024/4/21 12:47:47
割双眼皮正规医院的多少钱
...
2024/4/28 0:40:51
哪家医院割双眼皮最好的整形医院
...
2024/4/21 12:47:44
angular项目本地安装依赖所遇到问题记录
一、问题描述新加入一个项目组，前端用的是比较重的angular框架搭建的项目，但是download项目过后一直安装依赖出问题，下面对解决过程做一个记录，供后来者参考。二、遇到的问题1 A.显示部分依赖没有安装上，此时千万…...
2024/4/21 12:47:43
electron 安装失败
electron 安装失败 throw new Error(Electron failed to install correctly, please delete node_mo… 删除node_modules包，安装使用cnpm下载 npm i cnpm -g cnpm i --save-dev electron另外发布版本时在Installing dependencies报错/卡住，多试几次就行…...
2024/4/26 2:48:11
一般开个双眼皮要多少钱
...
2024/4/20 16:14:33
我的第一个Angular2应用
1需要具备的基本前端基础：HTML、CSS、JavaScript。为了实现对项目包的管理，推荐使用npm NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题；官网先下载node.js并安装 2.clone快速新建Angular项目的仓库到本地…...
2024/4/19 21:49:54
Node.jsNPM的安装与配置
1 Node.js安装与配置 1.1 Windows平台下的Node.js安装在过去,Node.js一直不支持在Windows平台下原生编译,需要借助Cygwin或 MinGW来模拟POSIX系统,才能编译安装。幸运的是2011年6月微软开始与Joyent合作移植Node.js到Windows平台上 (www.infoq.com/cn/news/201…),这次合作的成…...
2024/4/20 16:14:31
Angular 开发前的注意事项
写在前面是Angular 不是angular.js！！！ 本文只是列举一些ng开发中的注意事项，有一些是自己遇到的坑，总结一下分享… 构建项目安装 npm install -g angular/cli创建项目 ng new name安装这一块官网上面写的很详细了…...
2024/4/21 7:15:51
全切双眼皮五年后再次眼皮吸脂
...
2024/4/21 12:47:41
埋线双眼皮不可以第二次
...
2024/4/23 3:08:18
哪里做双眼皮修复安全吗
...
2024/4/21 12:47:40
三点双眼皮术后图
...
2024/4/21 12:47:38
三点式双眼皮术后四天
...
2024/4/21 12:47:37
你们一般多久去做全切双眼皮修复了五次
...
2024/4/21 12:47:37
Vue + Element UI 实现权限管理系统前端篇（二）：Vue + Element 案例
导入项目打开 Visual Studio Code，File --> add Folder to Workspace，导入我们的项目。安装 Element 安装依赖 Element 是国内饿了么公司提供的一套开源前端框架，简洁优雅，提供了 vue、react、angular 等多个版本&#xff0c…...
2024/4/26 13:58:12
Angularjs,WebAPI 搭建一个简易权限管理系统 —— 系统业务与实现（三）
目录前言Angularjs名词与概念Angularjs 基本功能演示系统业务与实现WebAPI项目主体结构Angularjs 前端主体结构系统业务与实现（二） 上一章我们讲解的 Angularjs名词与概念，因为内容比较少，本章节包含两个部分，讲解一下…...
2024/4/21 12:47:34
Angular4 后台管理系统搭建（5） - 数据增删改一些总结
这两天完成了数据的增删改，用的是在表格上选择行，弹出一个模态窗口的方式。后台系统最关键的就是管理单据，做单据的增删改。在用angular4 完成以后，确实发现不少问题。 1、angular4 还不完善，许多细微的地方还控制不到…...
2024/4/21 12:47:34
定点埋线双眼皮多久恢复自然
...
2024/4/21 12:47:33

VUE01~05

VUE

vue介绍

一、官网 ：https://cn.vuejs.org/

二、指令

三、绑定样式

知识点: :key的作用; 绑定一个唯一值，避免勾选不正确的问题 与v-for的固定搭配

四、表单

1.单选框: 绑定的属性一定要与value的值保持一致，提交还是会提交value的值

2.多选框：

1）如果初始值为数组:会把value的值赋值给数组

2）如果初始值是对象，则会把数据类型转为布尔值，那么最终的结果就会以true/false展示

3.下拉框:把初始值需要绑定到select上,还是根据value的值对select进行赋值

4.文本域

PS:VUE单页应用

五、修饰符

1. 事件修饰符

2.鼠标修饰符

3.键盘修饰符

4.表单修饰符

六、vue生命周期

七.动画

1.基础使用

2.动画库的使用

八、watch

1.深浅监听

2.百度案例

1).跨域的解决 jsonp

2).通过监听用户输入，发送请求，渲染页面

九、过滤器

1.全局： Vue.fliter(‘过滤器名字’,回调函数) 回调函数中做的是业务逻辑

2.局部：在vue实例中通过filters配置项来配置 filters:{ 过滤器名称(){ 业务逻辑} }

案例:

1).电话号码过滤

2).过滤价格

3).过滤时间

十、计算属性

1.通过计算得出来的，所以就没有初始值

十一、购物车案例

1.先画静态页面 利用bs

2.实现点击添加，点击减少数量，点击删除功能

3.判断选中状态完成总价的计算

十二、组件

1.命名规则

1）.不能以标签起名，包含大写

2）.建议用驼峰起名

3）.首字母大写，后面直接写名字。如果后面有大写需要转换为驼峰

2.template模板

3.data使用

十三、组件嵌套

十四、后台管理页面实现

1.外层嵌套大盒子（container）

2.划分布局

3.书写组件

4.组件嵌套

5.添加样式

6.生命周期 --8个钩子函数 =>mounted 是最常用的

十五、脚手架

步骤：

全局安装webpack

查看版本

全局安装vue脚手架

查看版本

创建项目

进入项目

启动

注意： 安装cnpm方法 淘宝镜像

十六、组件通信

1.父传子：

1）.父传子：传递的是基础数据类型 给父组件中的子组件绑定属性，此时属性的值在父组件中已经定义，子组件需要通过props接收,要用数组接收 在子组件中直接渲染接收到的值即可

2）.父传子:子修改父组件传递的值报错,如果解决，把父组件传递过来的值变为自己的属性，直接修改自己属性即可。后果：父组件修改不会影响自己的数据

3）.父传子:父变，子变，子变，父变，需要在父组件中定义对象，传递给子组件的就是对象的方式，子组件正常接收即可

2.子传父

3.非父子:

十七、is

1.解决标签的固定搭配问题

2.动态组件

十八、slot

1.无名插槽

2.具名插槽

一、官网：https://cn.vuejs.org/

知识点: :key的作用; 绑定一个唯一值，避免勾选不正确的问题与v-for的固定搭配

1.先画静态页面利用bs

注意：安装cnpm方法淘宝镜像

1）.父传子：传递的是基础数据类型给父组件中的子组件绑定属性，此时属性的值在父组件中已经定义，子组件需要通过props接收,要用数组接收在子组件中直接渲染接收到的值即可

1.ref 操作普通元素就是获取到的dom元素

2.ref 操作的组件获取的就是组件的数据和方法