Vue学习手册

发表于 分类于 ，
本文字数： 9.8k 阅读时长 ≈ 9 分钟

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue入门实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          message: 'Hello Vue !'
        }
      }
    })
  </script>
</html>

总结：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
1. vue的使用要从创建Vue对象开始
   var vm = new Vue();
   
2. 创建vue对象的时候，需要传递参数，是json对象，json对象对象必须至少有两个属性成员
   var vm = new Vue({
         el:"#app",
	 	 data: {

     	 },
		data() {
            return {
				数据变量:"变量值",
				数据变量:"变量值",
            }
      	}
   });
   
   el:设置vue可以操作的html内容范围，值一般就是css的id选择器。
   data: 保存vue.js中要显示到html页面的数据。
   
3. vue.js要控制器的内容范围，必须先通过id来设置。
  <div id="app">
      <h1>{{message}}</h1>
      <p>{{message}}</p>
  </div>

Vue的MVVM思想

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。

Model 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。

View 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。

ViewModel 指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。

2011-05-03 14h43_20

在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据

1
2
3
4
console.log(vm.$el)     # #box  vm对象可以控制的范围
console.log(vm.$data);  # vm对象要显示到页面中的数据
console.log(vm.$data.message);  # 访问data里面的数据
console.log(vm.message);# 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.

Vue指令

Vue 指令是带有 v- 前缀的特殊 attribute，它的值是一个表达式，指令帮助我们操作 DOM，当表达式的值发生改变时更新渲染 DOM。

  • v-text是元素的 InnerText 属性，它的作用和之前我们使用的 {{}} 一样，用于数据绑定

  • v-html是元素的 innerHTML，它用于绑定一段 html 标签

  • v-bind用于给元素的属性赋值。v-bind后面是 ：属性名=[变量名]，可以直接通过:属性名简写

  • v-for 用于列表的循环渲染。基本语法：v-for="item in data"，data 可以是数组或者对象

  • v-if和v-show两个指令来控制页面元素的显示和隐藏

    v-if：根据表达式的值在 DOM 中生成或移除一个元素。

    v-show：根据表达式的值通过样式的改变来显示或者隐藏 HTML 元素。

  • v-if、v-else-if、v-else进行条件判断

  • v-on 来进行事件的绑定。用法：v-on:事件名="方法"，可用@事件类型简写，常见事件类型@submit @focus @blur @click

  • v-model实现数据的双向绑定

  • v-pre跳过所在元素和它的子元素的编译过程，也就是把这个节点及其子节点当作一个静态节点来处理

  • v-once只会在第一次更新时显示数据，此后更新该 DOM 里面引用的数据时，内容不会自动更新

Vue动态样式绑定

通过传给 v-bind:class 一个对象，以动态地切换 class：

1
<div v-bind:class="{ show: isShow }">Hello !</div>

数组语法

1
<div v-bind:class="[classA, classB]">Hello !</div>

三元表达式

1
<div v-bind:class="[isShow ? showClass : '', classB]"></div>

内联样式v-bind:style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
格式1：值是json对象，对象写在元素的:style属性中
标签元素：
<div :style="{color: activeColor, fontSize: fontSize + 'px' }"></div>
data数据如下：
data: {
    activeColor: 'red',
    fontSize: 30
    }
格式2：值是对象变量名，对象在data中进行声明
标签元素：
<div v-bind:style="styleObject"></div>
data数据如下：
data: {
    styleObject: {
    color: 'red',
    fontSize: '13px'
    }
}

格式3：值是数组
标签元素：
<div v-bind:style="[style1, style2]"></div>
data数据如下：
data: {
	style1:{
    	color:"red"
    },
    style2:{
    	background:"yellow",
    	fontSize: "21px"
    }
}

计算属性computed

1
2
3
4
5
computed: {    //计算属性：里面的函数都必须有返回值
  	totalPrice() {
  		return this.count * this.unitPrice
  	}
  }

