学习日志

一、什么是vue?

    Vue是第三方开发的、渐进式的、基于MVVM设计模式的、纯前端的JS框架

    第三方：别人写好的，我们直接下载即可

    渐进式：可以逐步在项目中引入Vue的各项功能，同时，可以与其他技术混用，但是，不推荐（es5：只要不是使用框架，一律使用es5，不能出现es6；es6：我们使用框架的时候，就可以使用es6）  

MVVM设计模式：

1. 传统前端三大部分：html/css/javascript

   问题：html和css的功能都太弱了，对于页面发生的一切变化都需要JavaScript来编写，导致需要JavaScript编写大量重复的增删改查操作

2. 现代前端三大部分：(MVVM)

界面(View)：

    视图，指网页中的元素和样式，一般指的就是html和css。view是.html网页中的一个需要动态加载内容的父元素，比如:"div#app"。html中的视图，也被称为模板template，如果发生template错误，那么就在html中查找就可以了

数据模型(Model):

    集中保存界面中所需要的所有变量和变量值。模型，指程序中创建的或者从远程获取的数据，一般使用js中的一个对象data来保存，内容就会直接显示到view中

控制器(ViewModel):

    视图模型/控制，用于替代之前DOM/jQuery操作，封装了重复的增删改查操作，把模型中的数据和视图中的html元素“绑定”到一起。Vue类型提供的就是一种强大的ViewModel对象，可以自动同步数据和页面元素。专门负责自动将模型中的变量值自动同步到界面中所需要的位置，实现实时同步。

ViewModel核心原理：（响应系统/虚拟DOM树）

纯前端：

   不需要任何后端技术，就能够独立运行

框架：

    包含核心功能的半成品代码，开发人员只需要根据业务的需求，添加定制自己个性化的一部分内容即可

（构造+原型）

案例：第一个vue程序

<!-- 第一步、编写页面 -->
        <!-- 界面中所有的元素都必须放在唯一的父元素内，父元素必须要有id名，便于查找 -->
        <div id="app">
            <!-- 将输入的内容的保存到变量中，使用{{变量名}}来进行占位 -->
            <h2>{{showMessage}}</h2>
            <!-- 为button按钮绑定点击事件，向控制台输出一段话 -->
            <button type="button" @click="show">输出</button>
        </div>

        <script src="../js/vue.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            //第二步：在js中定义数据对象
            //所有的界面所需要的变量都定义在data对象中，
            //var data={变量名1:变量值1,变量名2:变量值2,...变量名n:变量值n}
            var data={
                showMessage:"hello vue!"
            }
            //第三步：在js 中创建vue对象，将界面和数据绑定起来
            //创建vue类型的ViewModel对象
            var vm=new Vue({
                //el:id选择器，查找页面中需要监控的父元素，并且进行绑定；后面可以跟上任意选择器，但是一个viewModel对象只能绑定一个dom元素，即使“选择器”可以找到多个元素，也只能绑定一个一个符合条件的dom元素。所以一般用id选择器。
                el:"#app",
                //data:存在界面所需要的变量，让new vue同时监控data数据
                data,
                //methods:所有界面所需要的事件处理函数都有放在一个名为methods的对象属性中。
                methods:{
                    //定义一个函数show
                    show(){
                        console.log("hello vue!")
                    }
                }
            })
        </script>

二、对比原生DOM、jQuery、Vue框架

1. 原生DOM：

   使用原生DOM，必须是一步一步的来，而且每一步都不能少，步骤上非常繁杂，原生的DOM兼容性好

问题：jQuery中有多少种查找方法？（查找id的元素，查找class的元素，查找name的元素）

（两个点：1.是否考虑IE；2.是否有自己的框架）

1. jQuery：

   jQuery其实是对DOM的每一步都进行了简化，但是，并没有从根本上改变程序的流程

