vue第一周学习笔记

## Day01 vue安装以及指令的使用

### 前端发展：

app：比如美团------ 官网:要求美观------- 后台管理系统：主要做数据的增删改查 ------ 小程序:

### vue介绍：

1.vue特点：易用，灵活，高效

2.渐进式：根据需求的不同加载不同模块

3.vue核心：数据驱动，组件化

### vue引入：

```vue

```

### 1、指令：

#### v-text/v-html-----v-html识别标签，v-text不识别标签

#### v-if,v-show----v-if: 直接移除元素 , v-show:通过display：none老设置元素 , 应用场景：如果频繁切换元素需要用v-show

#### v-else-if v-else：注意：v-if v-else 中间不允许有内容

#### v-bind ----- 绑定属性美[baɪnd]

```vue

<a v-bind:href="url" v-bind:name='aa'>点击跳转到百度</a>

<div :abc='abc'>我是div</div>

</div>

```

#### v-on 绑定方法

```vue

<button v-on:click='fn'>点击弹出内容</button>

<button @click='fn'>点击弹出内容</button>

</div>

// v-on：注意：方法名后面的小括号如果没有参数的情况下可以省略

```

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

```vue

<div >{{content}}</div>

// 数据模型model M（model）V（view） VM(viewModel)

```

插值表达式：可以直接放方法，可以直接用三元，可以直接写运算

#### v-for：

```vue

<div v-for='(item,index) in arr'>{{item}}------{{index}}</div>

<hr>

<p v-for='(item,key,index) in obj'>{{item}}----{{key}}----{{index}} </p>

</div>

new Vue({

el: '#app', //element 元素，

data: {

arr:['苹果','香蕉','橘子'],

obj:{name:'张三',age:20}

methods: {

})

```

class的使用：

```vue

<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>

</div>

new Vue({

el: '#app', //element 元素，

data: {

box:'box',

div3:'div3'

methods: {

})

```

## Day02 表单以及修饰符，生命周期，动画

#### 1、表单的操作：单选框，多选框，下拉框，文本域

#### 单选框:

```vue

<div>

性别: <input type="radio" name="sex" value="0" v-model='sex'>男

<input type="radio" name="sex" value="1" v-model='sex'>女

</div>

```

#### **多选框：**

```vue

<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'>敲代码

</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

</div>

```

#### 下拉框:

```vue

<div>

</select>

</div>

```

#### 文本域:

```vue

文本域:

<div>

</div>

```

#### 2、修饰符

* ##### 事件修饰符

stop :阻止事件冒泡

prevent:阻止默认行为

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

once:只执行一次

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

- ##### 鼠标修饰符

left:左键触发

right:右键触发

middle:中间滚轮

注意：对于修饰符自多只能写两个

- ##### 键盘修饰符

up,down,left,right,enter

- ##### 表单修饰符

lazy:失去焦点后获取最新数据

number:只判断第一个值是否是number类型是number返回number 不是返回string

trim:去除用户输入内容的首尾空格

#### 3.vue生命周期

```vue

钩子函数：8个

beforeCreate : el data name 都是undefined

created：el ：undefined data：可以拿到数据

beforeMount：el：有节点了，data：有数据此时el中的数据没有渲染

mounted:页面渲染完成

beforeUpdate:更新数据

updated：更新完成注意：更新前后数据是一致的

beforeDestory：销毁之前

destory:销毁完成

```

#### 4.动画

```vue

第一步：给需要添加动画的元素用<transition>包裹起来

第二步：设置6个样式

.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;

}

```

#### 5、动画库的使用

~~~vue

引入animate.css这个库

地址;https://animate.style/

```

<transition enter-active-class='animate__animated animate__rubberBand'

leave-active-class="animate__animated animate__bounceOutUp">

</transition>

~~~

## Day03 监听,过滤器，计算属性

#### 1、监听

```vue

