文章目录

一、Vue:

1. vue 是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架;
vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合;
渐进式: 声明式渲染 -> 组件系统 -> 客户端路由 -> 集中式状态管理 -> 项目构建
官网: https://cn.vuejs.org/

2. Vue基本使用

<head>
    <title>01_hello VUE</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
    </div>
    
    <script>
        // Vue的基本使用步骤:
        // 1. 需要提供标签用于填充数据;
        // 2. 引入vue.js库文件;
        // 3. 可以使用vue的语法做功能;
        // 4. 把vue提供的数据填充到标签里面;
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello Vue"
            }
        })
    </script>
</body>

实例参数分析:
- el: 元素的挂载位置(值可以使css选择器或DOM元素);
- data: 模型数据(值是一个对象)
插值表达式用法:
- 将数据填充到html标签中;
- 插值表达式支持基本的计算操作;

Vue代码运行原理分析:

3. :使用Vue将helloworld 渲染到页面上:

3.1 模板语法概述:

如何理解前端渲染:
把数据填充到HTML标签中

前端渲染方式:

原生js拼接字符串;
使用前端模板引擎;
使用vue特有的模板语法;

vue模板语法:

插值表达式;
指令;
事件绑定;
属性绑定;
分支循环结构;

二、指令：

1. 什么是指令：

本质就是自定义属性
Vue中指定都是以 v- 开头；

2. v-cloak 防止闪动：

防止页面加载时出现闪烁问题：

 <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>

3. 渲染:

3.1 v-text 将数据填充到标签中:

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

<head>
    <title>01_hello VUE</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <div v-text="msg"></div>
        <!-- 注意:在指令中不要写插值语法  直接写对应的变量名称 
        在 v-text 中 赋值的时候不要在写 插值语法
		一般属性中不加 {{}}  直接写 对应 的数据名  -->
    </div>
    
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Hello Vue"
            }
        })
    </script>
</body>

3.2 v-html 将HTML片段填充到标签中:

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

3.3 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>

4. 数据响应式:

4.1 如何理解数据响应式:

html5中的响应式(屏幕尺寸的变化导致样式的变化);
数据的响应式(数据的变化导致页面内容的变化);

4.2 什么是数据绑定;

数据绑定: 将数据填充到标签中;

4.3 v-once: 只编译一次

显示内容之后不再具有响应式;

<div v-once>{{info}}</div>

5. 双向数据绑定:

当数据发生变化的时候，视图也就发生变化;
当视图发生变化的时候，数据也会跟着同步变化;

5.1 v-model:

v-model是一个指令，限制在 <input>、<select>、<textarea>、<components>中使用:

<div id="app">
     <div>{{msg}}</div>
     <div>
         当输入框中内容改变的时候，  页面上的msg  会自动更新
       <input type="text" v-model='msg'>
     </div>
 </div>

5.2 mvvm

MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel;
m model
- 数据层 Vue 中数据层都放在 data 里面
v view 视图
- Vue 中 view 即 HTML页面
vm （view-model）控制器将数据和视图层建立联系
- vm 即 Vue 的实例就是 vm

三、事件绑定:

1. v-on

1.1 v-on基本用法:

用来绑定事件的

<button v-on:click='num++'>点击</button>

形式如：v-on:click 缩写为 @click;

<button @click='num++'>点击</button>

1.2 v-on事件函数调用:

直接绑定函数名称:

<button @click='handle1'>点击1</button>

调用函数:

<button @click='handle2()'>点击2</button>

事件函数传参:

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数;
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递, 并且事件对象的名称必须是$event;

<button v-on:click='handle2(123, 456, $event)'>点击2</button>

代码演示:

<head>
    <title>v_on</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <button v-on:click='handle1'>点击1</button>
            <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>
</body>

1.3 事件修饰符:

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

<!-- 阻止单击事件继续传播 -->
<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.4 按键修饰符:

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

修饰符	表示
.enter	enter键
.tab	tab键
.delete (捕获“删除”和“退格”按键)	删除键
.esc	取消键
.space	空格键
.up	上
.down	下
.left	左
.right	右