Vue侦听器

侦听器 watch 是 Vue 提供的一种用来观察和响应 Vue 实例上的数据变化的属性。当被侦听的数据发生变化时，会触发对应的侦听函数。

vue会传入两个形参，第一个是变化前的数据值，第二个是变化后的数据值。

deep 属性代表是否深度监听，默认值是 false。当设置为 true 时，会对对象里面的每个属性进行侦听

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    <div id="app">
        <p>{{ num }}</p>
        <button @click="num++">按钮</button>
    </div>
</body>
<script>
    window.onload = function(){
        var vm = new Vue({
            el:"#app",
            data:{
                num:20
            },
            watch:{
                num:function(newval,oldval){
                    //num发生变化的时候，要执行的代码
                    console.log("num已经发生了变化！");
                }
            }
        })
        }
</script>

Vue事件处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
# 1.点击事件
@click
	@click="Func" # 不带参数
	@click="Func(10)" # 带参数
	@click="Func(10, $event)"  # 获取原生事件对象

    methods: {
        Func(count, event) {
          this.count = count
          console.log(event)
        }
      }
# 2.事件修饰符
event.preventDefault() # 用来取消事件的默认动作。
event.stopPropagation() # 用来阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

# 3.按键修饰符
<!-- 只有在 `key` 是 `Enter` 时调用 `login()` -->
<input v-on:keyup.enter="login">
.enter: 回车键；
.tab: TAB键；
.delete: 删除和退格键；
.esc: 只有在event.终止键；
.space: 删除键；
.up: 上方向键：
.down: 下方向键：
.left: 左方向键：
.right: 右方向键：

Vue生命周期

每个Vue对象在创建时都要经过一系列的初始化过程。在这个过程中Vue.js会自动运行一些叫做生命周期的的钩子函数，我们可以使用这些函数，在对象创建的不同阶段加上我们需要的代码，实现特定的功能。

  • beforeCreate（创建前）
  • created（创建后）
  • beforeMount (载入前)
  • mounted（载入后）
  • beforeUpdate（更新前）
  • updated（更新后）
  • beforeDestroy（销毁前）
  • destroyed（销毁后）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
    <script>
    window.onload = function(){
        var vm = new Vue({
            el:"#app",
            data:{
                num:0
            },
            beforeCreate:function(){
                console.log("beforeCreate,vm对象尚未创建,num="+ this.num);  //undefined
                this.name=10; // 此时没有this对象呢，所以设置的name无效，被在创建对象的时候被覆盖为0
            },
            created:function(){
                console.log("created,vm对象创建完成,设置好了要控制的元素范围,num="+this.num );  // 0
                this.num = 20;
            },
            beforeMount:function(){
                console.log( this.$el.innerHTML ); // <p>{{num}}</p>
                console.log("beforeMount,vm对象尚未把data数据显示到页面中,num="+this.num ); // 20
                this.num = 30;
            },
            mounted:function(){
                console.log( this.$el.innerHTML ); // <p>30</p>
                console.log("mounted,vm对象已经把data数据显示到页面中,num="+this.num); // 30
            },
            beforeUpdate:function(){
                // this.$el 就是我们上面的el属性了，$el表示当前vue.js所控制的元素#app
                console.log( this.$el.innerHTML );  // <p>30</p>
                console.log("beforeUpdate,vm对象尚未把更新后的data数据显示到页面中,num="+this.num); // beforeUpdate----31
                
            },
            updated:function(){
                console.log( this.$el.innerHTML ); // <p>31</p>
                console.log("updated,vm对象已经把过呢更新后的data数据显示到页面中,num=" + this.num ); // updated----31
            },
        });
    }
    </script>
</head>
<body>
    <div id="app">
        <p>{{num}}</p>
        <button @click="num++">按钮</button>
    </div>
</body>
</html>

总结：

