vue.js的简单应用

1.项目建立

 

首先我们新建一个vue项目，引入vue.js

vue.js可以直接去官网下载：官网地址：https://cn.vuejs.org/v2/guide/installation.html，你可以下载任何一个版本，当然，你也可以直接引入cdn的路径。如下图所示：

2.简单文本显示和list列表遍历

然后我们新建一个demo，双大括号为vue的取值方式。

	
		
		
		
	
	
		

			
{
    {messages}}
			

				
{
    {item}}
			
		
		
{
    {messages}}
	

类型	语法	说明
普通值	{ {message}}	直接使用双大括号取值即可
list	{ {item}}	使用vue语法【v-for】循环遍历list。list指new vue中的data的list值，item是迭代器，指代每一个元素，{ {item}}为取值方式

 

el属性是指定vue扫描的dom元素，一般都是div，比如上述代码，如果你将{ {message}}写到id=app的div范围外，是不会产生vue解析后的数据的，在页面上仅仅会展示{ {message}}这个样子。如下图所示：

 

3.简单的计数器

废话不多说，先上代码：

	
		
		
		
	
	
		

			
计数器：{
    {num}}
			+
			-
		
	

v-on:click是绑定点击事件的方式

@click是上述代码的语法糖（简写）

取值可以直接写methods中的方法名，也可以方法名+()，我们一般都使用方法名+()，用于区分方法与属性。

this.属性名用于取data中的属性

代码执行后，效果如下：