第01章 vue基础

最新推荐文章于 2024-05-30 11:27:58 发布

不睡觉的程序猿

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量1.3k

点赞数 34

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/richieandndsc/article/details/137065097

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

第一介绍MVVM架构

首先，我们介绍MVVM架构，它是Model-View-ViewModel的简写，是MVC的改进版本。对于MVC架构，大家可能比较熟悉了，它是我们软件分层设计的一种经典架构。其中，M代表Model模型层，V代表View视图层，而C代表Controller控制层。这种MVC的架构主要应用在服务器端的程序设计，M模型层主要是业务相关代码，V视图层主要是前端Html视图代码，而C控制层则是M模型层和V视图层的纽带。而我们这里的MVVM框架和MVC框架一样，也是一种分层架构，主要应用在前端工程中。两者最大的区别在于MVVM框架中的ViewModel层取代了MVC框架中的Controller层。ViewModel层也可以理解为M模型层和V视图层的纽带，它通过“双向数据绑定”把View层和Model层连接起来，而View层和Model层的“同步工作”则是自动完成的，不需要开发人员手动完成。因此，MVVM架构让开发人员更加专注于Model层的开发，不需要手动操作Dom模型。什么意思呢？直白的讲，当我们前端使用ajax请求服务器端的时候，我们需要将服务器端返回的数据应用到Dom模型上，那么这个将数据应用到Dom模型上的操作是不需要我们去做的。在html的课程中，我们介绍过如何通过Jquery发起ajax请求，已经如何利用Jquery修改Dom模型。很明显，这个过程比较麻烦，借助MVVM架构就能够省去这部分工作，非常的nice哦。

第二第一个vue程序

首先，我们简单介绍一下vue框架。vue.js 是一个 JavaScript 框架，可以帮助你轻松构建数据驱动的 web 界面。说白了，它就是一个MVVM架构下的JavaScript文件，我们引入到html文件中，就可以使用了。目前，vue的版本主要是2.x和3.x两个。鉴于目前还是以2.x为主，我们的课程就以 “2.6.14” 这个版本进行介绍。我们使用的开发工具是“Adobe Dreamweaver CS6”这款软件，大家也可以选择其他文本编辑器。因为我们目前不涉及到前端工程，还停留在html文件代码的编写，因此简简单单的文本编辑器足以了。

接下来，我们就使用Adobe Dreamweaver创建一个html5结构文件，名称为“01_vue.html”

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue</title>
</head>
<body>

</body>
</html>

接下来，我们就引入vue的2.6.14版本。我们将vue.js或者vue.min.js放置在“01_vue.html”同目录下的“vue\2.6.14”子目录下，如下所示：

接下来，我们将如下代码放置到<head>标签中。

<script src="vue/2.6.14/vue.min.js"></script>

我们引入的是压缩版的vue文件，它的好处就是体积小。
接下来，我们就开始第一个vue程序，完整代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue</title>
<script src="vue/2.6.14/vue.min.js"></script>
</head>
<body>

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

<script>
var app = new Vue({
    el: '#app',
    data: { message: 'hello world!' }
})
</script>

</body>
</html>

在上面的代码中，我们定义了一个<div>标签，并且指定它的id属性为“app”，并且在这个<div>标签里面添加了“{{message}}”的字符串文本。如果不使用vue的话，这个<div>标签中就会原封不动显示“{{message}}”这个字符串文本。我们猜测，如果使用vue的话，这个“{{message}}”的字符串文本会发生一些变化。接下来，我们继续查看<script>标签中JavaScript代码。我们上面已经说了，vue就是JavaScript代码，而且它就是一个js对象。我们在<script>标签中，通过new关键字实例化了一个vue对象app。同时实例化的时候，传递了一个json参数对象。在这个json参数对象中定义了两个属性。第一个是“el”属性，其属性值为“#app”，猜也能猜到这个就是<div>标签的id属性值。第二个是“data”属性，它的属性值仍然是一个json对象，在这个json对象中，我们只定义了一个“message”属性，属性值为“hello world!”。看到这里，我们又猜到了，这个“message”属性不就是<div>标签里面的“{{message}}”字符串文本嘛。不用讲，“message”使用两个花括号包裹肯定是vue的某种语法。整个js代码的意思就是将“hello world!”填充到<div>标签中，替换掉“{{message}}”的字符串文本。我们使用Google Chrome打开“01_vue.html”文件，顺便打开开发者模式窗口来验证我们的猜想吧。

我们打开“开发者窗口”发现，<div>标签里面的内容确实被替换成了“hello world!”。看到这里，大家可能觉得vue也不过如此嘛，不要着急，我们慢慢继续介绍。我们回到MVVM框架的定义，它的核心就是Model层与View层的“双向数据绑定”。如何理解呢？这个Model层就是我们的js代码部分，简单的理解就是我们刚刚定义的message: 'hello world!' 数据。而View层就是我们html代码部分，简单的理解就是<div id="app">{{message}}</div>。那么VM就是我们的vue.js框架，我们并没有直接操作将 'hello world!' 写入到<div>中，是vue.js帮我们完成了这部分操作。不仅仅如此，如果我们修改message的值的话，<div>标签中的内容也会同步修改。我们可以尝试一下，完整代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue</title>
<script src="vue/2.6.14/vue.min.js"></script>
</head>
<body>

