vue简介、基本指令

阅读量：358 次

发布时间：2019-03-04

本文共 15826 字，大约阅读时间需要 52 分钟。

1.vue简介

目的:快速开发,简单

官网地址:https://cn.vuejs.org/

1-1.vue介绍

作者:尤雨溪

优点

易用
- 只要会HTML.css.JavaScript就可以直接使用
灵活
- 不断繁荣的生态系统(vue Router,vuex,服务端渲染)
- 通过script连接一个vue.js库直接开发即可
- 通过安装vue框架实现快速项目开发

高效

20kB min+gzip 运行大小

超快虚拟 DOM

浏览器解析一个网页的步骤:1.解析HTML,生成HTML树,2.解析 css,生成css树,3.HTML和css结合,4.形成坐标点5.渲染页面一旦要修改元素,需要执行以上5个步骤,如果需要修改10个元素,那么需要执行以上10次5个步骤.结果:浏览器的性能降低虚拟dom(virtual dom)虚拟dom其实就是一个js对象(Object)如果有元素需要修改,通过虚拟DOM进行修改,将虚拟dom和真实dom进行对比,将产生差异的部分,进行统一修改即可.例如:如果需要修改10个元素,通过虚拟DOM进行修改,将虚拟dom和真实dom进行对比,将产生差异的部分,进行统一修改(只主要执行一次以上5个步骤)差异:js解析js要比浏览器解析js快的多,

最省心的优化

css的属性tranform(对元素进行2D或者3D的转换),在使用时针对不同的;浏览器需要加前缀:-webkit -moz -o -ms如果使用了vue之后,以上前缀统一没有了.

渐进式JavaScript框架
渐进式JavaScript框架(主张少)
自底向上逐层应用
```
  			装修
```
新房按照自己的设计风格装修即可(主张少)
二手房装修好了,直接入住,但是如果你想安装自己的设计风格装修,需要先拆在重新装修.(强主张)
单页面应用(SPA)
- ```
SPA(single page application)
```

原生页面:http://www.ujiuye.com/index.html
单页面:https://es6.ruanyifeng.com/#docs/set-map

