文章目录

第一章 Vuejs 概述
- 1 什么是vuejs
- 2. 为什么要学习Vuejs
- 3.vuejs版本1和版本2的区别
- 4.MVC和MVVM的区别
第二章 Vue基础语法
- 2.1 第一个Vuejs案例
- 2.2 通过基础案例解析 MVVM
- 2.3 指令属性的基本使用
- - （1） v-cloak
  - （2）v-text
  - （3）v-html
  - （4）插值表达式与v-text/v-html的区别
  - （5） v-bind
- 2.4 使用 v-on指令触发事件
- - 1. v-on的基本使用
  - 2.事件装饰符的使用
  - - (1) .stop
    - (2) .prevent
    - (3) .capture
    - (4) .self
    - (5) . once
- 2.5 使用 v-model指令实现双向数据绑定
- - （1）v-model 的基本使用
  - （2）使用v-model实现简单的计算器功能
- 2.6 使用class样式
- - （1）class样式的使用
  - - ①传递一个class样式的数组，通过v-bind做样式的绑定。
    - ② 通过三目（元）运算符操作以上数组
    - ③ 使用对象（json）来表达以上三目（元）运算符的操作。
    - ④以对象引用样式(实际项目中常用)
    - ⑤通过以直接模型M直接做样式渲染
  - （2）style样式的补充
  - - ①引用样式对象
    - ②引用样式对象的数组
- 2.7 v-for指令和v-if指令的应用
- - （1）v-for指令的基本使用
  - - ①遍历字符串数组
    - ②遍历对象数组
    - ③遍历对象的属性和属性值
    - ④遍历整型数字
  - （2）v-for指令使用的注意事项
  - （3）v-if指令和v-show指令的使用和区别
  - - ① v-if的使用
    - ②v-show的使用
    - 简单的比较 v-if指令和 v-show指令
    - ②v-show的使用
    - 简单的比较 v-if指令和 v-show指令

开始前端框架的学习

第一章 Vuejs 概述

1 什么是vuejs

vuejs是一套构建用户界面的框架，它只关注视图层的内容，它是前端的主流框架之一。前端3大主流框架： Angular.js React.js Vue.js。

前端框架主要负责的是MVC中的V的这一层，主要的工作就是和页面打交道，主要是用来对页面中的数据进行处理，以及制作前端页面相关的特效及动画。

2. 为什么要学习Vuejs

在实际项目开发中，不论是做前端开发还是后端开发，使用框架技术是最佳的提高效率的方式。另外使用Vuejs来做前端框架，对于处理数据的方面可以完全的替换掉原有的dom操作的理念（之前我们常用的原生js以及jQuery类库），通过Vuejs框架提供的指令，前端开发人员不再关心dom是如何渲染的，可以有更多的时间去关注业务逻辑本身。

Vuejs作为现今最火爆的前端开发框架，学习后可以有效的提高就业的价值。

3.vuejs版本1和版本2的区别

Vuejs当今应用最普遍的有两个版本，分别是vue1.js以及vue2.js。值得说明的是版本2在版本1的基础上进行了大量的改动。一些语法和理念有很大不同，新项目一般都会使用vue2.js,所以二者从概念和语法上有很大区别，随着版本2的成熟以及市场的认可，当前市场中对于新项目的开发已经完全偏向于使用版本2。

另外版本3现今是处于测试及预备阶段，所以现在版本仍然是主流。

4.MVC和MVVM的区别

MVC是基于浏览器和服务器的开发理念，前端界面部分View视图层，视图层发送请求到服务器。（V）

app.js是项目的入口模块，从视图层发过的请求，一定先经过这个app.js。

router.js，这是我们的路由分发处理模块，该模块只负责分发路由，不负责业务逻辑。

Controller，真正接收并处理请求的模块，该模块只负责接收并处理请求，处理业务逻辑。对于Controller，前端开发的控制器和后端开发的控制器在概念上有一定的区别。

对于前端开发而言，Controller不仅仅只是用来接收处理请求，更重要的是还要处理具体的业务逻辑。

如果是对于后端开发，Controller会继续细分成两块，Controller只负责接收并处理请求，同时为终端提供响应，对于业务逻辑划分为Service业务层去处理。Controlller是控制层。

这是前端开发和后端开发的一个区别。

Model模型层，与数据库做交互，职能单一，执行对应的sql语句实现基本的CRUD的功能。

