Vue学习（2）

发表于 | 分类于 | | 次阅读

前面

由于临近期中考试，忙着复习，空闲时间学习的东西也没有花时间及时的记录在博客上，拖到现在，今天晚上写一些吧。

1.Vue：数据&方法

1.1 上次Vue对象的实例化

1
2
3
4
5
6
7
8
9
10
new Vue({
	el:"#vue-123",
	data:{
		name:"陈卓",
	}
});
/*
 *el：全称为element，后面为需要从html中抓获到的元素名称，而且必须是根容器的元素
 * data: 数据的储存，类似于定义变量
 */

这里注意：element中从html文件中获取到的id/class元素，其下面创建的 data只限于在id/class中使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue.js学习</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<!--vue-123是一个容器，这个容器要在vue中被引入-->
	<div id="vue-123">
		<h1>{{name}}</h1>
	</div>
  {{name}}
	<!--将123.js链接来-->
	<script src="123.js"></script>
</body>
</html>

比如，如果在<div id="vue-123">外使用 那显而易见，是不可能有数据的。所以element获取到那个id/class data只在那个id/class 中创建数据。当然，你可以在这个容器id/class中创建更多的数据。

1
2
3
4
5
6
7
new Vue({
	el:"#vue-123",
	data:{
		name:"陈卓",
		job:"Vue学习",
	}
});

1.2 方法

methods表示创建的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
new Vue({
	el:"#vue-123",
	data:{
		name:"陈卓",
		job:"Vue学习"
	},
	methods:{
		greet: function(){
			return 'My name is Sober Chen';
		}
	}
});
/*
 *el：全称为element，后面为需要从html中抓获到的元素名称，而且必须是根容器的元素
 * data: 数据的储存，类似于定义变量
 */

在这里我创建的是一个名为greet 的方法，并且让他return一句话。然后我们在html中调用一下这个方法(只复制body部分)

1
2
3
4
5
6
7
8
9
10
<body>
	<!--vue-123是一个容器，这个容器要在vue中被引入-->
	<div id="vue-123">
		<h1>名字：{{name}}</h1>
		<p>学习：{{job}}</p>
		<h2>{{greet()}}</h2>
	</div>
	<!--将123.js链接来-->
	<script src="123.js"></script>
</body>

与数值不同的是，方法有括号。当然，既然是方法，那就可以传参

Vue：

1
2
3
4
5
6
7
8
9
10
11
12
new Vue({
	el:"#vue-123",
	data:{
		name:"陈卓",
		job:"Vue学习"
	},
	methods:{
		greet: function(name){
			return 'My name is '+name+'！！';
		}
	}
});

html:

1
2
3
4
5
6
7
8
9
10
<body>
	<!--vue-123是一个容器，这个容器要在vue中被引入-->
	<div id="vue-123">
		<h1>名字：{{name}}</h1>
		<p>学习：{{job}}</p>
		<h2>{{greet('Sober Chen')}}</h2>
	</div>
	<!--将123.js链接来-->
	<script src="123.js"></script>
</body>

当然，上面刚刚定义的data数据也可以调用，直接用 this.name/this.job

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
new Vue({
	el:"#vue-123",
	data:{
		name:"陈卓",
		job:"Vue学习"
	},
	methods:{
		greet: function(name){
			return 'My name is ' + name + this.name +'！！';
		}
	}
});
/*
 * el：全称为element，后面为需要从html中抓获到的元素名称，而且必须是根容器的元素
 * data: 数据的储存，类似于定义变量
 * methods:用来储存各种方法
 */

2.Vue属性绑定

2.1 元素绑定

v-bind 加在属性前面，可以实现与vue的数据绑定：

html：

1
2
3
4
5
6
7
8
9
10
11
<body>
	<!--vue-123是一个容器，这个容器要在vue中被引入-->
	<div id="vue-123">
		<h1>名字：{{name}}</h1>
		<p>学习：{{job}}</p>
		<h2>{{greet('Sober Chen')}}</h2>
    <a v-bind:href="website">一个链接</a>
	</div>
	<!--将123.js链接来-->
	<script src="123.js"></script>
</body>

Vue：

1
2
3
4
5
6
7
8
9
10
11
12
13
new Vue({
	el:"#vue-123",
	data:{
		name:"陈卓",
		job:"Vue学习",
		website:"https://chenzhuo233.github.io"
	},
	methods:{
		greet: function(name){
			return 'My name is ' + name + this.name +'！！';
		}
	}
});

就可以在网页检查中看到链接在href中。但如果还要加两个括号 的话，是不会检查到网页地址的元素的，相当于c语言中的格式化输出，不管里面是什么都会以字符或字符串的形式输出。

2.2 标签绑定

v-html可实现标签绑定：

Vue：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
new Vue({
	el:"#vue-123",
	data:{
		name:"陈卓",
		job:"Vue学习",
		website:"https://chenzhuo233.github.io",
		webTags:"<a href='https://chenzhuo233.github.io'>还是链接</a>"
	},
	methods:{
		greet: function(name){
			return 'My name is ' + name + this.name +'！！';
		}
	}
});

html:

1
2
3
4
5
6
7
8
9
10
11
12
<body>
	<!--vue-123是一个容器，这个容器要在vue中被引入-->
	<div id="vue-123">
		<h1>名字：{{name}}</h1>
		<p>学习：{{job}}</p>
		<h2>{{greet('Sober Chen')}}</h2>
    <a v-bind:href="website">一个链接</a>
    <p v-html="webTags">还是链接</p>
	</div>
	<!--将123.js链接来-->
	<script src="123.js"></script>
</body>

可以在<P>标签中，直接将vue的webTags中的标签<a>绑入到<p>标签内，注意，v-html使用的是=！！

Vue学习（2）阶段笔记

0%