Vue之初体验

2022-08-22 16:40:00 浏览数 (1)

Vue初体验

前言：什么是Vue.js

摘自维基百科：

Vue.js是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

说白了就是一个前端框架！

Vue中文官网：

https://cn.vuejs.org

什么是Vue.js的MVVM设计模式？

MVVM如果没听说过，但是我们知道MVC编程模式！ MVC：M是指业务模型（Model），V是指用户界面（View），C则是控制器（Controller）。

MVVM：MVVM是MVC的改进版 M是指业务模型（Model），V是指用户界面（View），VM则是ViewModel。

优点：MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

  1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
  2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
  3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
  4. 可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写。

弄清了MVVM设计模式，下面正是开始学习Vue.js

安装Vue.js

有三种方式安装Vue.js：

1.标签引入(初学者推荐) Vue.js的安装方式非常简单 跟jquery一样，你可以下载后（https://cn.vuejs.org/js/vue.js）引入；

下载后在项目包的同级目录建一个js包，将下载后的vue.js文件拷贝进去，接着就可以在script标签中引入了！

代码语言：javascript复制
<script src="../js/vue.js"></script>

或者直接从cdn引入

代码语言：javascript复制
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.npm安装

代码语言：javascript复制
# 最新稳定版
$ npm install vue

3.命令行工具安装（CLI）

这里就不多介绍了，之后进阶用，现在我们用方式一就好了~

案例1、展示简单数据

vue就类似一个构造函数，用构造函数构造出一个实例，并往构造函数中传入参数，而vue中的参数是一个对象。

定义一个变量接收Vue构造函数构造出的实例，并且传入的参数是一个对象

代码语言：javascript复制
const app = new Vue({});

这个对象参数中的一些属性也有特定的作用。

代码语言：javascript复制
        const app = new Vue({
            el : '#app',
            data : {
                message : 'hello vue'
            }
        })
  • el ：该属性决定了Vue对象挂载到哪个元素上，也就是用来告诉Vue，他需要管理的对象是谁，而el的属性值就是需要被管理的元素的id
  • data：data的属性值是一个对象，被管理的元素可以根据需要，获取data中的数据

将Vue对象中的数据传到h1中

代码语言：javascript复制
      <div id="app">
        <h1>{{message}}</h1>
    </div>

浏览器运行

我们可以在控制台动态修改h1中的内容（F12打开控制台，选择Console）

在这可以明显的感受到，通过Vue管理的元素，他的样式和数据是相分离的，动态修改数据的过程完全没有影响页面的结构。

完整代码演示：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1>{{message}}</h1>
    <h1>{{name}}</h1>
</div>

<!--这里没有绑定，所以不会渲染,直接显示{{message}}-->
<div>{{message}}</div>


<script src="../js/vue.js"></script>
<script>
    // let(变量)/const(常量)
    // 编程范式: 声明式编程
    const app = new Vue({
        el: '#app', // 用于挂载要管理的元素
        data: { // 定义数据
            message: 'hello vue',
            name: 'Tomcatist'
        }
    })

    // 元素js的做法(编程范式: 命令式编程)
    // 1.创建div元素,设置id属性

    // 2.定义一个变量叫message

    // 3.将message变量放在前面的div元素中显示

    // 4.修改message的数据: 今天天气不错!

    // 5.将修改后的数据再次替换到div元素
</script>

</body>
</html>

案例2 展示列表

展示ul列表 通过上一个案例，可以在每个li中，将需要的数据传入特定的li中，但是这种写法过于冗余。

代码语言：javascript复制
    <div id="app">
       <ul>
           <!-- <li v-for = "items in movies">{{items}}</li> -->
           <li>{{movies[0]}}</li>
           <li>{{movies[1]}}</li>
           <li>{{movies[2]}}</li>
           <li>{{movies[3]}}</li>
       </ul>
    </div>
        const app = new Vue({
            el : '#app',
            data : {
                message : 'hello vue',
                movies : ['one','two','three','four']
            }
        })

可以借助v-for的指令，items in movies的意思是，用for循环遍历movies数组，将获取的数据都赋给变量items，最后在li中展示items，这样就可以自动的生成li结构，并往li中添加items数据。

代码语言：javascript复制
        <div id="app">
       <ul>
           <li v-for = "items in movies">{{items}}</li>
       </ul>
    </div>
        const app = new Vue({
            el : '#app',
            data : {
                message : 'hello vue',
                movies : ['one','two','three','four']
            }
        })

在控制台操作movies数组，数组也会动态的改变

完整代码演示：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
        }
    })
</script>

</body>
</html>

案例3 计数器

样式展示：点击 按钮数字增加，点击-按钮数字减少

v-on指令可以用来添加事件， v-on:click，就是添加click事件， 在指令中让counter 和counter--， vue实例会动态监测到counter的变化，在点击后将改变的counter值添加到h1中

代码语言：javascript复制
    <div id="app">
        <h1>当前的数字：{{counter}}</h1>
        <button v-on:click="counter  "> </button>
        <button v-on:click="counter--">-</button>
    </div>
代码语言：javascript复制
        const app = new Vue({
            el : '#app',
            data : {
                counter : 0
            }
        })

但是，当我们使用的点击事件是比较复杂的，比添加console.log的语句，继续在行间编写会导致页面混乱，这时就可以利用函数来简化代码。 methods也是Vue实例中的属性，用来存储函数。

代码语言：javascript复制
    <div id="app">
        <h1>当前的数字：{{counter}}</h1>
        <button v-on:click="add"> </button>
        <button v-on:click="sub">-</button>
    </div>
代码语言：javascript复制
        const app = new Vue({
            el : '#app',
            data : {
                counter : 0
            },
            methods : {
                add : function() {
                    this.counter  ; //this指针指向当前Vue实例app,用this找到app下的counter
                    console.log("计数器加1");
                },
                sub : function(){
                    this.counter--;
                    console.log("计数器减1");
                }
            }
        })5

完整代码演示：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>当前计数: {{counter}}</h2>
    <!--<button v-on:click="counter  "> </button>-->
    <!--<button v-on:click="counter--;">-</button>-->
    <button v-on:click="add"> </button>
    <button v-on:click="sub">-</button>
    <!--下面是语法糖写法-->
    <!--<button @click="sub">-</button>-->
</div>

<script src="../js/vue.js"></script>
<script>
    // 语法糖: 简写
    // proxy
    const obj = {
        counter: 0,
        message: 'abc'
    }

    new Vue()

    const app = new Vue({
        el: '#app',
        data: obj,
        methods: {
            add: function () {
                console.log('add被执行');
                this.counter  
            },
            sub: function () {
                console.log('sub被执行');
                this.counter--
            }
        },
        beforeCreate: function () {

        },
        created: function () {
            console.log('created');
        },
        mounted: function () {
            console.log('mounted');
        }
    })

    // 1.拿button元素

    // 2.添加监听事件
</script>

</body>
</html>
编程算法 vue.js mvc jquery

0 人点赞