Vue 基础入门

Demo_Null

发布于 2020-09-29 23:27:39

7210

发布于 2020-09-29 23:27:39

文章被收录于专栏：Java 学习

1.1 Vue 介绍

1.1.1 作者介绍

1.1.2 Vue 介绍

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。 ♞ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 ♞ Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 ♞ Vue 借鉴了 Angular 的模板和双向绑定技术；借鉴了 react 的组件化和虚拟 DOM 技术。 ♞ MVVM 模式是 Model-View-ViewModel 的缩写，Model 代表数据模型，定义数据操作的业务逻辑，View 代表视图层，负责将数据模型渲染到页面上，ViewModel 通过双向绑定把 View 和 Model 进行同步交互，不需要手动操作DOM 的一种设计思想

1.1.3. MVVM 介绍

M 即 Model，模型，包括数据和一些基本操作； V 即 View，视图，页面渲染结果； VM 即 View-Model，模型与视图间的双向操作(无需开发人员干涉) 在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到 View 中。而后当用户操作视图，我们还需要通过 DOM 获取 View 中的数据，然后同步到 Model 中。而 MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model 和 View 之间是如何互相影响的, 只要我们 Model 发生了改变，View 上自然就会表现出来。当用户修改了 View，Model 中的数据也会跟着改变。把开发人员从繁琐的 DOM 操作中解放出来，把关注点放在如何操作 Model 上。

1.2 快速使用

1.2.1. Vue 起步

创建一个 HTML 文件，引入 vue.js，注意：使用自闭合标签可能会出现问题

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

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

1.2.3 声明式渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个程序</title>   
    <script src="vue.js" ></script>
</head>
    <body>
        <div id="app">
        	<!-- 插值表达式 -->
            <h2>姓名：{{name}}，年龄：{{age}}</h2>
        </div>

        <script>
                // 创建vue实例
                var app = new Vue({
                    el:"#app",  // el即element，该vue实例要渲染的页面元素
                    data:{      // 渲染页面需要的数据
                        name : "王大锤",
                        age : 250
                    }
                });

        </script>
    </body>
</html>

此时我们已经成功创建了一个 Vue 应用，打开 HTML 页面会显示 Hello Vue! 。这就是声明式渲染，Vue 的核心是：采用简洁的模板语法声明式地将数据渲染进 DOM 的系统。这里的核心思想就是没有繁琐的 DOM 操作，例如 jQuery 中，我们需要先找到 div 节点，获取到 DOM 对象，然后进行一系列的节点操作。

1.3 Vue实例

1.3.1 创建Vue实例

var app = new Vue({		// Vue实例
    el:"#app",  		// Vue可以对id为app的div元素进行渲染,该div之外的无法控制
     data:{     		// 数据，存放可能会用到的数据
         name : "王大锤",
         age : 250
     },
     methods: {			// 方法，声明可能会用到的方法
         test() {
             console.log("测试方法");
         }
     }
 });

1.3.2 双向绑定

单向绑定非常简单，就是把 Model 绑定到 View，当我们用 JavaScript 代码更新 Model 时，View 就会自动更新。有单向绑定，就有双向绑定。如果用户更新了 View，Model 的数据也自动被更新了，这种情况就是双向绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个程序</title>   
    <script src="vue.js" ></script>
</head>
    <body>
        <div id="app">
            请输入年龄：<input type="text" v-model="age">
            <h2>姓名：{{name}}，年龄：{{age}}</h2>
        </div>

        <script>
                var app = new Vue({
                    el:"#app",  
                    data:{     
                        name : "王大锤",
                        age : 250
                    }
                });

        </script>
    </body>
</html>

1.3.3 生命周期

beforeCreated：在 Vue 实例化之前调用，也可以将他理解为初始化函数。在 Vue1.0 时，这个函数的名字就是 init。 created：在创建实例之后进行调用。

beforeMount：页面加载完成，没有渲染。此时页面还是 {{name}} mounted：他的功能就是：在 dom 文档渲染完毕之后将要执行的函数，该函数在 Vue1.0 版本中名字为 compiled。可以将他理解为原生 js 中的 window.οnlοad=function({.,.}) ,所以也可以理解为 jquery 中的 $(document).ready(function(){….})。此时页面中的 {{name}} 已被渲染

beforeDestroy：该函数将在销毁实例前进行调用。 destroyed：改函数将在销毁实例后进行调用。

beforeUpdate：组件更新之前。 updated：组件更新之后。

1.3.4 this

var app = new Vue({
	el:"#app",  
    data:{     
        num : 10
    },
    methods: {
        test() {
            let a = num;      // 拿不到值
            let b = this.num ++;    // 可以拿到值
        }
    }
});

1.4 模板语法

1.4.1 插值表达式 {{ }}

<div id="app">
    <h2>姓名：{{name}}，年龄：{{age}}</h2>
</div>

1.4.2 v-model

<div id="app">
	<!-- 双向绑定 -->
	<input type="text" v-model="num">
    <span>{{num}}</span>
</div>

<script>
    var app = new Vue({
          el:"#app",  
          data:{     
              num : 200
          }
      });
