Vue.js初学

Posted 2022-12-03 F3nGaoXS

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js初学相关的知识，希望对你有一定的参考价值。

Vue.js从零开始

1、简单认识Vue.js

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

2、Vue.js安装

CDN引入
直接下载然后引入，script方式引用
npm方式安装

注意开发环境版本（vue.js）和生产环境版本（vue.min.js）的区别：开发环境版本有所有的js代码，包括注释，警告信息，用于开发的时候用，体积比较大；生产环境版本就是项目上线的时候用，所有代码整合成了一行，去掉了注释和警告信息，用于项目实际上线的时候用，体积比较小。

3、第一个Vue.js程序

我用的是编译器是IDEA，所以我只需要在plugins市场下载vue插件，然后重启IDEA创建一个空项目（empty project），然后新建一个文件夹名叫js，把刚才下载好的vue.js放到这个文件夹里。然后再html里面引用就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
    <!--引入vue.js-->
    <script src="../js/vue.js"></script>
    <meta charset="UTF-8">
    <title>vue.js第一课</title>
</head>
<body>
<!--定义一个id为app的盒子交给vue接管-->
<div id="app">messagemessage2</div>
</body>
<script>
    //实例化Vue对象
    let app = new Vue(
        //el是element（元素）的缩写，接管id为app的盒子，id选择器
        el: '#app',
        //定义数据
        data: 
            //上文中用message取得数据
            message: 'hello,',
            message2: 'Vue.js',
        
    );
</script>
</html>

步骤总结：

用script的方式引入vue.js
创建id为app（自定义）的div盒子
再写script代码
先new一个Vue对象，参数是el（上文的元素），data（定义数据），名叫app（自定义）接管上文的id叫app的盒子，并且定义数据
最后在盒子里面用数据名就可以获取到定义的数据了
data里的数据可以直接定义，也可以从后端或者服务器加载

4、循环v-for

尝试一下循环列表，我们先在data里面定义一个数组[]是数组，是对象

<!--定义一个id为app的盒子交给vue接管-->
<div id="app">
    <ul>
        <!--类似Java的增强for循环，students是集合，student是集合中的单个元素-->
        <li v-for="student in students">student</li>
    </ul>
</div>
</body>
<script>
    //实例化Vue对象
    let app = new Vue(
        //el是element（元素）的缩写，接管id为app的盒子，id选择器
        el: '#app',
        //定义数据
        data: 
            students: ['张三','李四','王麻子']
        
    );
</script>

利用v-for="item in items"的方式遍历中items集合中的单个item元素（类似Java中的增强for循环），然后再利用item取出集合中的单个元素，同时还可以在控制台利用app.students.pop()去掉最后一个数据

5、事件v-on

在vue中可以使用v-on:事件名="方法名(参数列表)"来调用事件，比如调用单击事件就用v-on:click，双击事件就用v-on:dblclick等等其他事件，同时也可以简写成@click或者@dblclick

<!DOCTYPE html>
<html lang="en">
<head>
    <!--引入vue.js-->
    <script src="../js/vue.js"></script>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
<!--指定一个id为app的div盒子-->
<div id="app">
    <h3>计数器：counter</h3>
    <!--调用increment函数-->
    <button v-on:click="increment()">+</button>
    <!--调用decrement函数-->
    <button v-on:click="decrement()">-</button>
</div>
<script>
    //实例化Vue对象
    let app = new Vue(
        //获得id为app的div盒子
        el: '#app',
        //定义数据
        data: 
            //计数器
            counter: 0,
        ,
        //定义方法
        methods: 
            //递增方法
            increment()
                this.counter++;
                console.log('调用了increment方法');
            ,
            //递减方法
            decrement(id)
                this.counter--;
                console.log('调用了decrement方法');
            
        
    );
</script>
</body>
</html>

需要注意的是必须在实例化的Vue对象里添加methods属性，然后再在methods属性里添加方法。

6、Vue的MVVM模式

MVVM分为三个部分：

M（Model，模型层）：主要负责业务数据相关；

V（View，视图层）：负责视图相关，比如网页的Dom

VM（ViewModel，Model层和View层的桥梁）：负责监听M然后对V进行修改，实现M和V的双向绑定。当M层的数据发生修改时，VM层会监测到变化然后立马对V层的数据也进行修改。反之，当V层的数据发生修改时，VM层也会监测到变化然后对M层的数据进行修改。

总的来说就是Model层和View不会直接相互操作，然后通过中间的一层VM层进行互相联系，降低了耦合。

而且Vue中大部分时间中Vue就是充当了VM层，我们作为程序员只需要做好View层和Model层就好了，因为Vue已经帮我们自动监听加解析加修改。

7、Vue的生命周期

和微信小程序开发类似，在Vue.js里每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。同时生命周期的钩子函数是通过Vue实例的options对象的属性值传递给Vue的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js的生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">message</div>
<script>
    let app = new Vue(
        //绑定上文的元素
        el: '#app',
        //定义数据
        data: 
           message: 'Hello,Vue.js!'
        ,
        //定义方法
        methods:

        ,
        //生命周期函数：created（Vue实例被创建后运行的函数）
        created:function () 
            console.log('lifeCycle--->created函数执行');
        
    );
</script>
</body>
</html>

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如mounted、updated和destroyed生命周期钩子的 this 上下文指向调用它的 Vue 实例。

这是Vue实例的生命周期图示：

红线标注的都是执行到对应的生命周期的时候会调用的生命周期钩子函数

8、Vue.js的插值操作

8.1 v-once

有的时候可能需要View的数据不根据Model的数据动态变化，就可以使用v-once指令。

<body>