watch:{

//浅监听

msg(newVal,oldVal){

console.log(newVal,oldVal)

//深监听

json:{

//这个名字不能更改

handler(a){

console.log(a)

//主要通过deep属性

deep:true

注意：不建议使用深监听，通常转换为浅监听方式

}

// 注意:1.深监听只能获取到最新的数据，这种方式不推荐使用,如果需要使用，需要转为浅监听方式

// 2.需要监听的方法名一定要与data中声明的属性名保持一致

```

#### 2、百度案例

a.跨域的解决 jsonp

```vue

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

<style>

.select{

background-color: red;

}

</style>

</head>

<body>

<ul>

</ul>

</div>

</body>

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(){

// 发送数据请求 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>

```

#### 3、过滤器

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

* 价格过滤全局局部的区别

```vue

<body>

</div>

</div>

</body>

Vue.filter('filterPrice', (a) => {

return a.toFixed(2)

})//全局

let vm = new Vue({

el: '#app',

data: {

price: 29.9,

tel: '13737375137'

methods: {

filters: {//局部

filterTel(tel) {

return tel.slice(0, 3) + '****' + tel.slice(7)

}

})

let a = new Vue({

el: '#box',

data: {

price: 36.999,

tel: '13737375137'

methods: {

})

```

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

- 案例：

```vue

1.电话号码过滤

</div>

Vue.filter('filterTel',(tel)=>{

return tel.slice(0,3)+'****'+tel.slice(7)

})

2.过滤价格

</div>

Vue.filter('filterPrice',(price)=>{

return price.toFixed(2)

})

3.过滤时间

<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}`

})

let vm = new Vue({

el: '#app',

data: {

time:1606285864036

methods: {

})

console.log(123+'')//字符串

console.log(123);//数字

```

#### 4.计算属性 computed

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

// computed:应用场景:购物车的总价特点：多个数据影响一个数据

// watch:应用场景特点:一个数据影响多个数据

// copmuted: 方法是不需要调用的，直接在页面使用即可

// methods: 必须要调用的

## Day04 组件及脚手架

#### 1、组件

- #### 特点：一组可复用的vue实例 // 用法：全局定义,局部定义

- #### 全局：

```vue

Vue.component('组件名',模板对象)

Vue.component('vOne',{

// template:要往页面上渲染的模板

template:'<div>我是第一个组件</div>'

})

```

- #### 局部：

```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>我是第二个模板对象

</div>`

}

})

// 特点：template 有且只能有一个根元素通常是div

```

- #### 组件化和模块化的区别？

组件化：组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程，有多种属性、状态反映其内部特性

- #### 特点：一个有html+css+js的页面

模块化：侧重的功能的封装，主要是针对Javascript代码，隔离、组织复制的javascript代码，将它封装成一个个具有特定功能的的模块。

- #### 组件名：命名规则

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

2.建议用驼峰起名

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

- #### 组件嵌套：

```vue

<body>

<v-one></v-one>

</div>

<div>

<h2>我是模板一</h2>

</div>

</template>

<div>

<h2>我是模板二</h2>

</div>

</template>

</body>

// 组件：一个可复用的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:'张三'

}

})

// 总结：组件中关系：只有父子和非父子关系

// 嵌套:子组件只能在父组件中使用

// 组件中的data ：定义为方法，data(){} 必须有返回值，return{} 同时返回值的类型为对象

// data 中的数据只能供自己使用如果其他组件需要使用需要传值比如： data,methods,filter,cmpputed,watch...

</script>

```

- #### data:

```vue

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定义为函数的原因:由于需要共享数据，但是又要互不干扰，所以定义为函数。

</script>

```

- #### 生命周期：

8个钩子函数 mounted 是最常用的

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

v-show 不会引起

```vue

<v-one v-if='isShow'></v-one>

```

- ```vue

let vm = new Vue({

el: '#app',

data: {

msg:'hello'

methods: {

hi(){

console.log('我是hi方法')

return 1

}

beforeCreate() {

console.log('创建之前')

console.log('el',this.$el),

console.log('data',this.$data),

console.log('methods',this.$methods),

console.log('msg:',this.msg)

this.hi() //报错

created() {},

beforeMount() {},

mounted() {},

```

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

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

#### 2、脚手架：

```vue

步骤：

//全局安装webpack

npm i webpack -g

//查看版本

webpack -v

//全局安装vue脚手架 2.x

npm i vue-cli -g

//查看版本

vue -V

以上操作(一个电脑)只需要操作一次

//创建项目

vue init webpack mydemo

//进入项目

cd demo

cnpm i

//启动

npm run dev //localhost:8080

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

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

```

- 总结 ---后台项目

```vue

1.划分组件

App.vue->container 整个容器

header,footer，main，left，right 都是单独的组件需要用谁直接 import导入就行

//点击弹框

局部定义弹框首先要有弹框组件 alertbtn.vue 哪用在哪里引入

//全局引入弹框需要在main.js中定义

// 引入弹框的组件

import vAlert from './components/aletrBtn.vue'

Vue.component('vAlert',vAlert)

在其他页面只需要调用组件名即可（v-alert）Day05 组件通信，传值，父传子，子传父，非父子， is,jq,slot,ref,

```

### Day05 组件通信传值父传子子传父 is,jq,slot,ref

#### 1、组件通信：

##### a:父传子

~~~vue

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

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

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

```

parent.vue 父组件

<div>

parent

<div>这是给儿子的礼物----{{ msg }}</div>

<v-child :gift="msg" :money="money" :info='info'></v-child>

</div>

</template>

import vChild from "./child";

export default {

components: {

vChild,

data() {

return {

msg: "大奔",

money: 2000,

info:{

name:'张三'

};

methods: {},

mounted() {},

};

</script>

<style>

</style>

```

```js

child.vue 子组件

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

~~~

##### a1:父传子案例

~~~vue

parentCase(父传子案例)

```vue

case.vue

<div>

<v-java></v-java>

<v-ui></v-ui>

<v-web></v-web>

</div>

</template>

import vJava from './java'

import vUi from './ui'

import vWeb from './web'

export default {

components:{

vJava,

vUi,

vWeb

data () {

return {

}

methods:{

mounted(){

}

</script>

</style>

```

```vue

java.vue

<div>

<h2>java讲师</h2>

//这是循环添加的 key必须要绑定由于card里面渲染的是具体的数据，所以传递过去对象即可

<v-card v-for='item in arr' :key='item.id' :teachers='item'></v-card>

</div>

</template>

import vCard from './card'

export default {

components:{

vCard

data () {

return {

arr:[

{

id:1,

img:'http://www.ujiuye.com/uploadfile/2019/0109/20190109071725808.jpg',

name:'李老师',

job:'院长'

{

id:2,

img:'http://www.ujiuye.com/uploadfile/2019/0423/20190423094745162.jpg',

name:'张老师',

job:'副院长'

{

id:3,

img:'http://www.ujiuye.com/uploadfile/2019/0423/20190423105110779.jpg',

name:'伍老师',

job:'高级讲师'

]

}

methods:{

mounted(){

}

</script>

</style>

```

```js

card.vue

props:['teachers']

```

~~~

##### b.子传父：子组件通过this.$emit触发方法

~~~vue

child.vue

<div>

child

<button @click="send">点击给父亲打钱</button>

</div>

</template>

export default {

components:{

data () {

return {

money:'2万'

}

methods:{

send(){

// $emit 用来触发子传父的方法的

this.$emit('giveTo',this.money)

}

mounted(){

}

</script>

</style>

```

```js

parent.vue

<div>

parent

这是儿子给的钱----{{myMoney}}

<v-child @giveTo='own'></v-child>

</div>

</template>

import vChild from './child'

export default {

components:{

vChild

data () {

return {

myMoney:''

}

methods:{

own(e){

console.log(e)

this.myMoney = e

}

mounted(){

}

</script>

</style>

~~~

##### c:非父子

~~~vue

1.首先创造关系 main.js->Vue.prototype.Event=new Vue()

总结：发送数据用$emit 需要触发条件接收数据用$on

a.vue

<div>

aaaaa

<button @click="sendB">把数据发送给B</button>

</div>

</template>

export default {

components:{

data () {

return {

msgA:'我是a的数据'

}

methods:{

sendB(){

// 发送数据

this.Event.$emit('sendB',this.msgA)

}

mounted(){

console.log(this.Event) //Vue

}

</script>

</style>

```

```vue

b.vue

<div>

bbbbb----fromA{{fromA}}

</div>

</template>

export default {

components:{

data () {

return {

fromA:''

}

methods:{

mounted(){

// 接收数据 $on()

this.Event.$on('sendB',(e)=>{

console.log(e)

this.fromA = e

})

}

</script>

</style>

```

```vue

b->c数据

b.vue

<div>

bbbbb----fromA{{fromA}}

</div>

</template>

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>

```

```vue

c.vue

<div>

cccccc -----{{fromA}}

</div>

</template>

export default {

components:{

data () {

return {

fromA:''

}

methods:{

mounted(){

this.Event.$on('sendC',(e)=>{

this.fromA = e

})

}

</script>

</style>

~~~

##### d:is

```vue

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

2.动态组件

<div>

<!-- is 1.解决标签的固定搭配 ul>li

2.动态组件

-->

<ul>

<li is='vOne'>我是li的内容-------- <v-one></v-one></li>

</ul>

<hr>

</div>

</template>

import vOne from './one'

import vTwo from './two'

export default {

components:{

vOne,

vTwo

data () {

return {

name:'vOne'

}

methods:{

mounted(){

}

</script>

</style>

```

##### E:slot

~~~vue

1.无名插槽

在子组件中添加<slot></slot>

在slot.vue

<v-one>

<div>我就是插入到one组件中的内容1111</div>

<div>我就是插入到one组件中的内容22222</div>

</v-one>

在one.vue

one

```

```js

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>

two

</div>

~~~

##### F:ref(不建议使用)

```vue

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

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

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

在ref.vue中

<div>

<v-one ref='one'></v-one>

这是从one组件拿回来的数据{{myMsg}}

</div>

</template>

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>

```

##### G:jquery

```vue

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()

})

```

posted @ 2020-11-29 20:45 LBJJJ 阅读(91) 评论(0) 收藏举报

刷新页面返回顶部

LBJJJ

vue第一周学习笔记

公告