Vue学习笔记一

Vue学习笔记

1、Vue基础指令

1.1 什么是Vue?

Vue.js 是一套响应式的 JavaScript 开发库。Vue.js 自问世以来所受关注度不断提高，在现在的市场上，Vue.js 是非常流行的 JavaScript 技术开发框架之一。

Vue是一款国产前端框架，它的作者尤雨溪（Evan You）是一位美籍华人，2014年2月，尤雨溪开源了一个前端开发库 Vue.js，2015年发布1.0.0版本，2016年4月发布2.0版本，目前，尤雨溪全职投入 Vue.js 的开发与维护，立志将 Vue.js 打造成与 Angular/React 平起平坐的世界顶级框架。

1.1.1 读音★★★

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

1.1.2 特点★★★

Vue是一个遵循MVVM模式的渐进式框架

Vue比较易学，体积更小，灵活，高效
Vue的本身只关注UI视图，可以更简单的导入Vue插件和第三方库
Vue通过Vue对象把数据和视图完全分离开来，对视图的改变无需在操作DOM元素，只需要操作对应的数据，即可改变对应的视图结构，也就是通过双向数据绑定把View层和Model层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。

1.2 数据渲染

1.2.1 Vue.js的引入★★★★★

前面我们说了Vue的一些特点，那下面我们来看一下我们如何具体使用Vue呢？
我们一般学一门语言，都会先从打印hello world学起，那么我们来看一下，Vue如何打印Hello World呢？

使用Vue我们有两种方法，一种方法类似于使用JQuery，我们可以引入Vue.js文件，还有一种方式是借助于npm来安装Vue的脚手架，做到真正的前后端分离，我们先来看一下第一种方式。

我们可以通过下面的方式引入Vue的文件

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

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1.2.2 数据绑定★★★★

上面我们说了如何导入Vue的js文件，下面我们来看一下我们如何在Vue中绑定数据，并把数据显示到页面上呢？

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

 <div id="app">
     <h3>{
  {message}}</h3>
 </div>

在script的标签中实例化一个Vue的对象，并定义绑定的数据

  new Vue({
   
            el: "#app",
            data:{
   
                message: "Hello World"
       			}
  				})

页面显示效果如下所示:

这样的话我们已经创建了一个Vue的应用，看起来像是渲染模版字符串一样，但是Vue在背后做了大量的工作，这样的话DOM和数据就建立绑定关系。

1.2.3 语法★★★★★

在上面的案例中我们把Hello World渲染到了页面上，那我们来看一下，这个语法结构是什么意思呢？

前端渲染

 <div id="app">
     <h3>{
  {message}}</h3>
 </div>

数据渲染到页面上，首先我们需要提供一个标签用于填充数据，这个标签我们定义了一个id属性为app,在标签中我们用小胡子插值表达式进行数据的填充。

Vue对象定义

定义完页面结构，我们需要在js中通过 new Vue()创建一个Vue的实例化对象
在构造函数中以对象的形式做一些配置，这些配置中比较重要的有el、data两个属性
el 定义可以渲染数据的DOM结构
data定义可以渲染到页面上的数据，跟DOM结构建立关联关系

通过上述语法结构，我们就简单完成用Vue打印Hello World的应用

1.3 指令

Vue的指令是带有特殊前缀v-的HTML特性，他可以绑定一个表达式，并且把一些特性作用到DOM结构上去。
下面我们来看一下常见的指令。

1.3.1 v-cloak★★★★★

v-cloak指令的作用防止页面加载时出现闪烁问题
那么为什么会有闪烁问题呢？代码加载的时候先加载HTML 把插值语法当做HTML内容加载到页面上当加载完js后才把插值语法替换掉所以我们会看到闪烁问题。
下面我们看一下案例，如何使用

<html>
	 <style type="text/css">
  /* 
    1、通过属性选择器 选择到 带有属性 v-cloak的标签  让他隐藏
 */
  [v-cloak]{
     
    /* 元素隐藏    */
    display: none;
  }
  </style>
