Vue.js

概要
- 简单了解
- Vue语法

1.简单认识

vue是一个渐进式框架？了解就好
- 意味着可以将vue作为应用的一部分嵌入其中
vue的特点
- 解耦视图和数据
- 前端路由
- 可复用组件
- 状态管理
- 虚拟DOM

2.Vue.js安装

直接CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

下载后引入
NPM安装（后面讲到）

3.初体验

    <div id="app">{{message}}
        <ul>
                <li v-for="item in movies">{{item}}</li>
        </ul>

    <h2>{{count}}</h2>
    <button type="button" @click="add">+</button>
    <button type="button"  @click="sub">-</button>
    </div>
//数据和视图分离
    <script src="../js/vue.js"></script>
        <script>
            //let(ES6定义变量)/const(常量)
            let app=new Vue({
                el:'#app',//用于挂载要管理的元素
                data:{//定义数据
                    message:'Hello Vue',
                    movies:['Hello','World','VUE']
                }，
                methods:{
                    add:function(){
                        console.log('add执行');
                        this.count++;
                    },
                    sub:function(){
                        console.log('sub执行');
                        this.count--;
                        
                    }
                }
            });
        </script>

4.MVVM的概念

5.Vue生命周期

beforeCreate:function(){
console.log('xxx');
},
mounted:function(){
console.log('xxxs');
}//这是一些生命周期的回调函数 大概意思就是在创建vue对象时，执行到某一步骤就会回调一个函数

6.语法

6.1 插值操作

6.1.1 Mustache {{}}

mustache语法中不仅可以直接协变量，还可以写简单的表达式，如：
```
{{firstname+' '+lastname}}
```

6.1.2 v-once

vue是响应式的，但有时候我们不想数据跟着变化，就用到v-once.
```
<h2 v-once>{{message}}</h2>
```

6.1.3 v-html

如果我们直接通过{{}}来输出，会将HTML代码也一起输出
```
<h2 v-html="url"></h2>
```

6.1.4 v-text

类似与{{}} ，但不同的是它不会先看到{{}}这个..但一般很少用..
```
<h2 v-text="url"></h2>
```

6.1.5 v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法

<p v-pre>{{message}}</p> //输出是{{message}}没有解析

6.1.6 v-cloak

防止闪烁..防止htlml先显示{{message}}之类的..
原理：写上个v-cloak属性，然后如果属性存在就display:none不显示，当vue解析完后就删除v-cloak这个属性

6.2 绑定属性

动态的绑定某一些属性的值，如a标签的href，img的src属性。

6.2.1 v-bind基本使用

简单使用:

    <div id="app">
            <a v-bind:href="ahref">百度</a>
    </div>      
    <script>    
        let app=new Vue({
            el:'#app',//用于挂载要管理的元素
            data:{//定义数据
                ahref:'http://www.baidu.com'
            }   
        });
    </script>
//简写 : <a :href="ahref">百度</a>

6.2.2 v-bind 对象语法

对象语法的含义是:class后面跟的是一个对象
用法一：直接通过{}绑定一个类

<h2 :class="{'active': isActive}">Hello World</h2>*

用法二：也可以通过判断，传入多个值

<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突

注：如果isActive和isLine都为true，那么会有title/active/line三个类
```
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
```
用法四：如果过于复杂，可以放在一个methods或者computed中,即调用一个方法，返回一个对象。

注：classes是一个计算属性后面才讲到
```
<h2 class="title" :class="classes">Hello World</h2>
```
简单例子：

        <div id="app" :class="{'red':isRed,'blod':isBlod}">  //<---看这里
            百度
        </div>
        <script>    
            let app=new Vue({
                el:'#app',
                data:{//定义数据
                    isRed:true,
                    isBlod:true
                }       
            });
        </script>

6.2.3 v-bind数组语法

注意：下面加单引号的是字符串不解析，如果不加单引号就是对应data里面的数据了。
用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

6.3 绑定样式

v-bind:style来绑定一些CSS内联样式。

6.3.1 对象语法

绑定方式一：对象语法
:style="{color: currentColor, fontSize: fontSize + 'px'}"
//style后面跟的是一个对象类型对象的
//key是CSS属性名称
//对象的value是具体赋的值，值可以来自于data中的属性

绑定方式二：数组语法  基本不用 
<div v-bind:style="[baseStyles, overridingStyles]"></div>
//style后面跟的是一个数组类型  baseStyles 是data的一个对象：以key:value..
//多个值以，分割即可

6.4 计算属性 computed

n但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示，用到计算属性。

6.4.1 基本使用：

    <div id="app">{{fullName}}</div> //不用加（）
        <script>    
            let app=new Vue({
                el:'#app',
                data:{
                    firstname:'Hello',
                    lastname:' Vue'
                },
                //计算属性
                computed:{
                    fullName:function(){//其实是个简写，详细看下面
                        return this.firstname+ " "+this.lastname;
                    }
                }
            });
        </script>