2. Vue：

   优点：已经包含核心功能，而且封装了很多重复的功能，编写时我们就不必要再编写重复的功能，比如：增删改查，算是在开发中彻底简化的了开发的步骤
   缺点：不兼容旧浏览器，同时开发人员需要彻底的改变编程习惯和思维
   
   DOM树重绘问题：重复性高，效率低
   

三、什么时候使用Vue？为什么使用Vue？

      1.Vue适用于以数据操作为主的项目(web/app)

      2.我们使用vue框架可以提高项目的开发效率

四、如何在项目中使用Vue

1. ###### 下载vue.js，并通过script引入（学习阶段使用）

1. ###### 通过Vue-Cli脚手架工具（开发项目，使用的都是脚手架工具）

五、Vue下载安装

1. ###### Vue中文官网

https://cn.vuejs.org/

1. 下载Vue.js

   提示：下载独立的vue.js文件：打开官网，点击页面中的起步按钮，之后再在页面左侧选择安装，在安装下选择要下载的vue.js版本
   

   开发版：未经压缩的，拥有完备的注释和错误提示的版本，可读性高

   生产版：已经压缩过的，而且去掉了错误提示，可读性差

2. 在网页中引入vue.js

<script src="./js/vue.js"></script>

六、编写vue程序的步骤：

第一步：编写页面

第二步：在JS中定义数据对象

第三步：在JS中创建vue对象，将界面和数据绑定起来

el：

id选择器，查找页面中需要监控的父元素，并进行绑定。el: 后可以跟任意选择器，但是一个viewModel对象只能绑定一个DOM元素，即使“选择器”可以找到多个元素，也只能绑定第一个符合条件的DOM元素身上。所有，el中我们一般用id选择器就ok了

data：

存放界面所需要的变量，让new Vue同时监控data中变量的一个变化

methods:

所有界面所需的事件处理函数都要放在一个名为methods的对象属性中

提示：绑定以后，只要程序的变量值发生变化，页面上就会自动更新

问题：new Vue()的绑定原理

   new Vue() 其实就是创建一个ViewModel对象，自动的绑定界面和数据，new Vue会自动将data中的初始值，替换到界面中所有{{变量}}的位置，只要data中的变量值发生改变，new Vue就会自动将新的变量值，更新到页面中{{变量}}的位置

new Vue()中包含两大子系统（响应系统、虚拟DOM树）

①响应系统：

    new Vue()刚创建的时候，需要先引入data对象，并自动为data中每个变量添加访问器属性保护起来，所有访问器属性都直接隶属于new Vue对象。如果想要修改data中的变量，可以通过"this.变量名"的方式进行访问。但是，其实都是访问的变量的set访问器，而且，new Vue()在每个set访问器中都添加了通知机制，只要修改变量，就会自动调用访问器，只要调用了访问器，就会触发通知。

②虚拟DOM树：

    new Vue()通过扫描真是的DOM树，形成一个简化版的DOM树模型，仅包含可能变化的属性，那些固定不变的变量和属性，一点都不包含。因为真实的DOM树太大了，包含很多无关的元素和属性，不便于快速的查找，所以我们需要使用虚拟DOM树

虚拟DOM树优点：

1. 小，遍历极快。而且只修改变化的元素，影响的范围小。

2. 封装了重复的增删改查操作，极大的减少了代码量。

3. 效率高，仅修改个人可能受影响的元素和可能受响应的属性。多数无关的元素和属性，不受影响。

七、vue语法

1、绑定语法

绑定语法就是专门为html 添加变量，html本身不支持变量，但是html中的个别内容有需要根据程序中的变量自动变化，当html中的任何一个位置的内容，需要根据程序中的变量值自动变化的时候，就要绑定语法。

语法：{{变量/js表达式}}

双花括号语法，也叫做大胡子语法，官方名字：MUstache，补缺、插值的意思。

大胡子语法：用于特定的Model数据绑定到视图中，当Model数据发生了改变，所有用到显示数的{{}}，里面的数据都会自动更新。首次加载的时候，new Vue()会自动找到{{}}，用程序中的变量值，替换{{变量}},当程序中的变量被修改的时候，再次扫描虚拟DOM树，找到这里，用新值自动替换