<body>
  <div id="app">
    <!-- 2、 让带有插值 语法的   添加 v-cloak 属性 
         在 数据渲染完场之后，v-cloak 属性会被自动去除，
         v-cloak一旦移除也就是没有这个属性了  属性选择器就选择不到该标签
		 也就是对应的标签会变为可见
    -->
    <div  v-cloak  >{
  {msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
     
      //  el   指定元素 id 是 app 的元素  
      el: '#app',
      //  data  里面存储的是数据
      data: {
     
        msg: 'Hello Vue'
      }
    });
	</script>
</body>
</html>

1.3.2 v-text ★★★★

v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
如果数据中有HTML标签会将html标签一并输出
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

我们来看一下指令如何使用

	<div id="app">
    <!--  
		注意:在指令中不要写插值语法  直接写对应的变量名称 
        在 v-text 中 赋值的时候不要在写 插值语法
		一般属性中不加 {
   {}}  直接写 对应 的数据名 
	-->
    <p v-text="msg"></p>
    <p>
        <!-- Vue  中只有在标签的 内容中 才用插值语法 -->
        {
  {msg}}
    </p>
</div>

<script>
    new Vue({
     
        el: '#app',
        data: {
     
            msg: 'Hello Vue.js'
        }
    });

</script>

1.3.3 v-html ★★★★★

用法和v-text 相似但是他可以将HTML片段填充到标签中
可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