MVVM是前端视图层的开发思想，主要是用来将每一个页面分成M,V,MV这三种组件。这三个组件在前端开发中分工协作，分工明确，其中VM作为调度者，类似controller。是因为VM是M和V之间的一个整体的调度者，我们所要学习的Vue.js主要学习的就是通过Vue.js框架来创建VM这一组件，为M和V来进行服务。

M表示页面中需要处理的数据的一部分。

VM是整体的调度者，分割了M和V，当V想要获取或者传递数据M的时候，使用VM来调度。

V表示页面中，用来展现页面的这一部分。HTML代码

第二章 Vue基础语法

2.1 第一个Vuejs案例

2.2 通过基础案例解析 MVVM

<!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><!-- 引入vuejs框架 --><script src="./lib/vue.js"></script>
</head>
<body><!-- 在外层标签div中引入 id 属性值 将来vuejs会通过该id,找到需要操作的元素 --><!-- 以下Vue实例vm所控制的这个元素区div,就是我们的v --><div id="app"> <!-- 在前端页面元素的部分，其中的内容我们暂时以插值表达式的形式来呈现 --><!-- 在两对p标签中分别引入了插值表达式，相当于将p标签对中的内容写活了，内容以变量的形式存在  --><p>{{str1}}</p><p>{{str2}}</p></div><script>// 当Vuejs框架包导入进来之后，在浏览器缓存中，就已经存在了一个Vue框架的构造函数// new 出来的这个vm对象，就是页面中对于模型和视图（数据和页面元素）的整体调度者// 以下创建出来的vm对象，就是我们MVVM中的VM调度者var vm = new Vue({el: "#app",     // el元素表现的是要指定为哪个标签进行相应的vuejs的操作data:{          // data是vuejs中对于数据的表达，数据约定俗称的都是以json的形式来呈现的// data属性中，存放的是el中要使用到的数据// 这里的data就是MVVM中M，专门用来表现数据的组件"str1":"HelloWorld1","str2":"HelloWorld2"}});</script></body>
</html>

2.3 指令属性的基本使用

（1） v-cloak

使用v-cloak主要为了解决插值表达式的闪烁问题。

 <style>[v-cloak]{display:none;}</style>
</head>
<body><!-- 在外层标签div中引入 id 属性值 将来vuejs会通过该id,找到需要操作的元素 --><div id="app"> <!-- 在前端页面元素的部分，其中的内容我们暂时以插值表达式的形式来呈现 --><!-- 在两对p标签中分别引入了插值表达式，相当于将p标签对中的内容写活了，内容以变量的形式存在  --><p v-cloak>{{str1}}</p><p v-cloak>{{str2}}</p></div>

（2）v-text

使用插值表达式的问题：

在页面加载的过程中，在页面中的{{}}插值表达式首先会被页面认可为是html元素中的存在的内容。所以浏览器会首先将{{}}展现在页面上，页面加载完毕后，插值表达式{{}}才会真正的转变为动态赋予的值。这就会造成一种现象，如果将来终端在访问服务器的过程中，网速较慢（网络比较卡），那么我们的{{}}会首先展现出来，{{}}展现出来后，会一闪而过，最终显示的是最终被赋予的值。这就是前端开发中所谓的，插值表达式的闪烁问题。

    <div id="app"> <!-- 在vuejs中，为了页面中的元素渲染值（为前端标签中的内容赋值） 可以使用3种形式：插值表达式{{str}}v-textv-html--><!-- 使用插值表达式为标签中的内容赋值 --><p>{{str1}}</p><p v-text="str2"></p><p v-html="str3"></p></div><script>var vm = new Vue({el: "#app",     data:{        "str1":"aaa","str2":"bbb","str3":"ccc"}});</script>

（3）v-html

<p>=========={{str1}}==============</p>
<p v-text="str2">====================</p>
<p v-html="str3">=======================</p>==========aaa==============
bbb
ccc

（4）插值表达式与v-text/v-html的区别

①对于元素中已经存在的值，只有插值表达式能够将原有的值保留，在原有的已经存在的值的基础上添加动态数据。

使用v-text和v-html之所以不能够保留元素标签对儿中原有的内容，是因为在使用以上两个指定属性之前，会提前将标签对中的内容先清空掉，再赋予动态的值。如果未来的实际项目开发，需求为在原有的内容的基础上，追加动态的值，要选择用插值表达式。