{{}}的用法：

1. ###### Model变量名

{{showMessage}}

data:{

showMessage:"Hello World"

}

1. ###### 算数/比较/逻辑/三目运算(过滤器代替)

算数：{{10+20}}

比较：{{10>20}}

逻辑：{{true&&false}}

三目运算：{{sex==0?"女":"男"}}

data:{

sex:0

}

1. ###### 方法的调用(计算属性代替)

{{getString()}}

methods:{
getString(){return "xxxx"}

}

1. ###### 对象属性的访问

{{obj.name}}

data:{

obj:{

  name:"xxx",

  price:"￥300"

}

}

1. ###### 数组下标访问

{{arr[1]}}

data:{

arr:[1,2,3,4,5]

}

1. ###### 字符串的拼接

{{模板字符串}}

{{${str} World}}

data:{

str:"Hello"

}

1. ###### 创建对象

{{new Date().toLocaleString()}}

注意：{{}}内只要有返回值，合法的js变量和表达式都行，但是{{}}内部能出现逻辑结构if或for以及没有返回值的js表达式

{{}}的问题：不能使用动态绑定属性

2、指令

什么是指令？

    Directive，指令就是为添加新功能的自定义属性，因为本身是静态的，不具有任何的动态生成能力，所以当我们想要在中使用程序的一些特征的时候，例如：“分支”，“循环”等，就需要指令

（1）v-bind：在vue中，元素的属性不能使用{{}}进行绑定，必须使用“v-bind：”或“：”来绑定

注：“：”是"v-bind:"的缩写

普通绑定：

<any v-bind:属性="变量或js表达式">

动态绑定：

<any v-bind:[attr]="变量或js表达式">

(2)控制元素的显示/隐藏

 1.控制一个元素的显示/隐藏

   v-show:

<any v-show="条件表达式">

提示：如果成立，则显示，如果不成立隐藏

原理：使用css中的display来控制元素 的显示/隐藏

  2.两个元素，二选一显示

v-if

v-else

<any v-if="判断条件">
<any v-else>

   提示：v-if会自动判断条件，如果条件成立，则显示第一个元素，v-else的元素不再显示，否则隐藏第一个元素，显示第二个元素

(3)多个元素，多选一显示

v-if

v-else-if

...

v-else

<any v-if="判断条件1">
<any v-else="判断条件2">
...
<any v-else="判断条件n">

  提示：如果v-if的条件成立，就显示v-if的元素，之后的元素不再显示，如果v-if的条件不成立，则按顺序判断每个v-else-if的条件，哪个成立就选哪个，其他元素不再显示。如果所有的条件都不满足，就显示v-else  

   原理：v-if,v-else-if,v-else  不是用display:none进行隐藏/显示的，而是彻底的删除不显示的元素，元素必须是紧邻的兄弟元素，中间不能阻隔任何其他的元素。

反复生成多个相同结构的元素

v-for：会自动遍历数组/对象/字符串中的每个元素， 每遍历一个元素，就会自动创建元素对象

<any v-for="(elem,i) of 数组/对象/字符串" :key="i">

elem:变量名

i:下标

:key 是在内存中为每个html元素副本添加一个唯一标识。 如果每个html元素副本都有唯一的标识，则每次修改数组元素的时候，v-for只需要找到受影响的那一个html元素副本，修改即可。其余不受影响的html元素副本保持不变--效率高

面试题：v-for为什么一定要加key？

案例：

<div id="app">
        <div>
            <input type="text"  @keyup.enter="add" v-model="name"/>
            <button @click="add">添加</button>
        </div>
        <ul>
            <li v-for="(item,i) in list" :key="item.id">
                <input type="checkbox"/>{{item.name}}
            </li>
        </ul>
    </div>

