shangrila-xiu

112
文章
101
分类
33
标签

vue.js 基础

Vue.js基础讲解（一）

vue官网

vue的使用手册

vue.js的结构：

1
2
3
4
5
6
7
8
9
<html>
      <head>
      	<title></title>
      </head>
      <body>
        网页的内容
      </body>
   </html>
1
2
3
4
5
6
7
8
9
10
11
<template>         ///相当于HTML的html
		网页的内容
</template>
<style>    ///css   
</style>
       
<script>    ///js
</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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MVVM</title>
</head>
<body>
<script src="src/vue.js"></script>
<div id="msg">
    {{b.c}}这是普通文本{{b.c+1+message}}这是普通文本
    <p>{{message}}</p>
    <p><input type="text" v-model="message"/></p>
    <p>{{message}}</p>
    <p><button type="button" v-on:click="clickBtn(message)">click me</button></p>
</div>
<script>
    var vm = new Vue({
        el:"#msg",
        data:{
            b:{
                c:1
            },
            message:"hello world"
        },
        methods:{
            clickBtn:function(message){
                vm.message = "clicked";
            }
        }
    });
</script>
</body>
</html>
注意：vues是以*.vue这种格式保存的

vue与angular的比较：

Vue

简单易学，属于轻型mvvm框架，mvc框架；

指令以v- 形式来写

是一片HTML代码配合上json,在new出来的vue实例

属于个人维护项目

适合移动端的项目，较小巧

angular

angular：上手难

指令以ng- 形式来写

所有的属性和方法都挂到$scope

由Google维护5.适合PC端

vue与angular的共同点：不兼容低版本的IE

vue的基本雏形：

angular展示一条基本的数据的伪代码：

1
2
3
4
var app=angular.module('app',[]);
app.controller('xxx',function($scope){
  $scope.msg='welcome'
});
1
2
3
<div ng-controller="xxx">
	{{msg}}
</div>

vue：

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></title>
		<script language="javascript" src="js/vue.js"></script>
	</head>
	<body>
		<div id="vue_first">{{msg}}</div>
		<script language="JavaScript">
			new Vue({
				el:'#vue_first',
				data:{
					msg:'hello vue'
				}
			});
		</script>
	</body>
</html>