</script>

1.4.3 v-test / v-html

<div id="app">
 	<!-- 纯文本展示 -->
    <span v-text="num"></span> 
     <!-- 解析为html -->
    <span v-html="num"></span>
</div>

<script>
    var app = new Vue({
          el:"#app",  
          data:{     
              num : "<h1>Hello Vue!</h1>"
          }
      });
</script>

1.4.5 v-on

<div id="app">
	{{num}} <br/>
	<!-- 绑定事件 -->
    <button v-on:click="add">add</button>
    <!-- 简写形式 -->
	<button @click="add">add</button>
</div>

<script>
    var app = new Vue({
        el:"#app",  
        data:{     
            num : 1
        },
        methods: {
            add() {
                this.num ++;
            }
        }
    });
</script>

☞ 事件修饰符

<!-- prevent：阻止默认事件发生 -->
<!-- 阻止默认链接跳转，使用 add 方法处理该事件，也可不处理 -->
<a href="" @click.prevent="add">链接</a>

1.4.5 v-for

<div id="app">
    <lu>
        <!-- 遍历集合 -->
        <li v-for="item in list">
            {{item}}
        </li>
        <hr/>
        <!-- 遍历集合，拿到索引 -->
        <li v-for="(item, index) in list">
                {{index + 1}}---{{item}}
        </li>
        <hr/>
        <!-- 遍历对象，拿到 key，拿到索引 -->
        <li v-for="(item, key, index) in user">
             {{index + 1}}---{{key}}---{{item}}
        </li>
    </lu>
</div>

<script>
    var app = new Vue({
        el:"#app",  
        data:{     
           list: ["唐三藏", "熏悟空", "猪八盖", "洒悟净", "小百龙"]，
           user: {name: "王大锤", age: 23}
        }
    });
</script>

☞ 注意

<!-- 我们一般会加 key 来提高效率，理想的 key 是每项都有且唯一的 -->
<li v-for="(item, index) in lsit" :key="index">
	 {{index + 1}}---{{item}}
</li>

1.4.6 v-if

<div id="app">
	<span v-if="flag">10086</span>
    <span v-if="!flag">10001</span>
</div>

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

☞ 注意

<div id="app">
	<!-- v-if 和 v-for 在一起使用时，v-for 的优先级高于 v-if -->
	<span v-for="item in list" v-if="item.age > 24">{{item}}</span>
</div>

<script>
   var app = new Vue({
       el:"#app",  
       data:{     
          list: [
              {name: "001", age: 23},
              {name: "002", age: 24},
              {name: "003", age: 25}
          ]
       }
   });
</script>

<div id="app">
	<!-- v-else-if、v-else 可以与 v-if 连用，但是之间不允许出现任何其他标签 -->
	<!-- 中间间不允许出现任何其他标签 -->
	<!-- ########## -->
	<span v-if="num > 80">优秀</span>
	<span v-else-if="num > 60">及格</span>
	<span v-else>不合格</span>
	<!-- ########## -->
</div>

<script>
	var app = new Vue({
	    el:"#app",  
	    data:{     
	       num: 61
	    }
	});
</script>

1.4.7 v-show

与 v-if 类似，但是 v-show 不满足条件时是将标签隐藏

1.4.8 v-bind

<!-- 动态绑定 img 地址 -->
<div id="app">
	<!-- 不使用 v-bind 时，变量会被认为时字符串，而不会解析为值 -->
	<!-- 响应的更新属性 -->
    <img v-bind:src="url">
    <!-- 简写形式 -->
    <img :src="url">
</div>

<script>
    var app = new Vue({
        el:"#app",  
        data:{     
           url: "http://pic1.win4000.com/pic/0/4a/ff62f14ce3.jpg"
        }
    });
</script>

<!-- 动态改变字体大小 -->
<div id="app">
	<!-- 此处要使用驼峰命名法 即：fontSize 而不能使用 font-size -->
	<span v-bind:style="{fontSize:size}">你好</span>
	<!-- v-bind 简写形式 -->
    <button @click="add">加大</button>
</div>

<script>
    var app = new Vue({
        el:"#app",  
        data:{     
           size: "10px",
           num: 10
        },
        methods: {
            add() {
                this.num += 5,
                this.size = this.num + "px"
            }
        }
    });
</script>

五、常用特性

1.5.1 计算属性 computed

计算属性用法与方法相似，但是计算属性有缓存数据，只有在它的相关依赖发生改变时才会重新求值。而且计算属性一定要有返回值。

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

<script>
   var app = new Vue({
       el:"#app",
       computed: {
           add() {
              return 10
           }
       }
   });
</script>

2. 监听器 watch

<div id="app">
    <input type="text" v-model="msg">
</div>
    
<script>
    var app = new Vue({
        el:"#app",
        data: {
            msg: ""
        },
        watch: {
        	<!-- 监听 msg -->
            msg(newValue, oldValue) {
                console.log("旧数据：" + oldValue + "\t" + "新数据：" + newValue)
            }
        }
    });
</script>