<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
        var vm=new Vue({
            el:'#app',
            data:{
                name:'',
                newId:3,
                list:[{
                    id:1,
                    name:'张三'
                },{
                    id:2,
                    name:'李四'
                },{
                    id:3,
                    name:'王五'
                }]
            },
            methods:{
                add(){
                    this.list.unshift({
                        id:++this.newId,
                        name:this.name
                    })
                    this.name=''
                }
            }
        })
    </script>

​ 答：这个代码就能很好的解释， 加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果。如果不加key就不具有唯一性。

注意：

1、v-for 一定写在重复生成的元素上，而不是写在父元素上

2、如果我们不关心下标，只关心元素，可以简写

<any v-for="elem of 数组/对象/字符串">

3、of和in是可以相互代替的，用法完全一样，vue中v-for统一了js中for of 和for in ，即可以遍历索引数组，又可以遍历对象。

4、of会自动取出数组/集合中的每个元素的值和下标，保存到右边的变量中，如果of 后是数字，那么of会从1开始迭代增到目标数字

(4)v-on

1、普通绑定

<any v-on：事件名="处理函数">

2、动态绑定

<any v-on:[变量名]="处理函数">
data:{
    变量名:事件名
}

注：v-on:可以缩写@

提示：无论是data中的变量，还是methods中的函数，只要进入new Vue() 以后，都直接隶属于new Vue()，所以在new Vue() 的直属方法中，使用this可以直接调用变量

问题：如果我们将button按钮换成a标签，href=".."属性，默认会改变我们的地址栏或跳转到其他页面

解决问题：（阻止默行为）

阻止默认行为

解决问题

1、js中

实参：event

function(e){

e.prventDefault();

}

2、vue中

实参：$event

fn(e){

  e.preventDefault();

}

提示：

\(event是vue对象内置 ,是将DOM事件对象e封装后得到的产物，是现成的内置变量，可以直接使用，只要想要vue的处理函数中使用事件对象，就必须在html绑定的调用方法中传入\)event

3、使用事件修饰符

事件修饰符会自动实现原Dom事件对象操作的特殊属性，当需要修改事件的行为时，就要使用事件修饰符

.prevent

使用.prevent代替内置变量$event下的e.preventDefault()，阻止默认行为

.stop

使用.stop代替内置变量$event下的e.stopPropagtion(),取消冒泡/蔓延

<a href="#" @click.prevent="xxx">

多个修饰符可以同时修饰同一个事件，而且与顺序无关

（5）v-html绑定html片段

v-html专门用于加载一段html的代码片段，功能类似于js中的innerHTML()

<any v-html="变量名">
data:{
    变量名:"<h2>Hello World</h2>"
}

(6) v-cloak：防止用户短暂看到{{}}的语法

v-cloak让元素进行默认隐藏，直至内容准备就绪的时候，才会自定的显示出来，可以防止用户短暂看到{{}}内的语法

<any v-cloak>{{message}}</any>

手动添加一个属性选择器，隐藏所有加v-cloak的元素

[v-cloak]{display:none;}

原理：在程序开始的时候，需要由我们手动添加display:none，准备就绪后，vue会自动将v-cloak属性删除，这个时候，也就删除了display:none属性，元素也就能显示出来了

(7)v-text:是{{}}的等效指令，只不过v-text是写在属性中的，而{{}}是写在内容中的给需要隐藏的元素添加v-text，v-text的后面就是我们要显示的内容

<any v-text=`${变量名}`>

(8)保护{{}}中的内容不被编译

v-pre:保护当前元素中的语法，不会被绑定渲染

<any v-pre>{{info}}</any>
data:{
    info:"你猜我再不在"
}

(9)唯一不变元素

v-once:当前元素的{{}}语法对应的数据只能绑定一次，以后即使模型数据发生改变，也不会再改变了

<any v-once>{{name}}</any>
data:{
    name:"jack"
}

     原理：只在首次加载的时候，一次性的将数据模型数据显示在当前元素中，不会将元素注册到监听队列中。正常情况下，watch中，有一个队列，维护这每个数据变量和页面之间的对应关系。每次数据模型发生改变后，都会通知watch，watch会遍历受到该数据变量影响的元素，并逐个的修改他们。通过减少监视的元素个数，可以优化页面绑定的效率  

