vue官网:https://cn.vuejs.org
Vue
一.回顾
1.json异步请求
$.agax{
{
type:"post"
url:""
data:""
datatype:""
success:function(data){}
}
}
二.Vue入门练习
1. 导入Vue的js文件
将vue的js文件放入webapp下的新建js目录内
然后使用标签导入
<script src="js/vuejs-2.5.16.js"></script>
2. 入门代码(一)
主要内容:
1,插值表达式 {
{data}} :两个括号,中间引用数据
2.new Vue({data}):创建Vue
3.el:"#app" : 将id为app的区域交给Vue管理
4.message:定义该区域要展示的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{
{message}}<!-- Vue的插值表达式。把data中定义的数据显示到此处-->
</div>
</body>
<script>
//view model
//创建Vue
new Vue({
el:"#app",//由Vue接管Id为app的区域
data:{
message:"Hello Vue" //注:此处不要加分号
}
})
</script>
</html>
入门代码(二):v-on 绑定事件
v-on:可以简写为@ -> @click
<body>
<div id="app">
{
{message}}
<button v-on:click="fun1('Vue v-on')">vue的onclick</button>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
message:"Hello Vue"
},
methods:{
fun1:function (msg) {
alert("Hello");
this.message=msg;
}
}
})
</script>
入门代码(三):阻止事件默认行为
<body>
<div id