1.Vue.js

1.1Vue.js介绍

1.1.1 Vue.js是什么?

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计 为可以自底向上逐层应用.
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一 方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。

1.1.2 为什么使用Vue?

  1. 声明式渲染: 前后端分离是未来趋势
  2. 渐进式框架: 适用于各种业务需求
  3. 简单易学: 国人开发,中文文档,不存在语言障碍,易于理解和学习

1.2 Vue.js 基础

1.2.1 Vue.js的使用

  1. 在html页面使用script引入vue.js的库即可使用。
远程CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
本地
<script src="vue.min.js"></script>
2. Vue-CLI脚手架:使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形

1.2.2 入门程序

创建一个vuetest目录, 并且在目录下创建 01_vue入门程序.html 文件.
代码编写步骤：
1、定义html，引入vue.js
2、定义app div，此区域作为vue的接管区域
3、定义Vue实例，接管app区域。
4、定义model（数据对象）
5、在app中展示数据

<!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>
    <script src="../js/vue.js" ></script>
</head>
<body>
     <!-- 2. 定义t1 div，此区域作为vue的接管区域 -->
    <div id="t1">
     <!-- {{}} 双括号是VUE中的插值表达式,将表达式的值输出到HTML页面 -->
        <h2>{{message}}</h2>
        <span>{{school.id}}:{{school.name}}</span>
        <ul>
            <li>{{teacher[0].id}}:{{teacher[0].name}}</li>
             <li>{{teacher[1].id}}:{{teacher[1].name}}</li>
        </ul>
    </div>

</body>
  