案例：

<!-- 一、编写页面 -->
        <!-- 界面中所有的元素都必须放在唯一的父元素内，父元素必须要有id名，便于查找 -->
        <div id="app">
            <!-- 将输入的内容的保存到变量中，使用{{变量名}}来进行占位 -->
            <!-- <h2>{{showMessage}}</h2>
            <h3>{{10+20}}</h3>
            <h3>{{10>20}}</h3>
            <h2>{{sex==0?"女","男"}}</h2>
            <h3>{{getString()}}</h3>
            <h3>书名：{{book.bname}}</h3>
            <h3>价格：{{book.price}}</h3>
            <h3>{{arr[n]}}</h3>
            <h3>{{`${str}`World}}</h3> -->
            <!-- <h4 v-bind:class="fontColor">{{new Date().toDateString()}}</h4>
            <h4 v-bind:class="getClass()">{{new Date().toDateString()}}</h4>
            <h2 v-bind:[attr]="fontBg">hello</h2> -->
            
            <!-- <h2 v-if="day==1">
                v-if显示
            </h2>
            <h2 v-else-if="day==2">v-else-if显示</h2>
            <h2 v-else="">v-else显示</h2> -->
            <!-- 影藏 -->
            <!-- <h2 v-show="false"> hello</h2> -->
            <!-- 两个隐藏、显示 -->
            <!-- <h2 v-if="day>=1">5000</h2>
            <h2 v-else="">7000</h2> -->
            <!-- 为button按钮绑定点击事件，向控制台输出一段话 -->
            <!-- <button type="button" @click="show">输出</button> -->
            <!-- v-for -->
            <!-- <table>
                <tr>
                    <td>书名</td>
                    <td>价格</td>
                </tr>
                <tr v-for="(elem,i) of book" :key="i">
                    <td>{{elem.bname}}</td>
                    <td>{{elem.price}}</td>
                </tr> 
                </table>-->
                <!-- v-on -->
                <!-- <a type="button" @click.prevent="alertMsg($event)">输出</a> -->
                <!-- v-html -->
                <div >
                    {{hello}}
                </div>
            
        </div>

<script src="../js/vue.js" type="text/javascript"></script>

<script type="text/javascript">
            //第二步：在js中定义数据对象
            //所有的界面所需要的变量都定义在data对象中，
            //var data={变量名1:变量值1,变量名2:变量值2,...变量名n:变量值n}
            var data={
                hello:"<h2>helloworld</h2>",
                day:2,
                attr:"class",
                fontBg:"fontBg",
                sex:0,
                showMessage:"hello vue!",
                //
                book:[{
                    bname:"vue.js",
                    price:"300"
                },{
                    bname:"javascript",
                    price:"500"
                }],
                str:"hello",
                fontColor:"fontColor",
                name:"今天很冷"
            }
            //第三步：在js 中创建vue对象，将界面和数据绑定起来
            //创建vue类型的ViewModel对象
            var vm=new Vue({
                //el:id选择器，查找页面中需要监控的父元素，并且进行绑定；后面可以跟上任意选择器，但是一个viewModel对象只能绑定一个dom元素，即使“选择器”可以找到多个元素，也只能绑定一个一个符合条件的dom元素。所以一般用id选择器。
                el:"#app",
                //data:存在界面所需要的变量，让new vue同时监控data数据
                data,
                //methods:所有界面所需要的事件处理函数都有放在一个名为methods的对象属性中。
                //自动打撒
                methods:{
                    //定义一个函数show
                    show(){
                        console.log("hello vue!")
                    },
                    getString(){
                        return "我们每天刷题"
                    },
                    getClass(){
                        return this.fontColor
                    },
                    alertMsg(e){
                        //阻止默认行为
                        // e.preventDefault();
                        console.log(this.name)
                    }
                }
            })
        </script>