【融职培训】Web前端学习第7章 Vue基础教程1 Vue概述

时间 2020-07-18

标签融职培训 web 前端学习 vue 基础教程概述栏目 HTML 繁體版

原文原文链接

1、vue概述

目前前端开发最火热的三大框架分别是React、Angular和Vue。html

Angular是谷歌公司开发的前端框架，在国外的用户比国内用户多不少，国内始终是不温不火的状态。前端

React和Vue的国内用户比较多。多是由于Vue简单易用，并且是由华人开发，因此Vue在国内的受众很是多。从本章咱们开始学习Vue的相关知识。vue

使用vue仍是jQuery

jQuery仍然有本身的优点，例如咱们制做一些相对简单的网站，或者是网站的部分活动页面，使用jQuery仍然能够提高开发效率。可是面对稍微具有规模的web应用，vue绝对是更好的选择。jquery

2、第一个Vue项目

有两种方法能够在本身的项目中引入Vue：web

第一种是像引入jQuery同样，引入Vue.js文件。
第二种是使用Node环境，构建基于Vue的web项目。

在真实的项目开发中，都会使用第二种开发方式，本节咱们先以第一种-引入Vue.js文件方式起步。前端框架

 1 <body>
 2     <div id="app">
 3         {{message}}
 4     </div>
 5     <script src="vue.js"></script>
 6     <script>
 7         new Vue({
 8             data:{
 9                 message:"hello world"
10             }
11         }).$mount("#app")
12     </script>
13 </body>

咱们再来看一下上面的代码，它包含了一个vue程序最基本的结构：app

首先，咱们在html中定义了一个id为app的容器，而后咱们在js建立一个Vue的实例，经过el属性指定这个容器，从而实现让js接管html.框架

每一个 Vue 应用都是经过用 Vue 函数建立一个新的 Vue 实例开始的：函数

1 var vm = new Vue({
2   // 选项
3 })

在构造函数Vue中，咱们须要传入一个【选项对象】来进一步描述vue实例的行为。
$mount方法，将Vue挂载到html。
el属性，做用于$mount相同。
data属性，在Vue的实例之下添加属性。
{{}}能够输入一个表达式，也能够直接获取Vue实例的属性。

3、绑定属性

上面的例子中，咱们将一个data中的message属性经过双花括号显示在文本节点之中，除此以外，咱们还能够将数据绑定成为一个html属性，示例代码以下所示。post

 1 <body>
 2     <div id="app">
 3         <h1 v-bind:title="message">鼠标停留在这个H1标签上，能够看到title</h1>
 4         <h1 :title="message">鼠标停留在这个H1标签上，能够看到title</h1>
 5     </div>
 6     <script src="../../script/vue.js"></script>
 7     <script>
 8         new Vue({
 9             data:{
10                 message:"hello world"
11             }
12         }).$mount("#app")
13     </script>
14 </body>

使用【v-bind:属性名】和【:属性名】两种方式均可以绑定属性，在实际开发中，咱们一般使用简写。

4、绑定事件

在【选项对象】中能够设置methods属性为vue的示例添加方法，这些方法我已直接被调用，也能够绑定为事件。绑定事件的方法以下所示：

 1 <body>
 2     <div id="app">
 3         <button v-on:click="fun">按钮</button>
 4         <button @click="fun">按钮</button>
 5     </div>
 6     <script src="../../script/vue.js"></script>
 7     <script>
 8         new Vue({
 9             methods:{
10                 fun(){
11                     alert("hello world")
12                 }
13             }
14         }).$mount("#app")
15     </script>
16 </body>

使用【v-on:事件类型】和【@事件类型】两种方式均可觉得元素绑定事件，在实际开发中，一般使用简写。

methods属性中定义的方法内部，可使用this获取到vue的示例，也就是说咱们能够进一步经过this获取到data中的属性，并且能够经过赋值的方式改变data中的属性值。

 1 <body>
 2     <div id="app">
 3         <h1>{{title}}</h1>
 4         <button @click="changeTitle">改变标题</button>
 5     </div>
 6     <script src="../../script/vue.js"></script>
 7     <script>
 8         new Vue({
 9             data:{
10                 title:"hello world"
11             },
12             methods:{
13                 changeTitle(){
14                     this.title = "hello Vue";
15                 }
16             }
17         }).$mount("#app")
18     </script>
19 </body>

在上面的例子中，咱们实现了经过按钮的点击事件改变h1中的文本内容。

事件修饰符详解

.prevent:阻止元素的默认行为
.stop:阻止事件冒泡
.once:只触发一次事件

 1 <!-- 阻止元素默认行为 -->
 2 <div id="app">
 3     <form @submit.prevent="postData">
 4         <input type="submit">
 5     </form>
 6 </div>
 7 <script src="js/vue.js"></script>
 8 <script>
 9     //jquery：操做DOM
10     const vue = new Vue({
11         methods:{
12             postData(){
13                 console.log("提交数据");
14             }
15         }
16     });
17     vue.$mount("#app")
18 </script>
19 
20 <!-- 阻止事件冒泡 -->
21 <div id="app">
22     <button @click.once="test">test</button>
23 </div>
24 <script src="js/vue.js"></script>
25 <script>
26     const vue = new Vue({
27         methods:{
28             test(){
29                 console.log("提交数据");
30             }
31         }
32     });
33     vue.$mount("#app")
34 </script>

5、课后练习

制做一个计数器，点击+，计数器数值增长，点击-，计数器数值减少，且不能小于零。
制做一个图片切换的功能，电子数字列表，改变img标签显示的图片。

【融职教育】在工做中学习，在学习中工做

【融职培训】Web前端学习 第7章 Vue基础教程1 Vue概述