<script>
    //3. 创建vue实例
  var VM = new Vue({
    var obj = new Vue({
         //定义 Vue实例挂载的元素节点,表示vue接管该div
        el: "#t1",
        //4.定义model模型数据对象
        data: {
            message: "hello",
            school: {"id": 1,"name": "希望小学", },
            teacher: [{"id":1 , "name": "张三"},{"id": 2 , "name":"王五"} ]
        }
    });
    
</script>
</html>

效果展示：

Vue基础知识总结(一)：基础篇_html

  1. {{}}:差值表达式

插值表达式的作用：
通常用来获取Vue实例中定义的数据（data）
属性节点中不能够使用插值表达式

  1. el:挂载点
  2. el的作用？

定义Vue实例挂载的元素节点，表示Vue接管该区域

  1. Vue的作用范围？

Vue会管理el选项命中的元素，及其内部元素

  1. el选择挂载点时，是否可以使用其他选择器？

可以，但是建议使用ID选择器

  1. 是否可以设置其他的dom元素进行关联？

可以，但是建议选择DIV，不能使用HTML和Body标签

  1. data：数据对象
  2. Vue中用到的数据定义在data中
  3. data中可以写复杂类型
  4. 渲染复杂类型数据的时候，遵守js语法

1.2.3 声明式渲染的好处

Vue中声明式渲染，简单理解就是我们声明数据，Vue帮我们将数据渲染到HTML

1.2.4 Vue常用指令

根据官网的介绍，指令是带有v-前缀的特殊属性。通过指令来操作DOM元素

1. v-text指令：

作用：获取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>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-text 获取data数据,设置标签内容,会覆盖之前的内容体-->
        <h2 v-text="msg">天天好心情</h2> 
        <!-- 使用插值表达式，不会覆盖 -->
        <h2>阿红:{{msg}}</h2>
        <!-- 拼接字符串 -->
        <h2 v-text="msg+1"></h2>
        <h2 v-text="msg+'abc' "></h2>
    </div>
</body>
<script>
    var obj = new Vue({
        el: "#app",
        data: {
            "msg": "学习vue的第一天！"
        }
    });
</script>
</html>

效果展示：Vue基础知识总结(一)：基础篇_vue_02

2. v-html指令

作用：设置元素的innerHTML（可以向元素中写入新的标签）
代码实例：

<!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>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 普通获取文本 -->
        <h2>{{msg}}</h2>
        <h2 v-html="msg"></h2>
        <!-- 设置元素的innerHTML -->
            <!--  v-text只能获取该值 -->
        <h2 v-text="url"></h2>
            <!-- v-html内联html标签 -->
        <h2 v-html="url"></h2>

    </div>
</body>
<script>
    var obj = new Vue({
        el: "#app",
        data:{
            "msg": "java程序员",
            "url": "<a href='https://www.baidu.com'>百度一下</a>",
        } ,
    })
</script>
</html>

效果展示：Vue基础知识总结(一)：基础篇_vue_03

3. v-on指令

作用：为袁术绑定事件，比如：v-on:click，可以简写为@click="方法名"
绑定的方法定义在vue实例的methods属性中。

代码实例：

<!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>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 使用v-on 绑定click点击事件 -->
        <input type="button" value="点击按钮" v-on:click="show1" />
        <!--简写方式： 使用@符号也可以绑定 -->
        <input type="button" value="点击按钮2" @click="show2" />
        <!-- 双击事件 -->
        <input type="button" value="双击事件" @dblclick="show3" />

        <h2>{{food}}</h2>
    </div>

</body>
<script>
    var obj =  new Vue({
        el:"#app",
        data: {
            "food": "麻婆豆腐",
        },
        methods: {
            show1:function() {
                alert("今天不学习，明天变垃圾！");
            },
            show2:function(){
                alert("天天好心情");
            },
            show3:function(){
                console.log(this.food);
                this.food += "真好吃";
            },
        },
    });
</script>
</html>

效果展示：Vue基础知识总结(一)：基础篇_css_04

案例总结：

  • 创建VUE实例时: el(挂载点) , data(数据) , methods(方法)
  • v-on 指令的作用是绑定事件,简写为 @
  • 方法中使用this关键字,获取data中的数据
  • v-text 与 {{}} 的作用都是用来 设置元素的文本值
4.v-show指令

作用：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>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app" >
        <input type="button" value="切换" @click="change" />
        <img v-show="flag" src="../img/car.gif">
    </div>
</body>
    <script>
        var obj = new Vue({
            el: "#app",
            data: {
                flag: true,
            },
            methods:{
                change:function(){
                    this.flag = !this.flag;
                },
            }
        });
    </script>
</html>

v-show指令总结

  • 原理是修改元素的display属性，实现显示或者隐藏
  • 指令后面导入内容，最终会解析为布尔值
  • 值为true显示，为false则隐藏
  • 数据改变之后，显示的状态会同步更新
5. v-if 指令

作用：根据表达式的真假，切换元素的显示和隐藏（操纵dom元素）

代码实例：

<!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>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="切换" v-on:click="changeShow" />
        <img v-if="isShow" src="../img/car.gif"/>
    </div>
</body>
    <script>
        var obj = new Vue({
            el: "#app",
            data: {
                isShow: true,
            },
            methods:{
                changeShow: function(){
                    this.isShow = !this.isShow;
                },
            }
        });
    </script>
</html>

v-if="isShow"就是根据值来删除和增加dom元素

  • 如该下图就是动态的删除img元素。

Vue基础知识总结(一)：基础篇_router_05

v-if指令总结

  • v-if指令的作用：根据表达式的真假切换元素的显示状态
  • 本质就是通过dom元素，来切换显示状态
  • 表达式为真，dom元素存在，为假从dom树种删除
  • 频繁切换使用v-show，反之使用v-if
6. v-bind指令

作用：设置元素的属性（比如：src,title,class）

代码实例：

<!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>
    <script src="../js/vue.js" ></script>
</head>
<body>
    <div id="app">
        <img src="../img/lagou.jpg" />
        <!-- 使用v-bind设置src属性值 -->
        <img v-bind:src="imgSrc" alt="" />
         <!-- 简写 设置title -->
        <img :src="imgSrc" :title="imgTitle" />
        <!-- 设置class -->
        <div :style="{fontSize: size + 'px'}">v-bind指令</div>
    </div>
</body>
    <script>
        var obj = new Vue({
            el: "#app",
            data: {
                imgSrc: "../img/lagou.jpg",
                imgTitle: "我好看吗",
                size: 50,
            },
        });
    </script>
</html>

v-bind指令总结：

  • v-bind指令的作用是：为元素绑定属性
  • 完整写法v-bind:属性名，可以简写:属性名
7. v-for指令

作用：根据数据生成列表结构

  • 相当于java里的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>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
        <input type="button" value="增加人员信息" v-on:click="add" />
        <input type="button" value="删除人员信息" v-on:click="remove" />
      <h2 v-for="item in city">城市:{{item}}</h2>
      <h2 v-for="(item,index) in city">序号:{{index}} 城市:{{item}}</h2>
      <ul>
        <li v-for="(item,index) in people">{{index}}编号：{{item.num}}姓名：{{item.name}}年龄：{{item.age}}</li>
      </ul>
    </div>
  </body>
  <script>
    var obj = new Vue({
      el: "#app",
      data: {
        city: ["上海", "北京", "贵州"],
        people: [
          { num: "007", name: "小李飞刀", age: "22" },
          { num: "003", name: "马艳三", age: "18" },
          { num: "010", name: "王菲", age: "33" },
        ],
      },
      methods: {
          add:function(){
              //push 添加
              this.people.push({ num: "001", name: "马云", age: "52" })
          },
          remove:function(){
              this.people.shift();//从第一个元素开始删除
          }
      }
    });
  </script>
</html>

效果展示：Vue基础知识总结(一)：基础篇_css_06

  • v-for 指令的作用: 根据数据生成列表结构
  • 数组经常和 v-for结合使用,数组有两个常用方法:
  • push() 向数组末尾添加一个或多个元素
  • shift() 把数组中的第一个元素删除
  • 语法是: (item,index) in 数据
  • item和index 可以结合其他指令一起使用
  • 数组的长度变化,会同步更新到页面上,是响应式的
8. v-on指令的补充说明
  1. 传递自定义参数 : 函数调用传参
  2. 事件修饰符: 对事件触发的方式进行限制

代码示例：

<!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>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
         <!-- 函数传参 -->
        <input type="button" value="带参按钮" v-on:click="show(700,'老铁666')" />
        <!-- 事件修饰符 ：只要input输入就触发函数-->
        <input type="text" @keyup="hi" />
        <!-- 时间修饰符：只有按enter键才触发函数 -->
        <input type="text" @keyup.enter="hi2" /> 
    </div>
</body>
<script>
    var obj = new Vue({
        el: "#app",
        data: {

        },
        methods: {
           show:function(p1,p2){
            console.log(p1);
            console.log(p2);
           },
           hi:function(){
            alert("就是这样的！");
           },
           hi2:function(){
               alert("我按了enter键！");
           }
        },
        
    });
</script>
</html>

效果展示：Vue基础知识总结(一)：基础篇_vue.js_07总结

  • 事件绑定方法,可以传入自定义参数
  • 定义方法时,需要定义形参,来接收实际的参数
  • 事件的后面跟上 .修饰符 可以对事件进行限制
  • .enter 可以限制触发的按键为回车
  • 事件修饰符有许多 使用时可以查询文档