20201012冯佳丽

学习日志

一、什么是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>

标签

评论