参照v-text,v-html,{ {}}打印的内容的区别如下:

	<div id="app">
　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
    
    <p>{
  {message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
    
　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
</div>
<script>
　　let app = new Vue({
     
　　el: "#app",
　　data: {
     
　　　　message: "<span>通过双括号绑定</span>",
　　　　html: "<span>html标签在渲染的时候被解析</span>",
　　　　text: "<span>html标签在渲染的时候被源码输出</span>",
　　}
 });
</script>

1.3.4 v-pre★★★★

显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程。
一些静态的内容不需要编译加这个指令可以加快渲染

<span v-pre>{
  { this will not be compiled }}</span>    
	<!--  显示的是{
   { this will not be compiled }}  -->
<span v-pre>{
  {msg}}</span>  
  <!--   即使data里面定义了msg这里仍然是显示的{
   {msg}} -->
<script>
    new Vue({
     
        el: '#app',
        data: {
     
            msg: 'Hello Vue.js'
        }
    });

</script>

1.3.5 v-once★★★

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】

<!-- 即使data里面定义了msg 后期我们修改了 仍然显示的是第一次data里面存储的数据即 Hello Vue.js  -->
     <span v-once>{
  { msg}}</span>    
<script>
    new Vue({
     
        el: '#app',
        data: {
     
            msg: 'Hello Vue.js'
        }
    });
</script>

1.3.6 v-on★★★★★

用来绑定事件的
形式如 v-on:事件名字比如 v-on:click 缩写为 @click

		<div id="app">
        <!-- 绑定点击事件数量进行自增或者自减 -->
        <button v-on:click="nums++">自增</button>
        <!-- 缩写 -->
        <button @click="nums--">自减</button>
        <p>数量:{
  {nums}}</p>
    </div>

    <script>
        new Vue({
     
            el: "#app",
            data:{
     
                message: "Hello World",
                nums:1,
            }
        })
    </script>

1.4 双向数据绑定

所谓双向数据绑定也就是:

当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化
最能体现双向数据绑定的质量就是 v-model

1.4.1 v-model★★★★★

v-model是一个指令，限制在 <input>、<select>、<textarea>、components中使用,
通过v-model绑定后，视图输入内容的变化会改变指令绑定的数据，数据发生变化也会直接作用到视图上，所以这个指令在提交表单数据时应用最多，无需在进行DOM查询获取表单的数据。

	<div id="app">
      <div>{
  {msg}}</div>
      <div>
          <!---当输入框中内容改变的时候，  页面上的msg  会自动更新-->
        <input type="text" v-model='msg'>
      </div>
  </div>
  <script>
        new Vue({
     
            el: "#app",
            data:{
     
                msg: "Hello Vue.js",
            }
        })
    </script>

1.5 MVVM

1.5.1 MVC★★★

MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范。

Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。
View（视图）应用程序中处理数据显示的部分。
Controller（控制器）是应用程序中处理用户交互的部分。

1.5.2 MVP★★

全称：Model-View-Presenter ；MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。

1.5.3 MVVM★★★★

而MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

Model(模型) 处理业务逻辑的操作
View(视图) 用于渲染数据的页面
VModel 负责视图和数据的双向数据绑定

1.6 v-on

1.6.1 事件的基本用法★★★★★

v-on用来绑定事件的
形式如：v-on:click 缩写为 @click;

		<div id="app">
       <div>{
  {nums}}</div>
       <div>{
  {message}}</div>

       <div>
           <!-- v-on给元素绑定事件 -->
           <!-- 指令中的数据无需加this或{
   {}} -->
           <button v-on:click="nums++">增加</button>
           <!-- v-on可以使用@替代 -->
           <button @click="nums--">减少</button>

           <!-- 如果逻辑比较复杂的话，我们无法用表达式实现，需要自己定义一个函数 -->
           <button v-on:click="reverse()">反转字符串</button>
       </div>
    </div>
    <script>
        new Vue({
     
            el: "#app",
            data:{
     
                message: "Hello World",
                nums:1,
            },
            methods:{
     
                reverse(){
     
                    this.message = this.message.split("").reverse().join("");
                }
            }
        })
    </script>

1.6.2 事件函数传参★★★★

html中绑定事件函数后，有时候我们需要针对不同的数据做出同样的逻辑操作，这个时候我们需要传递参数，那参数如何传递呢？

<body>
    <div id="app">
        <div>{
  {num}}</div>
        <div>
            <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
            <button v-on:click='handle1'>点击1</button>
            <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
                 并且事件对象的名称必须是$event 
            -->
            <button v-on:click='handle2(123, 456, $event)'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
     
            el: '#app',
            data: {
     
                num: 0
            },
            methods: {
     
                handle1: function(event) {
     
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1, event) {
     
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
 		</script>

1.7 修饰符

1.7.1 事件修饰符★★★★★

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符
修饰符是由点开头的指令后缀来表示的比如v-on:click.stop阻止事件冒泡

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联   即阻止冒泡也阻止默认事件 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

1.7.2 按键修饰符★★★★

在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

<!-- -当点击enter 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

<!--当点击enter或者space时  时调用 `vm.alertMe()`   -->
<input type="text" v-on:keyup.enter.space="alertMe" >

<script>
	var vm = new Vue({
     
        el:"#app",
        methods: {
     
              submit:function(){
     
              	console.log("你按了回车键")
              },
              alertMe:function(){
     
              	console.log("回车+空格键");
              },
        }
    })

</script>

常见的事件修饰符有哪些呢？
.enter => enter键
.tab => tab键
.delete (捕获“删除”和“退格”按键) => 删除键
.esc => 取消键
.space => 空格键
.up => 上
.down => 下
.left => 左
.right => 右

1.7.3 自定义事件修饰符★★★★★

但是有时候Vue内置的修饰符可能无法满足我们的要求，那么在Vue中可以通过config.keyCodes自定义按键修饰符别名。

	<div id="app">
    <!--预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法-->
    <input type="text" v-on:keydown.f5="prompt()">
</div>

<script>
    Vue.config.keyCodes.f5 = 116;
    
    let app = new Vue({
     
        el: '#app',
        methods: {
     
            prompt: function() {
     
                alert('我是 F5！');
            }
        }
    });
</script>

1.7.4 案例讲解-计算器★★★★

下面我们来简单做一个计算器的案例，简易版的

<style>
        #app{
     
            width: 600px;
            margin: 30px auto;
        }
</style>
<div id="app">
        <input type="text" class="inp" v-model="num1"/>
        <select v-model="flag">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">x</option>
            <option value="/">/</option>
        </select>
        <!--点击回车，进行计算-->
        <input type="text" class="inp" v-model="num2" @keyup.enter="sums"/>
        <!--点击按钮进行计算-->
        <button @click="sums">=</button>
        <span>{
  {sum1}}</span>
 </div>
 <script>
        new Vue({
     
            el:"#app",
            data:{
     
                num1:"",
                num2:"",
                sum1:"",
                flag:"+"
            },
            methods:{
     
                sums(){
     
                    this.sum1 = eval(this.num1+this.flag+this.num2);
                }
            }
        })
 </script>

1.8 v-bind

v-bind 指令被用来响应地更新 HTML 属性，主要是绑定属性。
v-bind:href 可以缩写为 :href;

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">

1.8.1 绑定对象★★★★★

我们可以给v-bind:class 一个对象，以动态地切换class。
注意：v-bind:class指令可以与普通的class特性共存
v-bind 中支持绑定一个对象，如果绑定的是一个对象则键为对应的类名，值为对应data中的数据

<style>
    .box{
     
        border:1px dashed #f0f;
    }
    .textColor{
     
        color:#f00;
        background-color:#eef;
    }
    .textSize{
     
        font-size:30px;
        font-weight:bold;
    }
</style>
<!-- 
	HTML最终渲染为 <ul class="box textColor textSize"></ul>
	注意：
		textColor，textSize  对应的渲染到页面上的CSS类名	
		isColor，isSize  对应vue data中的数据  如果为true 则对应的类名 渲染到页面上 
		当 isColor 和 isSize 变化时，class列表将相应的更新，
		例如，将isSize改成false，
		class列表将变为 <ul class="box textColor"></ul>
-->
<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>

<script>
var vm= new Vue({
     
    el:'.box',
    data:{
     
        isColor:true,
        isSize:true,
    }
})
</script>

1.8.2 绑定class★★★★

v-bind支持绑定一个数组，数组中的ClassA和ClassB对应为data中的数据。

<ul class="box" :class="[classA, classB]">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>
<script>
var vm= new Vue({
     
    el:'.box',
    data:{
     
        classA:‘textColor‘,
        classB:‘textSize‘
    }
})
</script>
<style>
    .box{
     
        border:1px dashed #f0f;
    }
    .textColor{
     
        color:#f00;
        background-color:#eef;
    }
    .textSize{
     
        font-size:30px;
        font-weight:bold;
    }
</style>

1.8.3 绑定对象和绑定数组的区别★★★★★

绑定对象的时候对象的属性即要渲染的类名对象的属性值对应的是 data 中的数据
绑定数组的时候数组里面存的是data 中的数据

1.8.4 绑定style★★★★

有些时候我们需要绑定内置样式，这个时候我们可以使用v-bind:style绑定属性。

<div v-bind:style="styleObject">绑定样式对象</div>'
<!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来)    -->
 <div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div>
 
<!--组语法可以将多个样式对象应用到同一个元素 -->
<div v-bind:style="[styleObj1, styleObj2]"></div>

<script>
	new Vue({
     
      el: '#app',
      data: {
     
        styleObject: {
     
          color: 'green',
          fontSize: '30px',
          background:'red'
        }，
        activeColor: 'green',
   		fontSize: "30px"
      },
      styleObj1: {
     
             color: 'red'
       },
       styleObj2: {
     
            fontSize: '30px'
       }

</script>

1.9 v-model底层原理分析

1.9.1 原理分析★★★

v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。

v-model的实现原理大致是，通过Object.defineProperty()方法来劫持Vue数据的属性，一旦监听到数据变化，则更新数据关联的虚拟DOM树，当然在模版编译的时候，为指令v-model绑定input事件，当输入的内容发生改变时，同步更新data中绑定的数据。

1.9.2 实现★★★

我们可以通过给input框绑定一个input事件来模拟实现数据的双向绑定的效果

<div id="app">
        <div>{
  {msg}}</div>

        <input type="text" v-on:input="change" :value="msg"/>
    </div>

    <script>
    var vm= new Vue({
     
        el:'#app',
        data:{
     
            msg:"hello js",
        },
        methods:{
     
            change(e){
     
                this.msg = e.target.value;
            }
        }
    })
    </script>

1.10 分支结构

在实际的应用中，我们肯定会遇到通过用户操作，控制某些DOM结构的显示和隐藏的操作，这种操作我们在原来的js中时通过直接DOM来完成，在Vue中我们通过v-if或v-show指令来控制，那具体怎么使用呢？我们来具体看一下吧。

1.10.1 v-if使用场景★★★★

多个元素通过条件判断展示或者隐藏某个元素。或者多个元素
进行两个视图之间的切换

<div id="app">
        <!--  判断是否加载，如果为真，就加载，否则不加载-->
        <span v-if="flag">
           如果flag为true则显示,false不显示!
        </span>
</div>

<script>
    var vm = new Vue({
     
        el:"#app",
        data:{
     
            flag:true
        }
    })
</script>

也可以使用 v-if v-else-if v-else语句联合使用

	<div v-if="type === 'A'">
       A
    </div>
  <!-- v-else-if紧跟在v-if或v-else-if之后   表示v-if条件不成立时执行-->
    <div v-else-if="type === 'B'">
       B
    </div>
    <div v-else-if="type === 'C'">
       C
    </div>
  <!-- v-else紧跟在v-if或v-else-if之后-->
    <div v-else>
       Not A/B/C
    </div>

<script>
    new Vue({
     
      el: '#app',
      data: {
     
        type: 'C'
      }
    })
</script>

1.10.2 v-if和v-show的区别★★★★★

v-show本质就是标签display设置为none，控制隐藏
- v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
v-if是动态的向DOM树内添加或者删除DOM元素
- v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

2、Vue选项

2.1循环结构v-for

2.1.1遍历数组★★★★★

v-for = “(item,index) in 数组名”
Item 代表数组中的每一项 index 代表索引

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {
   {
    item.message }}
  </li>
</ul>
var example1 = new Vue({
   
  el: '#example-1',
  data: {
   
    items: [
      {
    message: 'Foo' },
      {
    message: 'Bar' }
    ]
  }
})

2.1.2遍历对象★★★★

v-for = “(item,key,index) in 对象名”
Item 代表对象中的每一项
Key 代表对应的键名
Index 代表对应的索引

2.1.3key的作用★★★★★

key来给每个节点做一个唯一标识
key的作用主要是为了高效的更新虚拟DOM

2.2案例讲解-选项卡

2.2.1HTML结构★★★

<div id="app">
  <div class="tab">
    <!--  tab栏  -->
    <ul>
      <li class="active">apple</li>
      <li class="">orange</li>
      <li class="">lemon</li>
    </ul>
    <!--  对应显示的图片 -->
    <div class="current"><img src="img/apple.png"></div>
    <div class=""><img src="img/orange.png"></div>
    <div class=""><img src="img/lemon.png"></div>
  </div>
</div>

2.2.2数据准备★★★★

list: [{
  id: 1,
  title: 'apple',
  path: 'img/apple.png'
}, {
  id: 2,
  title: 'orange',
  path: 'img/orange.png'
}, {
  id: 3,
  title: 'lemon',
  path: 'img/lemon.png'
}]

2.2.3v-for数据渲染★★★★

把tab栏中的数替换到页面上

把 data 中 title 利用 v-for 循环渲染到页面上
把 data 中 path利用 v-for 循环渲染到页面上

<div id="app">
  <div class="tab">  
    <ul>
      <!--  
1、绑定key的作用 提高Vue的性能 
2、 key 需要是唯一的标识 所以需要使用id， 也可以使用index ，
index 也是唯一的 
3、 item 是 数组中对应的每一项  
4、 index 是 每一项的 索引
-->
      <li :key='item.id' v-for='(item,index) in list'>{
  {item.title}}</li>
    </ul>
    <div  :key='item.id' v-for='(item, index) in list'>
      <!-- :  是 v-bind 的简写   绑定属性使用 v-bind -->
      <img :src="item.path">
    </div>
  </div>
</div>
<script>
  new  Vue({
     
    //  指定 操作元素 是 id 为app 的 
    el: '#app',
    data: {
     
      list: [{
     
        id: 1,
        title: 'apple',
        path: 'img/apple.png'
      }, {
     
        id: 2,
        title: 'orange',
        path: 'img/orange.png'
      }, {
     
        id: 3,
        title: 'lemon',
        path: 'img/lemon.png'
      }]
    }
  })
</script>

2.2.4添加点击事件★★★★

4.1 、让默认的第一项tab栏高亮
tab栏高亮通过添加类名active 来实现（CSS active 的样式已经提前写好）
- 在data 中定义一个默认的索引 currentIndex 为 0
- 给第一个li 添加 active 的类名
  - 通过动态绑定class 来实现第一个li 的索引为 0 和 currentIndex 的值刚好相等
  - currentIndex === index 如果相等则添加类名 active 否则添加空类名
4.2 、让默认的第一项tab栏对应的div 显示
- 实现思路和第一个 tab 实现思路一样只不过这里控制第一个div 显示的类名是 curren

<ul>
  <!-- 动态绑定class   有 active   类名高亮  无 active   不高亮-->
  <li  :class='currentIndex==index?"active":""'
      :key='item.id' v-for='(item,index) in list'
      >{
  {item.title}}</li>
</ul>
<!-- 动态绑定class   有 current  类名显示  无 current  隐藏-->
<div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>
  <!-- :  是 v-bind 的简写   绑定属性使用 v-bind -->
  <img :src="item.path">
</div>

<script>
  new  Vue({
  el: '#app',
  data: {
    currentIndex: 0, // 选项卡当前的索引  默认为 0  
    list: [{
      id: 1,
      title: 'apple',
      path: 'img/apple.png'
    }, {
      id: 2,
      title: 'orange',
      path: 'img/orange.png'
    }, {
      id: 3,
      title: 'lemon',
      path: 'img/lemon.png'
    }]
  }
})
</script>

2.3表单

2.3.1表单基本操作★★★★

单选框如何实现单选？
1、两个单选框需要同时通过v-model 双向绑定一个值
2、每一个单选框必须要有value属性且value 值不能一样
3、当某一个单选框选中的时候 v-model 会将当前的 value值改变 data 中的数据

实现代码

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {
   {
    picked }}</span>
</div>

new Vue({
   
  el: '#example-4',
  data: {
   
    picked: ''
  }
})

运行效果

复选框如何实现复选
1、复选框需要同时通过v-model 双向绑定一个值
2、每一个复选框必须要有value属性且value 值不能一样
3、当某一个单选框选中的时候 v-model 会将当前的 value值改变 data 中的数据

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {
   {
    checkedNames }}</span>

new Vue({
   
  el: '...',
  data: {
   
    checkedNames: []
  }
})

2.3.2表单修饰符★★★★

表单域修饰符有哪些
.trim 自动过滤用户输入的首尾空白字符 - 只能去掉首尾的不能去除中间的空格
lazy 将input事件切换成change事件 - .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
.number 转换为数值
注意点：当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值

2.4自定义指令

2.4.1自定义指令有什么用★★★★★

内置指令不能满足我们特殊的需求
Vue允许我们自定义指令

2.4.2Vue.directive注册全局自定义指令★★★★★

<!-- 
  使用自定义的指令，只需在对用的元素中，加上'v-'的前缀形成类似于内部指令'v-if'，'v-text'的形式。 
-->
<input type="text" v-focus>

<script>
// 注意点： 
//   1、 在自定义指令中  如果以驼峰命名的方式定义 如  Vue.directive('focusA',function(){}) 
//   2、 在HTML中使用的时候 只能通过 v-focus-a 来使用 

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
     
    // 当绑定元素插入到 DOM 中。 其中 el为dom元素
    inserted: function (el) {
     
        // 聚焦元素
        el.focus();
  }
});
new Vue({
     
　　el:'#app'
});
</script>

2.4.3Vue.directive注册全局自定义指令带参数★★★★

 <input type="text" v-color='msg'>
 <script type