从另一方面来看，插值表达式虽然会出现{{}}页面闪烁的现象（v-text和v-html不会出现页面闪烁的情况），但是对于原有内容的保留，只有插值表达式能够完成，所以插值表达式具有不可替代的优势。

对比v-text和v-html

        <p>{{str1}}</p><p v-text="str2"></p><p v-html="str3"></p></div><script>var vm = new Vue({el: "#app",     data:{        "str1":"<font color='red'>aaa</font>","str2":"<font color='red'>bbb</font>","str3":"<font color='red'>ccc</font>"}});</script>
页面效果：
<font color='red'>aaa</font>
<font color='red'>bbb</font>
ccc(红色的)

v-text:主要是用来赋予纯内容的，如果赋予到元素中的内容本身包含html,那么v-text会将html原封不动的展现在页面上，这些内容是得不到浏览器的解析的。

v-html：除了能够为前端元素赋予内容之外，更重要的是，如果内容本身含有html代码，那么赋值后最终展现出来的结果，html元素会得到浏览器的解析的。

从以上结果判断，v-html的功能要更加强大，对于前端的展现，不可能让使用该系统的用户看到任何html的代码，而是应该让用户看到解析后的html效果。所以在实际项目开发中，使用v-html的概率要高于v-text。

另外使用插值表达式的效果与v-text的效果是一样的，内容中的html代码得不到浏览器的解析。

（5） v-bind

v-bind是Vuejs中，提供用于绑定属性的指令

    <div id="app"> <!-- 以下input标签对value属性中的值，使用vm对象，由vm对象将data中的信息赋予到该value属性值当中 --><!-- 必须使用指令属性 v-bind来完成需要将v-bind：加在我们需要绑定的属性的前面--><input type="text" v-bind:value="str1"/><p v-bind:title="str2">content</p><input type="button" value="submit" v-bind:title="str3"/></div><script>var vm = new Vue({el: "#app",     data:{        "str1":"aaa","str2":"bbb","str3":"ccc"}});</script>

对于v-bind在开发中一共有如下几种使用方式

直接使用指令属性v-bind来为元素中的属性进行绑定操作
使用简化后的方式，将v-bind去除，直接使用：来对元素中的属性进行绑定。

因为在实际项目开发中，对于前端元素的绑定是我们的常规操作，v-bind的使用复用率非常高，所以每一次都直接写v-bind会很麻烦，所以vuejs为v-bind 指令属性提供了简写的方式，直接使用：即可。

v-bind:title —> :title

注意这种简写形式仅仅只是针对我们的v-bind，其他指令没有简写形式。

在实际项目开发中，通常使用这种简写形式。
在使用v-bind对元素中的属性进行绑定的时候，可以直接在操作值的位置进行内容的拼接。

        <input type="button" value="submit" :title="str3+'Hello world'"/>

2.4 使用 v-on指令触发事件

