# Vue项目开发管理

**Repository Path**: skycoin/vue

## Basic Information

- **Project Name**: Vue项目开发管理
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

[TOC]



# Vue认知实践



## 初识Vue

```
1.JavaScript框架
2.简化Dom操作
3.响应式数据驱动

vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统
```



## Vue语法

### 1.安装

```html
1.<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
```



### 2.第一个Vue程序

- 导入开发版本的Vue.js
- 创建Vue实例对象。设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上

```html
<div id="app">
  {{ message }}
</div>

<script>
    var app = new Vue({
        //挂载点
      el: '#app',
      
        // 数据对象
      data: {
        message: 'Hello Vue!'
      }
    })
</script>
```

```
Vue的作用元素：只能在el命中的内部

默认选择id选择器 也可以使用别的选择器（建议使用id，唯一）

支持双标签  但是不支持body   只能挂载普通的标签
```





### 3.v-text

- 设置标签的文本值

- 将会替换所有的内容，可定制行较差

```html
 <div id="app">
     <h1>hello {{msg}}</h1>
     <h1 v-text='msg'>hello</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'world'
        }
    })
</script>
```



### 4.v-html

- 设置标签的innerHTML 
- 内容中有html的结构将会被解析为标签

- 对于普通的文本显示和v-text(只会解析文本）一样   

```html
<div id="app">
    <h1 v-html='msg'></h1>
    <h1>{{msg}}</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'<h2>hello</h2>'
        }
    })
```





### 5.v-on

- 为元素绑定事件

- 事件名不许写on可以简写成 @
- 绑定的方法定义在methods中
- 方法内部通过this关键字可以访问定义在data中的数据

```html
<div id="app">
    <input type="button" value="事件绑定" v-on:click='doIt'>
    <input type="button" value="事件绑定" @dblclick='doIt'>
    <h1>{{msg}}</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'hello'
        },
        methods:{
            doIt(){
                this.msg = 'world'
                alert('hello world')
            }
        }
    })
</script>
```



### 6.v-show

- 根据表达值得真假，切换元素得显示和隐藏

```html
	<div id="app">
        <h1 v-show='isShow'>{{msg}}</h1>
        <button @click="change">点击更改</button>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                msg:'hello',
                isShow:false
            },
            methods:{
                change(){
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
```



### 7.v-if

- 根据表达式的真假，切换元素的显示和隐藏（操作dom元素)
- 表达式为true元素存在与dom树中
- 频繁的切换使用v-show(display=none),反之使用v-if

```html
<div id="app">
    <button @click='change'>点击切换</button>
    <p v-if="isShow">hello today</p>
    <P v-if="temperature>30">hot</P>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isShow:true,
            temperature:20
        },
        methods:{
            change(){
                this.isShow = !this.isShow;
                this.temperature++;
                console.log(this.temperature)

            }
        }

    })
</script>
```





### 8.v-bind

- 设置元素的属性

- ：属性名

```html
<div id="app">
    <img :src="imgSrc" :title="title" :class={active:isActive} @click="change">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            imgSrc:'./image/01.jpg',
            title:'这是我的gitee',
            isActive:false,
        },
        methods:{
            change(){
                this.isActive = !this.isActive
            }
        }
    })
</script>
```





### 9.v-for

- 根据数据生成列表结构
- 数组长度的更新会同步到页面上，是响应式的

```html
<div id="app">
    <input type="button" value="添加数据" @click="add">
    <input type="button" value="移除数据" @click="remove">
    <ul>
        <li v-for="(city,index) in cityArray">
            {{index}} - {{ city }}
        </li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            cityArray:[
                "杭州",'南京','上海','广东'
            ]
        },
        methods:{
            add(){
                this.cityArray.push("北京");
            },
            remove(){
                this.cityArray.shift();
            }
        }
    })
</script>
```



### 10.v-on补充

- 传递自定义的参数，事件修饰符

```html
 <div id="app">
     <input type="text" @keyup.enter="sayHi">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        methods:{
            sayHi(){
                alert('hello');
            }
        }
    })
</script>
```





### 11.v-model

- 获取和设置表单元素的值（双向绑定）

```html
 <div id="app">
        <input v-model='message'>
        {{ message }}
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'hello wrold'
            }
        })
    </script>
```



### 12.过渡动画(transition)

动画效果：边向右边移动边隐藏

自动追加样式的类名

改变transition中的name  也要改变fade-enter-active要一致

name是什么名称无所谓，重要的是要与样式类名之前名称相同，里面的动画是自己进行设计

目的：可以设计侧边栏，或者菜单栏的样式

```html
 <style>
        .content{
            width: 200px;
            height:200px;
            border:2px solid gold;
            background-color: blue;
        }

        .fade-enter,.fade-leave-active{
            transition:opacity 5s;
        }
     	// to:离开到什么位置
        .fade-enter,.fade-leave-to{
            transform:translateX(500px);
            opacity: 0;
        }
    </style>
    
    <button @click="change">切换</button>
    <transition name='fade'>
    	<div v-if="isShow" class="content .fade-enter-active"></div>
    </transition>
    
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow:true,
                msg:'hello world'
            },
            methods:{
                change(){
                    this.isShow = !this.isShow;
                }
            }

        })
    </script>
```



```
v-enter:定义过渡的开始状态，在元素插入之前生效，在元素被插入的下一帧结束
v-enter-active:定义进入过渡生效时的状态。在整个过渡的阶段中应用，在元素被插入之前生效
v-enter-to:定义进入过渡的结束状态
v-leave:定义离开过渡开始的状态
v-leave-to：定义离开过程生效时的状态
v-leave-to:定义离开过渡的结束状态
```