<div id="app">{{message}}</div>
<button onclick="updateMessage()">修改message</button>

<script>
var app = new Vue({
    el: '#app',
    data: { message: 'hello world!' }
})
// 通过app直接访问数据data里面的数据
function updateMessage(){
    app.message = 'hello vue.js!';
}
</script>

</body>
</html>

我们增加了一个<button>按钮，添加了点击事件为“updateMessage”方法，然后在这个方法中，我们修改了message的内容，将其改为“hello vue.js!”。可想而知，当我们点击按钮的时候，<div>标签里面的内容应该由“hello world!”改变为“hello vue.js!”。

接下来，我们点击按钮

我们发现，正如我们猜想的那样，<div>标签里面的内容同步修改了。请注意哦，我们只修改了message变量中的内容，与之绑定的<div>标签中的内容就同步修改了。试想一下，如果我们不是通过点击事件修改的message，而是ajax请求服务器后返回的数据修改message的话，是不是同样修改<div>标签中的内容呢？答案是肯定的，事实上我们日常开发中就是这么做的。这就是“双向数据绑定”的魅力所在。当然，如果我们修改View层的话，Model层的数据也会同步修改，这个主要应用在form表单提交数据的时候，我们后续在介绍。

第三，vue模版语法

在上面的代码案例中，我们已经大致清楚了vue的简单实用。首先在data中定义数据，这个就是一个json对象而已，其次就是使用vue语法将定义好的数据绑定到html标签上面。vue的语法有很多，如果只是绑定html标签内容（不是html属性）的话，使用“{{xxx}}”方式就可以了。这个模版语法还支持简单的四则运算。如果不想建立“双向数据绑定”的关系，只是一次性将data数据赋予标签上面的话，可以增加使用“v-once”指令，代码如下：

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

请注意，我们增加“v-once”指令的位置是在标签属性位置。此时，我们再次点击按钮的话，<div>标签里面的内容就不再同步修改显示了。另外，需要注意的是，如果我们的data数据是html代码的话，还需要搭配“v-html”指令。这次，我们新建一个“01_vue_html.html”新的文件，代码如下所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue/2.6.14/vue.min.js"></script>
</head>
<body>

<div id="app">
    <p>{{message}}</p>
    <p v-html>{{message}}</p>
    <p v-html="message"></p>
</div>

<script>
new Vue({
    el: '#app',
    data: { message: '<h1>hello, vue</h1>' }
})
</script>

</body>
</html>

使用v-html指令来显示html代码（必须写在指令属性值中），普通的{{}}读取是不会执行html代码的。也就是说，前两种方式都无法正常显示html代码，只有第三种方式可以。

最后再介绍一个“template”属性，我们新建一个“01_vue_template.html”新的文件，代码如下所示：

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

<script>
new Vue({
    el: '#app',
    data: { message: 'hello world!' },
    template: '<div>hello, vue!</div>'
})
</script>

属性template会替换 div id='app' 的内容，即使我们在<div>中写入内容也都会失效。

这种方式使用的比较少，大家了解一下就行了。

第四，vue的v-bing指令

在上面的代码案例中，我们介绍的是data绑定html标签内容，这里我们介绍如何绑定html标签的属性，需要借助“v-bing”指令。接下来，我们创建“01_vue_property.html”文件

<div id="app">
    <img v-bind:src="imgUrl" />
    <br/>
    <img :src="imgUrl" />
</div>

<script>
new Vue({
    el: '#app',
    data: { imgUrl: './img/temp.png' }
})
</script>

我们定义了一个“imgUrl”的数据，对应了当前目录下的一张图片的相对地址。该图片我们已经放置在“01_vue_property.html”目录下的子目录img中。然后，我们就可以使用“v-bind:src="imgUrl"”指令来绑定这个“imgUrl”的数据。很明显，这个“v-bind:src="imgUrl"”指令就是将“imgUrl”的图片地址应用到<img>标签的src属性上面。最终的实现效果应该是 <img src="./img/temp.png" /> ，这样<img>标签就可以正常显示图片了。使用v-bind指令来绑定html属性值的时候，还可以简写为冒号，这样更加简便。我们在浏览器中查看效果

除了“v-bind:src”之外，我们还可以绑定其他html标签属性，格式就是v-bind指令加上冒号，然后后面加上html标签属性。另外，v-bind指令的内容可以是字符串（例如上面的imgUrl），也可以是对象，也可以是数组。接下来，我们使用v-bind指令绑定class属性，我们新创建一个“01_vue_class.html”文件，代码如下

<div id="app">
    <p v-bind:class="{myclass:isMyClass}">{{message}}</p>
</div>