1. v-on的基本使用

    <div id="app"> <input type="text" v-bind:value="str1"/><!-- <input type="button" value="点击1" οnclick="alert(1)"/> --><input type="button" value="点击1" v-on:click="fun1"/></div><script>var vm = new Vue({el: "#app",     data:{        "str1":"aaa",},// methods：表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分割。methods:{fun1(){alert("abc");},fun2(){alert("fun2");}}});

v-on:click="fun1"的形式来绑定事件。相当于原生js中的onclick。

v-bind 简化----> :

v-on 简化为@

2.事件装饰符的使用

(1) .stop

使用 .stop 来对事件的冒泡机制进行阻止。js中的事件的冒泡指的是，在触发了内层元素的同时，也会随之继续触发外层元素（外层元素包裹了内层元素），在做点击的过程中，点击了内层元素，也可以认为是同时点击率外层元素。所以两个事件都会触发。

在实际项目开发中，几乎没有太多需求会使用到这种事件的冒泡的机制，所以我们需要阻止事件的冒泡的机制，所以我们需要阻止事件的冒泡。阻止事件冒泡之后的效果是，在点击了内层元素之后，内层元素绑定的事件触发，触发完毕后，由于事件冒泡被阻止，就不会继续触发外层元素的事件了。

    <div id="app"> <div style="width: 200px;height: 200px;background-color: red;" @click="fun1"><div style="width: 100px;height: 100px;background-color: blue;" @click.stop="fun2"></div></div></div>

(2) .prevent

使用 .prevent来阻止超链接默认的行为。所谓默认行为指的是超链接中的href属性链接，在实际项目开发中，不仅仅只是按钮需要我们绑定事件来控制行为，超链接的使用我们也是要遵循这种自己绑定事件触发行为的方式。

所以在a标签中的href链接往往要被我们以特殊的方式处理掉。

传统的处理方式
<a href="javascript:void(0)" @click=""/><div id="app"> <a href="http://www.baidu.com" @click="fun1">点击1</a><a href="http://www.baidu.com" @click.prevent="fun1">点击2</a></div>

(3) .capture

使用.capture实现捕获触发事件的机制。

  <div id="app"><div style="width: 200px;height: 200px;background-color: red;" @click.capture="fun1"><div style="width: 100px;height: 100px;background-color: blue;" @click="fun2"></div></div></div>

使用的是外层div套用内层div的例子（其中外层div没有选择阻止冒泡），在此基础上，点击内层div，先触发内层div的事件，再触发外层div的事件。

加入了.capture修饰符之后先触发的是外层的div事件，后触发的是内层div的事件。被capture修改之后，事件优先触发。

(4) .self

self 实现阻止事件冒泡行为的机制（对比之前 .stop）

  <div id="app"><div style="width: 200px;height: 200px;background-color: red;" @click="fun1"><div style="width: 100px;height: 100px;background-color: blue;" @click.self="fun2">被self修饰的不被触发<input type="button" value="点击" @click="fun3" /></div></div></div>

使用.self实现的是阻止自身冒泡的行为（它不会真正的阻止冒泡）

(5) . once

使用 .once修饰符，只触发一次事件处理函数。once需要结合 .prevent来使用。

在我们使用事件修饰符的时候，有可能会存在这样的需求，需要同时为@click事件使用多个修饰符。例如需要同时使用.once 和 .prevent 修饰符。在使用的时候，通过绑定事件的@click连续的绑定修饰符就可以了。

语法：@click.prevent.once

  <a href="http://www.baidu.com" @click="fun1">点击1</a>
只使用@click的时候（没有做任何修饰符修饰），点击超链接，先触发@click,后触发href链接。<br><a href="http://www.baidu.com" @click.prevent.once="fun1">点击2</a>
第一次点击：只触发了@click事件，href链接没有触发
第二次点击（已经点击过一次之后再次点击）：没有触发@click，只触发了href

2.5 使用 v-model指令实现双向数据绑定

之间学习过v-bind 实现绑定

数据的绑定方向：

单项绑定方式：M---->V 使用模型去渲染视图。中间的过程使用的是VM

v-bind只能实现数据的单项绑定，从模型（M）绑定到视图（V），使用VM将数据去渲染视图，但是我们无法通过该形式实现数据的双向绑定。（比如我在网页上修改str的值，data中的数据并不会改变）

    <h3>{{str1}}</h3><input type="text" :value="str1"/><script>var vm = new Vue({el: "#app",data: {"str1": "aaa",}875</script>

双项数据绑定：不仅仅只是从M取得数据渲染到V，还可以从V的变化动态的更新到M的值。V<------->M。

在实际项目开发中，不仅仅只是将模型准确渲染到视图中，视图中的数据的变化更需要视图去进行有效的记录。所以我们需要使用双向数据绑定的机制。

（1）v-model 的基本使用

使用v-model 可以对数据进行双向的绑定操作。值得注意的是，由于记载页面元素值的需求都是发生在表单元素中，所以v-model只能运用在表单元素中。

form

<input> 系列 type:text,hidden,checkbox,radio....
<select>
<textarea>
.....   <input type="text" v-model:value="str1"/>

（2）使用v-model实现简单的计算器功能

 <div id="app"><input type="text" v-model="num1"/><select v-model="csign"><option value="+">+</option><option value="-">-</option>  <option value="*">*</option><option value="/">/</option></select><input type="text" v-model="num2"/><input type="button" value="=" @click="count"/><input type="text" v-model="result"/></div><script>var vm = new Vue({el: "#app",data: {num1: 0,num2: 0,csign:"+",result:0},methods: {count(){if(this.csign=="+"){// 直接取得的数值暂时是不能够直接计算的，默认的情况会按照字符串拼接的形式来触发+符号// 默认拼接字符串：1+1=11// 在做数学计算之前，需要将数值格式化，才能够计算，使用pareseInt方法做数值格式化操作this.result= parseInt(this.num1)+parseInt(this.num2);}else if(this.csign=="-"){this.result= parseInt(this.num1)-parseInt(this.num2);}else if(this.csign=="*"){this.result= parseInt(this.num1)*parseInt(this.num2);}else{this.result= parseInt(this.num1)/parseInt(this.num2);}}}});</script>

2.6 使用class样式

使用vuejs控制样式，会使样式变化的操作更加的灵活。

（1）class样式的使用

①传递一个class样式的数组，通过v-bind做样式的绑定。

  <style>.style1{color: red;}.style2{background-color: aqua;}.style3{font-style: italic;}.style4{font-size: 30px;}</style>
</head>
<body><div id="app"><span class="style1 style2 style3 style4">Hello Style</span><br><span :class="['style1','style2']">Hello Style</span></div>

这种形式与之前的形式没有太大的区别。

② 通过三目（元）运算符操作以上数组

boolean?true执行 :false 执行

    <span :class="['style1','style2','style3',flag?'style4':'']">Hello Style</span><br><input type="text" v-model:value="flag"/></div><script>var vm = new Vue({el: "#app",data: {flag:false},

③ 使用对象（json）来表达以上三目（元）运算符的操作。

<span :class="['style1','style2','style3',{'style4':flag}]">Hello Style</span>

④以对象引用样式(实际项目中常用)

    <span :class="{style1:true,style2:true,style3:true,style4:flag}">Hello Style</span>

⑤通过以直接模型M直接做样式渲染

注意：这样使用必须直接将具体的boolean值结果（true/false）赋值，不能以this.模型的形式来做引用。

<span :class="myStyle">Hello Style</span></div><script>var vm = new Vue({el: "#app",data: {flag:true,myStyle:{style1:true,style2:true,style3:true,style4:true}},

（2）style样式的补充

在实际项目开发中，对于style样式的使用，没有class使用的广泛，通常style属性仅仅只是对个别指定元素的样式进行的进一步补充使用。

①引用样式对象

:style=“引用样式的对象”

注意：在写color这样的样式属性的时候，由于仅仅只是一个单词，所以不需要加引号，开发中的大多数的样式都是包含横杠（-）的，例如：font-style，background-color等等，在使用这样带有 - 的演示属性的时候，必须套用在引号中。

‘font-style’

  <div id="app"><span :style="myStyle1">Hello Style</span></div><script>var vm = new Vue({el: "#app",data: {myStyle1:{color:'red','font-size':'30px'}},methods: { }});</script>

②引用样式对象的数组

:style="[样式对象引用1,样式对象应用2]"

<body><div id="app"><span :style="[myStyle1,myStyle2]">Hello Style</span></div><script>var vm = new Vue({el: "#app",data: {myStyle1:{color:'red','font-size':'30px'},myStyle2:{'font-style':'italic','background-color':'aqua'}},methods: { }});</script></body>

这种将CSS样式掺杂在了JS中并不推荐。

2.7 v-for指令和v-if指令的应用

（1）v-for指令的基本使用

①遍历字符串数组

 <!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><!-- 引入vuejs框架 --><script src="./lib/vue.js"></script></head><body><div id="app"><!-- 直接使用插值表达式 引用数组 通过下标展现所需元素--><!-- <p>{{cityList[0]}}</p><p>{{cityList[1]}}</p><p>{{cityList[2]}}</p><p>{{cityList[3]}}</p><p>{{cityList[4]}}</p> --><!-- 使用v-for指令的形式遍历字符串数组 语法：元素 in 数组--><!-- <p v-for="city in cityList">{{city}}</p> --><!-- 在以上需求的基础上 遍历出所有元素以及对应的下标 --><p v-for="(city,i) in cityList">{{i}}----------------{{city}}</p><!--
0----------------北京
1----------------上海
2----------------广州
3----------------深圳
4----------------沈阳--></div><script>var vm = new Vue({el: "#app",data: {cityList:["北京","上海","广州","深圳","沈阳"]},methods: {}});</script>
</body>
</html>

②遍历对象数组

  <div id="app"><!-- 每一次遍历出的元素，代表一个城市信息对象 --><p v-for="(city,i) in cityList"><!-- 对象以 .属性名 的形式来取得属性值 -->{{i}}----------------{{city.id}}-----------------{{city.name}}</p></div>

③遍历对象的属性和属性值

  <div id="app"><!-- 遍历对象的属性和属性值：必须以键值对的形式来遍历（value值（属性值），key键（属性名））in 对象（value值（属性值），key键（属性名）,i下标）in 对象--><p v-for="(value,key,i) in city1">{{i}}-----------{{key}}-----------{{value}}<!--
0-----------id-----------A0001
1-----------name-----------北京--></p></div><script>var vm = new Vue({el: "#app",data: {city1:{id:"A0001",name:"北京"}},

④遍历整型数字

    <!-- 以元素 in 整型数值遍历1到10--><p v-for="count in 10">{{count}}</p>

（2）v-for指令使用的注意事项

对于key属性的使用案例

    <p v-for="(city,i) in cityList" :key="city.id"><!-- 对象以 .属性名 的形式来取得属性值 -->{{i}}----------------{{city.id}}-----------------{{city.name}}</p>

在实际项目开发中，使用v-for仅仅只是将元素遍历出来，并展现在页面中。如果在将来的其他需求中，使用到指定的遍历出来的某个元素，那么视图并没有为我们提供一个有效的辨识指定元素的方式。

所以在遍历元素的过程中，需要为每一条遍历出来的元素做一个有效的标识，这个标识就是该元素在页面中的唯一标识，在将来使用到该元素的时候，页面可以通过该标识认准该元素。在v-for的使用过程中，添加key属性及属性值就是做这个标识的最好的手段。

所有我们需要养成一个在遍历元素的过程中，为key属性赋值的好习惯。

对于key属性的应用，值得注意的是：

key属性值必须是一个数值或者字符串，对象不能当做属性值。否则系统会提出警告，将来不能有效的应用。
key属性的应用必须搭配绑定v-bind指令，在使用的时候必须是以该形式":key"来使用，否则系统不会生效。
对key属性所赋予的值，必须是记录的唯一标识，通常使用的是记录的id。

（3）v-if指令和v-show指令的使用和区别

① v-if的使用

    <!-- v-if：boolean true/flase当值为true 则展现标签对的信息当值为false:则不展现标签对中的信息。--><p v-if="flag">显示该文本的值</p></div><script>var vm = new Vue({el: "#app",data: {flag:false},

②v-show的使用

    <p v-show="flag">显示该文本2的值</p></div><script>var vm = new Vue({el: "#app",data: {flag:true},

简单的比较 v-if指令和 v-show指令

如果flag为true，效果是一模一样的。点击浏览器的查看器，显示页面信息，观察结果为一致的。

如果flag为false，观察到的结果是不同的。其中v-if中的元素是本身就没有的，v-show中的元素是存在的，只是通过false属性值，系统为该元素新增了display:none ，表示不展现该元素，通过观察得到结论：

v-if为true: 创建条件元素 false：去除该元素。

v-show为true：展现条件元素，为false：隐藏该元素。

在实际项目开发中，一般的需求情况下，使用v-if。但是如果对于元素的展现与否需要频繁的切换，需要使用

v-show的形式展现或者隐藏元素，因为v-if在每次切换为true的时候都需要重新的创建元素，降低页面展现元素的效率。

ase

  当值为true 则展现标签对的信息当值为false:则不展现标签对中的信息。--><p v-if="flag">显示该文本的值
</p>

②v-show的使用

    <p v-show="flag">显示该文本2的值</p></div><script>var vm = new Vue({el: "#app",data: {flag:true},

简单的比较 v-if指令和 v-show指令

如果flag为true，效果是一模一样的。点击浏览器的查看器，显示页面信息，观察结果为一致的。

v-if为true: 创建条件元素 false：去除该元素。

v-show为true：展现条件元素，为false：隐藏该元素。

在实际项目开发中，一般的需求情况下，使用v-if。但是如果对于元素的展现与否需要频繁的切换，需要使用

v-show的形式展现或者隐藏元素，因为v-if在每次切换为true的时候都需要重新的创建元素，降低页面展现元素的效率。

vue详解（一）概述和基础语法相关推荐

python语法详解_解析 Python3 基础语法
行与缩进 python最具特色的就是使用缩进来表示代码块,不需要使用大括号 {} . 缩进的空格数是可变的,但是同一个代码块的语句必须包含相同的缩进空格数.实例如下: if True: print ( ...
指针变量的基本概念详解（go语言基础语法）
指针类型 1.什么是地址 2.什么是指针 3.指针变量的定义 4.取值符和取地址符 1.什么是地址传统生活中,点外卖时需要填写一个地址还有一个名字,外卖小哥哥便可以根据这个地址找到你这个人.计算机中 ...
32 --＞详解 OpenWRT系统框架基础软件模块之netifd
一.简介 OpenWrt路由操作系统的框架基础软件有很多,大部分是通用的软件模块,如 dhcp .dnsmasq.iproute.cmwp.vpn.ipsec等等:OpenWrt还集成部分具有专属特征 ...
37 --＞详解 OpenWRT系统框架基础软件模块之 procd
一.简介 OpenWrt路由操作系统的框架基础软件有很多,大部分是通用的软件模块,如 dhcp .dnsmasq.iproute.cmwp.vpn.ipsec等等:OpenWrt还集成部分具有专属特征 ...
pandas to_csv参数详解_【Python基础】Pandas数据可视化原来也这么厉害
一.可视化概述在Python中,常见的数据可视化库有3个: matplotlib:最常用的库,可以算作可视化的必备技能库,比较底层,api多,学起来不太容易. seaborn:是建构于matplot ...
python装饰器详解-Python装饰器基础概念与用法详解
本文实例讲述了Python装饰器基础概念与用法.分享给大家供大家参考,具体如下: 装饰器基础前面快速介绍了装饰器的语法,在这里,我们将深入装饰器内部工作机制,更详细更系统地介绍装饰器的内容,并学习自 ...
详解服务器异构计算FPGA基础知识
随着云计算,大数据和人工智能技术应用,单靠CPU已经无法满足各行各业的算力需求.海量数据分析.机器学习和边缘计算等场景需要计算架构多样化,需要不同的处理器架构和GPU,NPU和FPGA等异构计算技术协 ...
MP4文件格式详解——结构概述
MP4文件格式详解(ISO-14496-12/14) 一.基本概念 1. 文件,由许多Box和FullBox组成. 2. Box,每个Box由Header和Data组成. 3. FullBox,是Bo ...
java基础与案例开发详解 pdf下载_Java基础与案例开发详解（张孝祥） pdf_IT教程网...
资源名称:Java基础与案例开发详解(张孝祥) pdf 第1.2和3章介绍Java环境的安装配置,Java程序的开发过程和Java语言的基础语法. 第4章介绍数组和常用算法的相关知识. 第5章和6章介 ...

vue详解（一）概述和基础语法

文章目录

第一章 Vuejs 概述

1 什么是vuejs

2. 为什么要学习Vuejs

3.vuejs版本1和版本2的区别

4.MVC和MVVM的区别

第二章 Vue基础语法

2.1 第一个Vuejs案例

2.2 通过基础案例解析 MVVM

2.3 指令属性的基本使用

（1） v-cloak

（2）v-text

（3）v-html

（4） 插值表达式与v-text/v-html的区别

（5） v-bind

2.4 使用 v-on指令触发事件

1. v-on的基本使用

2.事件装饰符的使用

(1) .stop

(2) .prevent

(3) .capture

(4) .self

(5) . once

2.5 使用 v-model指令实现双向数据绑定

（1）v-model 的基本使用

（2）使用v-model实现简单的计算器功能

2.6 使用class样式

（1）class样式的使用

①传递一个class样式的数组，通过v-bind做样式的绑定。

② 通过三目（元）运算符操作以上数组

③ 使用对象（json）来表达以上三目（元）运算符的操作。

④以对象引用样式(实际项目中常用)

⑤通过以直接模型M直接做样式渲染

（2）style样式的补充

①引用样式对象

②引用样式对象的数组

2.7 v-for指令和v-if指令的应用

（1）v-for指令的基本使用

①遍历字符串数组

②遍历对象数组

③遍历对象的属性和属性值

④遍历整型数字

（2）v-for指令使用的注意事项

（3）v-if指令和v-show指令的使用和区别

① v-if的使用

②v-show的使用

简单的比较 v-if指令 和 v-show指令

②v-show的使用

简单的比较 v-if指令 和 v-show指令

vue详解（一）概述和基础语法相关推荐

最新文章

热门文章

（4）插值表达式与v-text/v-html的区别

简单的比较 v-if指令和 v-show指令

简单的比较 v-if指令和 v-show指令