6.4.2 计算属性的setter、getter

//一般情况没有set方法，上面的是简写
computed:{
    fullName:{
        get:function(){
            return this.firstname+ " "+this.lastname;
        }
    }

使用set的情况：如果我在控制台修改：fuuName="xxx xxx"，默认会调用set方法。

6.4.3 计算属性的缓存

？ methods和computed 的区别

计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。（内容没修改的前提下）

6.5 事件监听

6.5.1 v-on基本使用

如点击事件：v-on:click=methodName“”

简写：@click

6.5.2 v-on参数

如果方法不需要传参数，@click="name",可以不加()
如果这样调用@click="name",但name的方法name(event)有参数，默认会传入事件对象
如果要同时传入参数和event,通过$event传入事件

6.5.3 v-on修饰符

阻止冒泡等等。

在某些情况下，我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

//停止冒泡
<button @click.stop="doThis"></button>
//阻止默认行为 如a的默认跳转或者表单的提交按钮等
<button @click.prevent></button>

<input @Keyup.13="onEnter"> //监听键盘抬起，.13修饰抬起哪一个键

6.6 条件判断

nv-if的原理：

pv-if后面的条件为false时，对应的元素以及其子元素不会渲染。

p也就是根本没有不会有对应的标签出现在DOM中。

6.6.1v-if v-else-if v-else

6.6.2 key 小问题

小问题：

如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。

但是按道理讲，我们应该切换到另外一个input元素中了。

在另一个input元素中，我们并没有输入内容。

为什么会出现这个问题呢？

问题解答：

这是因为Vue在进行DOM渲染时，出于性能考虑，（有个虚拟DOM）会尽可能的复用已经存在的元素，而不是重新创建新的元素。

在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。

解决方案：

如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key

并且我们需要保证key的不同加一个key属性：key="name"

6.6.3 v-show

v-if和v-show的区别
- v-if为false 元素没有在DOM上
- v-show为fase 时元素知识displat为none而已
用法
- v-show="Boolean值 "

6.7 循环遍历

6.7.1 基本使用

 格式：v-for="item in items"
 遍历数组的过程中获取下标值：v-for="(item,index) in items" //注意 index是后面的

 遍历对象：
 //返回的是对象属性的值
 <ul><li v-for="item in info">{{item}}</li></ul>
 //遍历对象的值和键
 <ul><li v-for="(value,key) in info">{{value}}--{{key}}</li></ul>
 //遍历对象值和键还有下标  下标一般很少用
  <ul><li v-for="(value,key,index) in info">{{value}}--{{key}}</li></ul>
 data:{
     info{
         name:'whis',
         age:18,
         height:1.77
     }
 }

6.7.2 v-for key的属性使用大致理解

视频的P37..

官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。

原因：看ppt..

7. ES6不完全学习

7.1 let/var

var没有块级作用域，会引起一些问题。比如这个：就需要闭包解决。

块级作用域：let是有块级作用域的

7.2 const使用

标志一个常量，const定义时要赋值，且之后不能修改。

如果指向对象的话，意思是指向的对象不能变，但那个对象的属性可以修改。

7.3对象字面量增强写法

//对象字面量写法 不是用 const obj=new Object（）
const obj={
    name:'dong'
}
//ES5写法
const name='dong';
const obj={
    name:name
}
//ES6写法 会把上面的name作为名称，值作为value 相当于name='dong'
const obf={
    name //属性的增强写法
}
//注意是冒号，习惯性写成=号...
//函数的增强写法 以前是run:function(){}
const obj={
    run(){
        
    }
}
//TypeScript 有了类型检测..

8.检查数组更新

vue是响应式的，当数据发生改变，Vue检测到data数据改变就会重新渲染dom。
但有些对数组的操作不一定式响应式的。

Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
push()//后面添加元素 可以添加多个  可变参数
pop()//删除最后元素
shift() //删除第一个
unshift()//最前面添加元素 可以添加多个

//可以删除、替换、增加
splice()//参数 start  
删除：arraynames.splice(1,3) //第二个参数删除个数
替换：arraynames.splice(1,3,'M','N','F')；//第二个参数替换个数，替换从1开始的后三个
插入：arraynames.splice(1,0,'M','N','F')；//插入元素..
sort()//排序
reverse()//倒转
//还有一种修改的方法
Vue.set(this.arraynames，0，’aa‘)；//是通过vue的内部实现的
注意：
这个：this.arraynames[0]='XXX'; //通过索引修改数组是没有响应式的。即数组内容改变了，但DOM不会刷新改变

Vue基础学习笔记01