原生页面:实现页面之间跳转,就是真实的页面跳转(N个.html)单页面:实现页面跳转,通过路由实现.优点:	1.用于体验更优,用户跳转页面时,基本通过ajax请求数据	2.做前后端分离.后端提供http协议接口,前端通过ajax请求数据.	缺点:	1.不利于SEO优化.因为使用单页面应用之后,所有的资源文件(eg:css,js,img)统一放在一个文件中,一旦文件非常大时,页面加载速度会变得非常慢.	2.首屏加载速度慢.```

缺点

不利于SEO优化
首屏加载速度慢,
不支持IE678

核心

数据驱动
组件化应用

案例

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <!-- 1.引入vue.js -->    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body>    <div id="app">        <div>            价格:<input v-model="price">        </div>        <div>            数量:<input v-model="num">        </div>        <div>            总和:{  {price*num}}        </div>    </div>    <script>        new Vue({                el:'#app',            data:{                    price:100,                num:1            }        })    </script></body></html>

1-2 引用方式

三种引用方式:1.<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>2.直接下载vue.js3.npm i vue --save 或者 npm i vue -S(保存) 如果上面指令没有出现依赖包,需要初始化操作:npm init,其目的:产生package.json文件

使用vue方式

1.引入vue.js2.产生作用域3.实例化vue

vue实例中的相关注意事项

 /**         * 1.实例化vue时,需要传递一个参数:json         * 2.参数json中的选项时固定:el,data,methods,         * 3.data中的数据显示在页面中,一般通过{       {data属性名}}显示         * 4.一个vue实例只能作用在一个根元素节点上.         * 5.所有的css样式选择器都可以作用在vue实例上,但是通常使用id选择器.         * 6.不能将vue挂载(mount)到html或者body,         * 7.双大括号{       {}}中可以操作js的一些简单运算.        */

vue案例:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <!-- 1.引入vue.js -->    <script src="./vue.js"></script></head><body>    <!-- 2.作用域 -->    <div id="app">        <h2>{  {name}}</h2>        <p>{  {price}}万</p>        <p>{  {isShow}}</p>        <!-- <p>undefined:{   {str}}</p>        <p>null:{   {str1}}</p> -->        <div>{  {fruit}}</div>        <div>{  {company.name}}</div>        <div>{  {'品牌名称'+name}}</div>        <div>{  {price.toFixed(2)}}</div>        <div>{  {price > 100 ? 100 : price}}</div>        <div>{  {fn()}}</div>        <div>{  {fn1()}}</div>    </div>    <hr>    <!-- <div class="app">        <h2>{   {name}}</h2>    </div> -->    <script>        // 3.实例化vue        /**         * 1.实例化vue时,需要传递一个参数:json         * 2.参数json中的选项时固定:el,data,methods,         * 3.data中的数据显示在页面中,一般通过{    {data属性名}}显示         * 4.一个vue实例只能作用在一个根元素节点上.         * 5.所有的css样式选择器都可以作用在vue实例上,但是通常使用id选择器.         * 6.不能将vue挂载(mount)到html或者body,         * 7.双大括号{    {}}中可以操作js的一些简单运算.        */        new Vue({                el:'#app',//element(元素),当前vue实例作用在某个元素上            data:{    //属性(变量)                name:'宝马X6',                price:60.00,                isShow:true,                // str:undefined,                // str1:null,                fruit:['草莓','西瓜','菠萝'],                company:{                        name:'优就业',                    url:'http://www.ujiuye.com',                    people:40000                }            },            methods:{                    // 方法                // 第一种定义                fn:function(){                        alert('弹出来')                },                // 第二种定义                fn1(){                       alert('弹回去')                 }            }        })           </script></body></html>

2.基本指令

2-1.非表单元素(div span p)

	优点	缺点	作用
{ {}}	方便书写	1.不能解析data中属性值中的标签2.出现闪屏问题	插值表达式
v-html	解析data属性值的标签		富文本
v-text	不会出现闪屏问题	不能解析data中属性值中的标签	展示内容

解决闪屏问题:通过指令v-cloak实现:v-cloak绑定在作用于vue实例的标签上,当vue.js没有加载完成时,设置[v-cloak]的样式为:diplay:none,当vue.js加载完成后,将[v-cloak]作用的元素样式改为:display:block

{ {}}

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <!-- 1.引入 -->    <!-- <script src="./vue.js"></script> -->    <style>        [v-cloak]{                display: none;        }    </style></head><body>    <!-- 2.作用域 -->    <div id="app" v-cloak>        <!--             1.{   {}}不能解析data中属性值中的标签            2.当vue.js没有加载出来时,页面中显示{   {}}一类的数据,不利于用户体验            3.解决闪屏问题:         -->        <div>{  {name}}</div>        <span>{  {price}}</span>        <p>{  {color}}</p>        <div>{  {str}}</div>    </div>    <script>        // 3.实例化vue        new Vue({                el:'#app',            data:{    //属性                name:'凯迪拉克',                price:30.00,                color:'pink',                str:'<mark>坐在凯迪拉克里烫火锅</mark>'            }        })    </script></body></html>

v-html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <!-- 1.引入 -->    <!-- <script src="./vue.js"></script> --></head><body>    <!-- 2.作用域 -->    <div id="app">        <!--             1.v-html写在标签中,当做属性展示            2.v-html的值是data的属性名            3.标签中的内容不再浏览器体现.            4.v-html可以解析data中属性值中的标签            5.当vue.js没有加载出来时,页面中不展示任何数据         -->        <div v-html="name"></div>        <span v-html="price"></span>        <p v-html="color"></p>        <div v-html="str"></div>    </div>    <script>        // 3.实例化vue        new Vue({                el:'#app',            data:{    //属性                name:'凯迪拉克',                price:30.00,                color:'pink',                str:'<mark>坐在凯迪拉克里烫火锅</mark>'            }        })    </script></body></html>

v-text

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <!-- 1.引入 -->    <!-- <script src="./vue.js"></script> --></head><body>    <!-- 2.作用域 -->    <div id="app">        <!--             1.v-text写在标签中,当做属性展示            2.v-text的值是data的属性名            3.标签中的内容不再浏览器体现.            4.v-text不能解析data中属性值中的标签            5.当vue.js没有加载出来时,页面中不展示任何数据         -->        <div v-text="name"></div>        <span v-text="price"></span>        <p v-text="color"></p>        <div v-text="str"></div>    </div>    <script>        // 3.实例化vue        new Vue({                el:'#app',            data:{    //属性                name:'凯迪拉克',                price:30.00,                color:'pink',                str:'<mark>坐在凯迪拉克里烫火锅</mark>'            }        })    </script></body></html>

2-2.表单元素(input textarea)

v-model双向数据绑定指令

设计模式

设计模式:MVC,M(model)模型   V(view)视图 C(controller)控制器            vue采用的是:MVVM  M(model)模型  V(view)视图 VM(ViewModel)视图模型            模型通过ViewModel控制着视图,视图同时也可以通过ViewModel修改模型,此时ViewModel起到了中间桥梁的作用.

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <!-- 1.引入-->    <script src="./vue.js"></script></head><body>    <!-- 2.作用域 -->    <div id="app">        <!--             1.v-model的值是data的属性名             2.input框的值是data的属性名对应的值,value属性在这里不起任何作用        -->        <!-- 双向数据绑定 -->        <!--             设计模式:MVC,M(model)模型   V(view)视图 C(controller)控制器            vue采用的是:MVVM  M(model)模型  V(view)视图 VM(ViewModel)视图模型            模型通过ViewModel控制着视图,视图同时也可以通过ViewModel修改模型,此时ViewModel起到了中间桥梁的作用.          -->        <input type="text" v-model="name" value="haha">        <div>{  {name}}</div>    </div>    <script>        // 实例化vue        new Vue({                el:'#app',            data:{                    name:'Vue'            }        })    </script></body></html>

2-3.媒体元素(img)

v-bind

1.v-bind指令:一般绑定的是属性2.书写形式: v-bind:属性名="data中的属性名"3. v-bind:简写形式:   :属性名="data中的属性名"

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <!-- 1.引入-->    <script src="./vue.js"></script></head><body>    <!-- 2.作用域 -->    <div id="app">        <!-- 静态数据展示 -->        <img src="http://www.ujiuye.com/statics/images/newzhu_images/logo.png" alt="">        <hr>        <!-- 动态数据展示 -->        <!--             1.v-bind指令:一般绑定的是属性            2.书写形式: v-bind:属性名="data中的属性名"         -->        <img v-bind:src="url" alt="">        <hr>        <a v-bind:href="company.url">            <img v-bind:src="company.logo" alt="" v-bind:title="company.name">        </a>        <hr>        <!-- v-bind:简写形式:   :属性名="data中的属性名" -->        <a :href="company.url">            <img :src="company.logo" alt="" :title="company.name">        </a>    </div>    <script>        // 3.实例化vue        new Vue({                el:'#app',            data:{                   url:'http://www.ujiuye.com/statics/images/newzhu_images/logo.png',               company:{                       name:'优就业',                   logo:'http://www.ujiuye.com/statics/images/newzhu_images/logo.png',                   url:'http://www.ujiuye.com'               }            }        })    </script></body></html>

2-4. 条件判断

v-if指令控制的是元素的显示和隐藏

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <!-- 1.引入-->    <script src="./vue.js"></script>    <style>        .box{                width: 100px;            height: 100px;            background: pink;        }    </style></head><body>    <!-- 2.作用域 -->    <div id="app">        <!--             1.v-if:如果表达式为真,即显示元素.如果表达式为假,即元素消失            2.v-if指令控制的是元素的显示和隐藏         -->       <div v-if="true">春花秋月何时了</div>       <div v-if="false">往事知多少</div>       <div v-if="1">小楼昨夜又东风</div>       <div v-if="0">2021牛转乾坤</div>       <div v-if="1!==1">2021牛气冲天</div>       <hr>       <button @click="show()">显示</button>       <button @click="hide()">隐藏</button>       <div class="box" v-if="isShow"></div>    </div>    <script>        // 3.实例化vue        new Vue({                el:'#app',            data:{                   isShow:true,            },            methods:{                    show(){                        this.isShow = true;                },                hide(){                        this.isShow = false;                }            }        })    </script></body></html>

v-show控制着元素的显示和隐藏

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <!-- 1.引入-->    <script src="./vue.js"></script>    <style>        .box{                width: 100px;            height: 100px;            background: pink;        }    </style></head><body>    <!-- 2.作用域 -->    <div id="app">        <!--             1.v-show控制着元素的显示和隐藏         -->      <div v-show="true">没有理所当然的成功,也没有毫无理由的平庸,2021我们的爆发时代</div>        <div v-show="false">南来北往</div>        <hr>        <button @click="show()">显示</button>       <button @click="hide()">隐藏</button>       <div class="box" v-show="isShow"></div>    </div>    <script>        // 3.实例化vue        new Vue({                el:'#app',            data:{                  isShow:false            },           methods:{                show(){                    this.isShow = true;            },            hide(){                    this.isShow = false;            }           }        })    </script></body></html>

v-if和v-show的区别

相同点:都是控制着元素的显示和隐藏不同点:当表达式的值为false,v-if采用的惰性模式,v-show通过样式中的属性display:none来控制在实际应用中:1.v-if:一般使用在页面一旦加载完成,几乎不再修改,可以使用2.v-show:使用在元素切换频率比较高的情况下(eg:选项卡切换)

2-5. v-for指令

v-for做数组的遍历

1.遍历数组2.遍历数值3.遍历字符串4.遍历对象

用法

数组:v-for="(item,index) in 数组名称"v-for="(item,index) of 数组名称"	item:指数组的每一项	index:指数组下标对象:v-for="(item,key,index) in 对象名称"	item:指对象中的每一项值	key:对象的键	index:对象的下标

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <!-- 1.引入-->    <script src="./vue.js"></script>    </head><body>    <!-- 2.作用域 -->    <div id="app">        <!-- 遍历数组 -->        <ul>            <li v-for="(item,index) in arr">{  {index}}==={  {item}}</li>        </ul>        <hr>        <!-- 遍历数值 -->        <ul>            <li v-for="(item,index) in 10">{  {index}}==={  {item}}</li>        </ul>        <!-- 遍历字符串 -->        <hr>        <ul>            <li v-for="(item,index) of 'hello'">{  {index}}==={  {item}}</li>        </ul>    </div>    <script>        // 3.实例化vue        new Vue({                el:'#app',            data:{                  arr:['宝马','奥迪','奔驰','宾利']            },                   })    </script></body></html>

2-6.v-once

v-once

v-once:指当前元素和它的所有子集首次在页面显示完成之后,不会再进行修改

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <!-- 1.引入-->    <script src="./vue.js"></script>    </head><body>    <!-- 2.作用域 -->    <div id="app">        <!-- v-once:指当前元素和它的所有子级首次在页面显示完成之后,不会再进行修改, -->      <div v-once>        <p>{  {num}}</p>      </div>      <button @click="add()">++</button>    </div>    <script>        // 3.实例化vue        new Vue({                el:'#app',            data:{                     num:30            },            methods:{                    add(){                        this.num++;                    console.log(this.num);                }            }        })    </script></body></html>

面试题

1.为什么要选vue？与其它框架对比的优势和劣势？	vue:		优点			1.双向数据绑定 | 2.组件化开发 | 3.采用virtual DOM | 4.轻量高效 | 5.动画系统			Virtual DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。		缺点			1.不支持IE8及以下版本 | 2.生态不太成熟,例如编辑器中的语法提示不太完善 | 3.社区无法与angular和react相比	angular:		相同点:			1.都支持指令,内置指令和自定义指令 | 2.都支持过滤器,内置过滤器和自定义过滤器 | 3.都支持双向数据绑定, | 4.都不支持低端浏览器		不同点:			1.Angular的学习成本较高,二vue.js本提供的api就比较简单.直观.			2.从性能上来说: AngularJS依赖对数据做脏检查.Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。	react:		相同点:			1.react采用特殊的jsx语法,vue进行组件化编写,采用.vue特殊文件格式,两者都需用编译后使用.			2.中心思想相同:都是组件化开发,组件实例之间可进行嵌套			3.都提供了合理的钩子函数,可让开发者定制化的处理需求			4.都没有内置ajax,Route等核心包,而是以插件的方式加载.		不同点:        	1.React采用的Virtual DOM会对渲染出来的结果做脏检查			2.Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。react没有2.mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？		MVVM是Model-View-ViewModel的简写。		Model:模型        View:视图        ViewModel:视图模型,连接view和model的桥梁		MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。

转载地址：http://mtse.baihongyu.com/

你可能感兴趣的文章