vue

vue学习笔记（一）

Posted by weite122 on 2018-08-19

Vue.js 是什么

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

创建一个hello world

  • 用原生js实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
  </div>
	<script>
	  var dom =document.getElementById('app')
		dom.innerHTML = 'hello world'
	</script>
</body>
</html>
  • 用vue实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
  <script src="http://vuejs.org/js/vue.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div id="app">{{content}}</div>
  <script>
    var app = new Vue({
		  el: '#app',
		  data: {
			content: 'hello world'
		  }
		})
  </script>
</body>
</html>

2秒钟后将页面的hello world变成bye world

  • 用原生js实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="app">
  </div>
	<script>
	  var dom =document.getElementById('app')
		dom.innerHTML = 'hello world'
		
		setTimeout(function() {
			dom.innerHTML = 'bye world'
		}, 2000)
	</script>
</body>
</html>
  • 用vue实现：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
  <script src="http://vuejs.org/js/vue.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div id="app">{{content}}</div>
  <script>
    var app = new Vue({
		  el: '#app',
		  data: {
			content: 'hello world'
		  }
		})
    setTimeout(function() {
        app.$data.content = 'by world'
    },2000)
  </script>
</body>
</html>
  • 通过上面例子可以看到vue并没有直接操作dom，而是通过更改vue实例的数据，实现页面数据的更新。用vue写代码重心放在数据层和视图层，通过修改Model里的数据，实现View层的更新。至于dom的操作，是Vue的VM层实现。
FEATURED TAGS
vue
FRIENDS