1
2
3
4
5
在vue使用的过程中，如果要初始化操作，把初始化操作的代码放在 mounted 中执行。
mounted阶段就是在vm对象已经把data数据实现到页面以后。一般页面初始化使用。例如，用户访问页面加载成功以后，就要执行的ajax请求。

另一个就是created，这个阶段就是在 vue对象创建以后，把ajax请求后端数据的代码放进 created

Vue过滤器

过滤器，就是vue允许开发者自定义的文本格式化函数，可以使用在两个地方：输出内容和操作数据中。

定义过滤器的方式有两种。

  1. 使用Vue.filter()进行全局定义
1
2
3
4
5
6
7
8
9
10
11
Vue.filter("RMB", function(v){
  	//就是来格式化(处理)v这个数据的
  	if(v==0){
    	return v
  	}
  	return v+"元
})
Vue.filter("dot", function(data,digit){ // digit　保留小数位
        return data.toFixed(digit);
    });

  1. 在 Vue 实例 options 中使用 filters 选项来注册局部过滤器，这样过滤器只能在这个实例中使用：
1
2
3
4
5
6
7
8
9
10
11
filters: {
  '过滤器名字': function(value) {
    // 具体过滤逻辑
  }
}
<!-- 在双花括号中 -->
{{ message | filteName }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="message | filteName"></div>

Vue插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制，一般有下面几种：

  1. 添加全局方法或者属性。如: vue-custom-element。
  2. 添加全局资源：指令 / 过滤器 / 过渡等。如 vue-touch。
  3. 通过全局混入来添加一些组件选项。如 vue-router。
  4. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
  5. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router。

Vue 插件是对 Vue 全局功能的扩展，他可以给 Vue 添加全局方法、属性、组件、过滤器、指令等等。

通过全局方法 Vue.use () 使用插件。它需要在你调用 new Vue () 启动应用之前完成

axios

vue.js默认没有提供ajax功能的。

axios 是一个基于 promise 的 HTTP 库，所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。

注：axios本质上就是javascript的ajax封装，所以会被同源策略限制。

下载地址：

1
2
3
https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js

学习文档：http://www.axios-js.com/zh-cn/docs/

axios提供发送http请求的常用方法有两个：axios.get() 和 axios.post() 。

其他：delete/put/patch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 1.get请求
// 参数1: 必填，字符串，请求的数据接口的url地址，例如请求地址：http://www.baidu.com?id=200
// 参数2：可选，请求参数和请求头内容，json对象，要提供给数据接口的参数
axios.get('服务器的资源地址',{ // http://www.baidu.com
    params:{
        参数名:'参数值', // id: 200,
    },
    headers:{
        选项名:'选项值', // 请求头
    }

}).then(function (response) { // 请求成功以后的回调函数
    console.log("请求成功");
    console.log(response.data); // 获取服务端提供的数据

}).catch(function (error) {   // 请求失败以后的回调函数
    console.log("请求失败");
    console.log(error.response);  // 获取错误信息
});

// 2.post请求，参数和使用和axios.get()类似。
// 参数1: 必填，字符串，请求的数据接口的url地址
// 参数2：必填，json对象，要提供给数据接口的参数,如果没有参数，则必须使用{}
// 参数3：可选，json对象，请求头信息
axios.post('服务器的资源地址',{
    username: 'xiaoming',
    password: '123456'
},{
    headers:{
        选项名:"选项值",
    }
}).then(function (response) { // 请求成功以后的回调函数
    console.log(response);
}).catch(function (error) {   // 请求失败以后的回调函数
    console.log(error);
});

补充：js中json数据转换

javascript提供了一个JSON对象来操作json数据的数据转换.

方法 参数 返回值 描述
stringify json对象 字符串 json对象转成字符串
parse 字符串 json对象 字符串格式的json数据转成json对象
相关文章推荐
都看到这里了，不赏点银子吗^v^