1.项目建立
首先我们新建一个vue项目，引入vue.js
vue.js可以直接去官网下载：官网地址：https://cn.vuejs.org/v2/guide/installation.html，你可以下载任何一个版本，当然，你也可以直接引入cdn的路径。如下图所示：
2.简单文本显示和list列表遍历
然后我们新建一个demo，双大括号为vue的取值方式。
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8" />
-
<title>
</title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
-
</head>
-
<body>
-
<div id="app">
-
<div>{{messages}}
</div>
-
<ul>
-
<li v-for="item in list">{{item}}
</li>
-
</ul>
-
</div>
-
<div>{{messages}}
</div>
-
</body>
-
</html>
-
<script>
-
let list=[
"海贼王",
"火影忍者",
"一拳超人",
"Java",
"Python"];
-
const app =
new Vue({
-
el:
"#app",
-
data:{
-
"messages":
"娃儿瑞啦啦啦",
-
"list":list
-
}
-
});
-
</script>
| 类型 | 语法 | 说明 |
| 普通值 |
|
直接使用双大括号取值即可 |
| list |
|
使用vue语法【v-for】循环遍历list。list指new vue中的data的list值，item是迭代器，指代每一个元素，{ {item}}为取值方式 |
el属性是指定vue扫描的dom元素，一般都是div，比如上述代码，如果你将{ {message}}写到id=app的div范围外，是不会产生vue解析后的数据的，在页面上仅仅会展示{ {message}}这个样子。如下图所示：
3.简单的计数器
废话不多说，先上代码：
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8" />
-
<title>
</title>
-
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
-
</head>
-
<body>
-
<div id="app">
-
<div>计数器：{{num}}
</div>
-
<button v-on:click="add">+
</button>
-
<button @click="sub()">-
</button>
<!--@click是v-on:click的语法糖（语法糖即简写），sub是方法，一般都会加“()”来分辨他是方法，但是不加也可以-->
-
</div>
-
</body>
-
</html>
-
<script>
-
const app =
new Vue({
-
el:
"#app",
-
data:{
-
"num":
0
-
},
-
methods:{
-
add:
function(){
-
this.num++;
//获取data的num方式
-
},
-
sub:
function(){
-
this.num--;
-
}
-
}
-
});
-
</script>
v-on:click是绑定点击事件的方式
@click是上述代码的语法糖（简写）
取值可以直接写methods中的方法名，也可以方法名+()，我们一般都使用方法名+()，用于区分方法与属性。
this.属性名用于取data中的属性
代码执行后，效果如下：
转载：https://blog.csdn.net/m0_38084879/article/details/117071495
查看评论