<div id="app">
  <h2>message</h2>
  <h2 v-once>message</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  let app = new Vue(
    el: '#app',
    data: 
      message: 'Hello,Vue.js!',
    ,
  );
</script>

</body>

加了v-once后message只会被渲染一次，后面model再改变message的数据的话依旧显示的是第一次渲染的数据不会发生动态改变。就像常量一样，加了v-once标签的数据不再发生改变。

8.2 v-html

有的时候可能后端向前端传递的数据不是纯文本或者纯字符串而是富文本，比如<h2>标题</h2>，我们希望它在页面上显示的是标题而不是<h2>标题</h2>，这个时候我们就可以给这个标签加上v-html指令

<body>

<div id="app">
  <p>h2</p>
  <p v-html="h2"></p>
</div>

<script src="../js/vue.js"></script>
<script>
  let app = new Vue(
    el: '#app',
    data: 
      message: 'Hello,Vue.js!',
      h2: '<h2>标题</h2>',
    ,
  );
</script>

</body>

运行结果：

可以看到没有加上v-html指令的标签内显示的内容就是纯字符串，加上了v-html指令的标签内显示的内容就是经过解析过后的富文本

8.3 v-text

<body>

<div id="app">
  <p>text,Vue.js!</p>
  <p v-text="text">,Vue.js!</p>
  <p v-text="text+',Vue.js!'">,Vue.js!</p>
</div>

<script src="../js/vue.js"></script>
<script>
  let app = new Vue(
    el: '#app',
    data: 
      message: 'Hello,Vue.js!',
      text: 'Hello',
    ,
  );
</script>

</body>

运行结果：

可以观察到运行结果，如果直接使用Mustache语法（双大括号）可以直接在标签内里进行拼接字符串，但是如果使用了v-text指令后会直接将标签里的内容覆盖掉，但是同时也可以在v-text指令里使用+号进行拼接。

8.4 v-pre

<body>

<div id="app">
  <p>message</p>
  <p v-pre>message</p>
</div>

<script src="../js/vue.js"></script>
<script>
  let app = new Vue(
    el: '#app',
    data: 
      message: 'Hello,Vue.js!',
    ,
  );
</script>

</body>

运行结果：

v-pre就是实打实的显示标签内的内容而不经过解析。

9、v-bind动态绑定

9.1 v-bind的基本使用

<body>

<div id="app">
  <img v-bind:src="imgUrl" alt="">
  <a v-bind:href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
  let app = new Vue(
    el: '#app',
    data: 
      aHref: 'https://www.baidu.com',
      imgUrl: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
    ,
  );
</script>

</body>

传统的img和a标签里的url都是直接写死的，但是开发中肯定不会写死，肯定是从服务器请求然后得到JSON字符串然后从中获取到对应的url存储到Model里面，这个时候就需要用到v-bind指令来将Model里面的url放到img或者a标签里，使得它们能够解析url。

同时v-bind还有一个语法糖（简写）：

常规写法：

<!--常规写法-->
  <img v-bind:src="imgUrl" alt="">
  <a v-bind:href="aHref">百度一下</a>

语法糖：（直接将v-bind:替换成:）

<!--语法糖（简写）-->
  <img :src="imgUrl" alt="">
  <a :href="aHref">百度一下</a>

9.2 v-bind动态绑定class（对象语法）

在vue里面可以实现动态绑定class，并且可以在class里面定义对象，对象里面采用key-value键值对的方式来确定这个属性是否生效（value必须是boolean类型），同时原来已有的class属性不会被覆盖，而是合并。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-bind动态绑定class（对象语法）</title>
  <style>
    .active1
      color: red;
    
    .active2
      color: blue;
    
  </style>
</head>
<body>

<div id="app">
  <h2 class="line" :class="'active1': isActive1,'active2': isActive2">message</h2>
  <button v-on:click="changeColor()">切换颜色</button>
</div>

<script src="../js/vue.js"></script>
<script>
  let app = new Vue(
    el: '#app',
    data: 
      message: '变色',
      isActive1: true,
      isActive2: false,
    ,
    methods: 
      changeColor() 
        this.isActive1=!this.isActive1;
        this.isActive2=!this.isActive2;
      
    ,
  );
</script>

</body>
</html>

h2标签里原本有一个固定的class属性叫line，同时后面交给vue解析的里面有一个对象，对象采用的是键值对的方式存储的，只要某个键（属性）的值为true，那么这个属性就会被启用，否则就不会被启用。

总结就是class属性可以用原本固定的，不会被覆盖，只会被合并，:class属性里面可以使用对象来存储，对象里面是键值对的方式存储，key-value，如果value为true则该属性就会被启用，否则不会被启用。

9.3 v-bind动态绑定style（对象语法）

v-bind指令也可以动态绑定style的样式：直接在style里利用属性名：属性值给style赋值：

<body>

<div id="app">
  <!--v-bind动态绑定style格式
  <p :style="key(属性名):value(属性值)"></p>-->
  <!--直接赋值-->
  <p :style="color:'red','fontSize':'50px'">message</p>
</div>

<script src="../js/vue.js"></script>
<script>
  let app = new Vue(
    el: '#app',
    data: 
      message: 'Hello,Vue.js!',
    ,
  );
</script>

</body>

可以看到在style里依然是利用的对象语法来赋值的，key:value，假如value写死了的话就需要加上''单引号。

也可以动态获取后端传的value：

<body>

<div id="app"以上是关于Vue.js初学的主要内容，如果未能解决你的问题，请参考以下文章 
 Vue.js 渲染简写样式存在的问题
 vue.js精讲02
 Vue.js初学笔记
 vue.js初学模板语法
 Vue.js初学
 初学者可能不知道的 vue.js技巧