<style>
    .myclass { color: #ff0000; }
</style>

<script>
new Vue({
    el: '#app',
    data: { 
        message: 'hello world!',
        isMyClass: true,
    }
})
</script>

这次，我们定义了两个数据，一个是字符串类型的message，另一个是布尔类型的isMyClass。我们还定义了一个“.myclass”样式。如果我们想要将这个样式应用到<p>标签上面，我们可以直接写 <p class=”myclass”> 就可以了。但是，现在我们有一个想法，就是根据布尔变量isMyClass的值来决定是否对<p>标签使用“.myclass”样式。此时，我们就可以使用“v-bind:class”指令来完成。我们可以看到，“v-bind:class”指令来的内容是一个对象，该对象的属性就是“myclass”样式名称，而属性值则是我们定义的布尔变量isMyClass。

我们发现，当布尔变量是true的时候，“myclass”样式是起作用的；而当布尔变量是false的时候，“myclass”样式是不起作用的，如下所示

其实就是传给 v-bind:class 一个对象，对象中包含class名称和对应的一个布尔值，如果布尔值是true是使用该class样式，如果布尔值是false就不使用该class样式。这可以简便的帮助我们更加灵活的控制标签的样式，因为我们可以通过Js动态修改isMyClass的值，实现样式的动态切换。其实，我们还可以使用“v-bind:style”或者简写的“:style”更加细致的修改标签的样式，我们创建一个“01_vue_style.html”文件，代码如下

<div id="app">
    <p :style="{'color': mycolor,'fontSize': myfontsize}">{{message}}</p>
</div>

<script>
new Vue({
    el: '#app',
    data: { 
        message: 'hello world!',
        mycolor: '#ff0000',
        myfontsize: '24px',
    }
})
</script>

我们依然给“:style”指令传递一个json对象，里面每一个属性都是css的一个样式。上述代码中我们定义了字体颜色color和字体大小fontSize两个样式属性。请注意，这个样式属性的名称不是css的格式，而是js的格式。因此，上面的字体大小，不能使用font-size，而是使用fontSize才行。然后我们在vue中定义了数据mycolor的颜色值，以及myfontsize字号大小。我们直接在浏览器查看效果。

我们上面提到过，v-bind指令的内容可以是字符串，也可以是对象，也可以是数组。接下来，我们就继续使用“:style”指令来给一个数组的例子。我们新建“01_vue_array.html”文件

<div id="app">
    <p :style="[mystyle1, mystyle2]">{{message}}</p>
</div>

<script>
new Vue({
    el: '#app',
    data: { 
        message: 'hello world!',
        mystyle1: { color:'red', fontSize: '28px' },
        mystyle2: { fontWeight: 'bolder', fontStyle: 'italic'}
    }
})
</script>

这次我们定义了两个class样式，并且全部应用到<p>标签上面。

两个样式都起作用了。

第五 vue的computed属性

我们除了在data中定义数据之外，还可以在computed中定义。computed相对于data而言，它有缓存功能，而且还可以做一些简单的处理。我们新建“01_vue_computed.html”文件

<div id="app">
    <p>数学：{{ shuxue }}</p>
    <p>语文：{{ yuwen }}</p>
    <p>英语：{{ yingyu }}</p>
    <p>平均：{{ avg }}</p>
</div>

<script>
new Vue({
    el: '#app',
    data: { 
        shuxue: 98,
        yuwen: 95,
        yingyu: 97
    },
    computed: {
        avg: function(){
            return (this.shuxue+this.yuwen+this.yingyu) / 3.0;
        }
    }
})

我们在data中定义了数学，语文，英语三门学科的成绩，然后在computed中定义了平均分avg。需要注意的是，在computed中数据是以方法的形式定义的。然后，我们就可以直接使用avg就行了。我们在浏览器中查看效果吧。

我可以看到computed是以方法的形式定义数据，因此它里面可以写js代码进一步处理。上面提到的缓存功能是说，只要数学，语文，英文三个基础学科的成绩数值不变，我们多次使用平均分avg的话，它是不会重复计算这个过程，而是直接使用缓存中的结果值。

第六，vue的filters属性

在上面的computed实例中，我们发现平均值是类似于“96.66666666666667”这样的数字。如果我们想要将其四舍五入保留两位小数，怎么办呢？我们可以在avg的计算方法中处理，也可以使用vue的过滤器，它的作用之一就是对输出的数据做格式化处理。我们新创建“01_vue_filters.html”文件，代码如下：

<div id="app">{{avg|formatAvg}}</div>

<script>
var app = new Vue({
    el: '#app',
    data: { avg: 96.66666666666667 },
    filters: {
        formatAvg:function(value){
            return Math.round(value * 100) / 100;
        }
    }
})
</script>

上述代码中，我们在filters中定义了一个formatAvg方法，然后在该方法中进行了四舍五入保留两位小数的操作。我们可以理解，过滤器就是一个js方法而已。过滤器的使用方式就是“{{avg|formatAvg}}”，也就是数据avg和过滤器方法中间使用“|”间隔即可。这种使用方式在很多编程语言中经常见到。我们在浏览器中查看吧。