<!-- 只有在 `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(){},
              alertMe:function(){},
        }
    })
</script>

1.4 自定义按键修饰符别名

在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.5 案例:简单计算器:

需求:
实现简单的加法计算, 分别输入数值a和b, 点击计算, 结果显示在下面

分析:

通过v-model指令实现数值a和b的绑定;
给计算按钮绑定事件, 实现计算逻辑;
将计算结果绑定到对应位置;

实现:

<head>
    <title>简单计算器</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>简单计算器</h1>
        <div>
            数值A:
            <input type="text" v-model='a'>
        </div>
        <div>
            数值B:
            <input type="text"  v-model='b'>
        </div>
        <button @click="handleAdd">计算</button>
        <div>
            计算结果:
            <span  v-text='r'></span>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                a:0,
                b:0,
                r:0
            },
            methods: {
                handleAdd: function() {
                    this.r = parseFloat(this.a) + parseFloat(this.b);
                }
            }
        });
    </script>
</body>

四、属性绑定:

1. v-bind

v-bind 指令被用来响应地更新 HTML 属性
v-bind:href 可以缩写为 :href;

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

<!-- 缩写 -->
<img :src="imageSrc">

2. v-model的底层实现原理分析:

<input v-bind:value="msg" v-on:input="msg=$event.target.value">

五、样式绑定:

1. 绑定对象:

可以给v-bind:class 一个对象，以动态地切换class。
注意：v-bind:class指令可以与普通的class特性共存

1.1 v-bind 中支持绑定一个对象

如果绑定的是一个对象则键为对应的类名值为对应data中的数据 :

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>
  <div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div>

<sript>
var vm= new Vue({
    el:'.box',
    data:{
        isColor:true,
        isSize:true，
    	activeColor:"red",
        activeSize:"25px",
    }
})
</sript>
<style>

    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>

1.2 v-bind 中支持绑定一个数组:

v-bind 中支持绑定一个数组数组中classA和 classB 对应为data中的数据

这里的classA 对用data 中的 classA
这里的classB 对用data 中的 classB

<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.3 样式绑定相关语法细节:

对象绑定和数组绑定可以结合使用;
class绑定的值可以简化操作;
默认的class如何处理;

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active {
      border: 1px solid red;
      width: 100px;
      height: 100px;
    }
    .error {
      background-color: orange;
    }
    .test {
      color: blue;
    }
    .base {
      font-size: 28px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>
    <div v-bind:class='arrClasses'></div>
    <div v-bind:class='objClasses'></div>
    <div class="base" v-bind:class='objClasses'></div>

    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        activeClass: 'active',
        errorClass: 'error',
        isTest: true,
        arrClasses: ['active','error'],
        objClasses: {
          active: true,
          error: true
        }
      },
      methods: {
        handle: function(){
          // this.isTest = false;
          this.objClasses.error = false;
        }
      }
    });
  </script>
</body>

1.3 绑定对象和绑定数组的区别

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

2. 绑定style:

CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来);
组语法可以将多个样式对象应用到同一个元素;

<body>
  <div id="app">
    <div v-bind:style='{border: borderStyle, width: widthStyle, height: heightStyle}'></div>
    <div v-bind:style='objStyles'></div>
    <div v-bind:style='[objStyles, overrideStyles]'></div>
    <button v-on:click='handle'>切换</button>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      样式绑定之内联样式Style：
      
    */
    var vm = new Vue({
      el: '#app',
      data: {
        borderStyle: '1px solid blue',
        widthStyle: '100px',
        heightStyle: '200px',
        objStyles: {
          border: '1px solid green',
          width: '200px',
          height: '100px'
        },
        overrideStyles: {
          border: '5px solid orange',
          backgroundColor: 'blue'
        }
      },
      methods: {
        handle: function(){
          this.heightStyle = '100px';
          this.objStyles.width = '100px';
        }
      }
    });
  </script>
</body>

六、分支/循环结构:

1. 分支结构:

1.1 v-if 使用场景

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

<head>
    <title>分支结构</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if="score>=90">优秀</div>
        <div v-else-if="score>=75">一般</div>
        <div v-else-if="score>=60">及格</div>
        <div v-else>不及格</div>

        <div :style="objStyle" v-show="flag"></div>
        <button @click="handle">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                score: 50,
                flag: true,
                objStyle: {
                    width: "100px",
                    height: "100px",
                    border: "1px solid red"
                }
            },
            methods: {
                handle: function() {
                    this.flag = !this.flag;
                }
            }
        })
    </script>
</script>
</body>

1.2 v-show 和 v-if的区别

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

2. 循环结构:

2.1 v-for遍历数组:

<li v-for='item in list'> {{item}} </li>
<li v-for='(item, index) in list'> {{item}} + "-----" + {{index}}</li>

<ul id="example-1">
   <!-- 循环结构-遍历数组  
	item 是自己定义的一个名字  代表数组里面的每一项  
	items对应的是 data中的数组-->
  <li v-for="item in items">
    {{ item.message }}
  </li> 

</ul>
<script>
 new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]，
   
  }
})
</script>

不推荐同时使用 v-if 和 v-for;
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级;

<head>
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
    </div>

    <script>
     new Vue({
      el: '#app',
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ],
        obj: {
            uname: 'zhangsan',
            age: 13,
            gender: 'female'
        }
      }
    })
    </script>
</body>

2.2 key的作用:

帮助vue区分不同的元素, 从而提高性能

<li :key='item:id' v-for='(item, index) in list '>{{item}} + '-----' + {{index}}</li>

七、案例: Tab选项卡:

1. 需求:

2. 实现步骤:

实现静态UI效果;
- 用传统的方式实现标签结构和样式;
基于数据重构UI效果:
- 将静态的结构和样式重构为基于Vue模板语法的形式;
- 处理事件绑定和js控制逻辑;
声明式编程:
- 模板的结构和最终显示的效果基本一致;

3. 实现过程:

3.1 静态ui:

3.2 把数据渲染到页面:

把tab栏中的数替换到页面上:
- 把 data 中 title 利用 v-for 循环渲染到页面上;
- 把 data 中 path利用 v-for 循环渲染到页面上;

3.3 给每一个tab栏添加事件,并让选中的高亮:

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

3.4 点击每一个tab栏当前的高亮其他的取消高亮

给每一个li添加点击事件;
让当前的索引 index 和当前 currentIndex 的值进项比较;
如果相等则当前li 添加active 类名当前的 li 高亮当前对应索引的 img 添加 current 当前img 显示其他隐藏;

4. 实现:

<head>
    <title>tab栏切换</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .tab {
            margin: 100px auto; 
            width: 800px;
        }
        .tab ul {
        overflow: hidden;
        }
        .tab ul li{
            /* 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制 */
            box-sizing: border-box;
            padding: 0;
            float: left;
            width: 100px;
            height: 45px;
            list-style: none;
            text-align: center;
            line-height: 45px;
            border-top: 1px solid blue;
            border-right: 1px solid blue;
            cursor: pointer;
        }
        .tab ul li:first-child {
            border-left: 1px solid blue;
        }
        .tab ul li.active {
            background-color: orange;
        }
        .tab div {
            width: 540px;
            height: 304px;
            overflow: hidden;
            text-align: center;
            font-size: 30px;
            line-height: 310px;
            border: 1px solid blue;
            border-top: 0px;
        }
        .tab div img {
            display: none;
        }
        .tab div img.current {
            display: block;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="tab">
            <ul>
                <li @click='change(index)' :class='currentIndex==index ? "active" : ""' :key='item.id' v-for='(item, index) in imgList'>{{item.title}}</li>
            </ul>
            <div>
                <img :class='currentIndex==index ? "current" : ""' :key='item.id' v-for='(item, index) in imgList' :src="item.path">
            </div>
        </div>
    </div>

    <script src="../../vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                currentIndex: 0,
                imgList: [
                    {
                        id:1,
                        title: '图片',
                        path: './images/1.jpg'
                    },
                    {
                        id:2,
                        title: '图片二',
                        path: './images/2.jpg'
                    },
                    {
                        id:3,
                        title: '图片三',
                        path: './images/3.jpg'
                    }
                ]
            },
            methods: {
                change: function(index) {
                    this.currentIndex = index;
                }
            }
        })
    </script>
</body>

前端学习之VUE基础一：什么是Vue、指令、事件/样式/属性绑定、分支/循环结构