可以引入animate css中动画

```html
  //引入animate.css文件  弹跳进来，弹跳出去
  <transition name='fade' enter-active-class="animated bounceInLeft" leave-active-class='animated nounceOutRight'>
    	<div v-if="isShow" class="content .fade-enter-active"></div>
  </transition>
```



### 13.计算属性

目的是为了提高性能,不需要在去反复计算的了，较少内存的消耗

```html
<div id="app">
    <h1>{{ fistname + lastname }}</h1>
    <h1>{{fullname}}</h1>
    <h1>{{words.split('').reverse().join("")}}</h1>
    <h1>{{reversed}}</h1>
</div>

<script>
      var app = new Vue({
          el:'#app',
          data:{
              fistname:'张',
              lastname:'三'，
              
          },
          computed:{
              fullname:function(){
                  //会将计算的结果进行缓存
                  //只要data中的内容不改变就不会重新计算
                  return this.fistname + this.lastname
              },
                reversed(){
                    return this.words.split("").reverse().join("")
               }
          }
      })
  </script>
```





### 14.监听事件（watch)

更新数据之后触发

用来监听数据的对象

尽量少用watch

```html
   <script>
        var app = new Vue({
            el:'#app',
            data:{
                msg:'hello'
            },
            watch:{
                msg:function(val){
                    console.log('监听事件')
                    console.log(val)
                }
            }
        })
    </script>
```



### 15.Component(组件)

全局组件：所有实例都可以进行使用

目的：提高代码的复用性

```html
<div id="app">
	<run></run>
</div>

<script>
 Vue.component('run',{
 	template:'<h1>自定义的组件</h1>'
 })
var app = new Vue({
    el:'#app',
})

</script>


#挂载一个列表   通过bind传递数据

 <div id="app">
	<run v-for="post in post" :post="post"></run>
</div>

<script>
 Vue.component('run',{
     props:['post'],
 	template:'<h1>自定义的组件</h1><span>{{post.id}}-{{post.title}}</span>'
 })
var app = new Vue({
    el:'#app',
    data:{
        posts:[
        {id:1,title:'hello'},
        {id:2,title:'world'}
        ]}
})

</script>   
```



### 16.Prop

通过Prop向子组件中传递数据

还可以通过v-bind来动态的传递prop

```html
  <ul>
  <li
  is="todo-item"
  v-for="(todo, index) in todos"
  v-bind:key="todo.id"
  v-bind:title="todo.title"
  v-on:remove="todos.splice(index, 1)"
  ></li>
      
 Vue.component('todo-item',{
      template: '\
      <li>\
          {{ title }}\
          <button v-on:click="$emit(\'remove\')">移除</button>\
      </li>\
      ',
      props: ['title']
 })
```



### 17.$emit(自定义事件)

父组件使用props传递数据给子组件，子组件传递数据给父组件就需要自定义事件

$on(eventName):监听事件

$emit(eventName):触发事件

```

```



### 18.Vue.directive(自定义指令)

```html

 <div id="app">
     <h1>{{msg}}</h1>
     <input type="text" v-focus>
 </div>
    
Vue.directive('focus',{
    inserted(el){
    	el.focus();
    }
})
```





### 19.过滤器

作用：格式化数据，将字符串格式化为首字母大写，将日期格式化为指定的格式

```html
Vue.filter('过滤器的名称',function(value){
	//过滤器的业务逻辑
})

<div>{{ msg | upper}}
    
filters:{
    //局部的过滤器属性
    }
```

带参数的过滤器

```
Vue.filter('format',function(val,arg){
	//val就是过滤器传入进来的参数
})

<div>{{data | format('yyyy-MM-dd')}}</div>
```



### 20.Vue.set

响应式的去修改数组

```html
//vm是实例对象
vm.list[1] = 'apple'  //只会改变数据，但是不会影响到数组
Vue.set(vm.list,1,'apple')
vm.$set(vm.list,1,'apple')
```



### 21.@click.prevent

阻止a标签的默认行为，跳转有闪动的效果

```html
<a href="" @click.prevent>修改</a>
```





## 需要JS中常用的方法

#### 1.some

some()方法用于检测数组中的元素是否满足指定的条件

some()方法会依次执行数组的每个元素

```html
this.bookList.some((item) => {
    if(item.id == this.id){
    	item.book = this.book
    }
})
```



## 基础事例

### 1.删除功能

- 删除思想：确定位置，然后进行删除

```html
<button class="destory" @click="remove(index)"></button>

remove(){
	this.list.splice(index,1)
}
```





### 2.网络应用(Vue结合网络数据开发应用)

#### axios：网络请求库

- 先导包
- then方法中的回调函数会在请求成功或失败时触发
- 通过回调函数的形参可以获取响应内容，或错误信息

```html
//使用cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
```

用法

```html
axios.get(地址?查询字符串(key=value)).then(function(response){},function(err){})
axios.post(地址?对象({key:value})).then(function(response){},function(err){})
```

提示：自定义的参数可以让代码的复用性更加的高，methods中定义的内部，可以通过this关键字点出其他的方法



### 

### 3.实现简单版的网易云

- 歌曲搜索
- 歌曲播放
- 歌曲封面
- 歌曲评论
- 播放动画
- mv播放

```
v-on Keyup.enter
axios  v-model

```