码云实时更新学习demo地址:https://gitee.com/dxl96/vuexuexi
VUE基础篇(初体验)
1、vue.js的引入
需要先去官网下载vue.js,然后在我们需要使用的html文件中引入该js文件
<script src="../js/vue.js"></script>
或者cdn引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2、vue.js的使用
2.1、vue对象的创建与数据绑定
创建Vue对象,直接 new Vue() ,在new的时候传入一个待vue解析的对象,这个对象含有一些属性,比如:el(用于挂载要管理的元素),data(定义的数据,最终会替换html中指定的变量值)等等
{{属性名}} 作为值替换,会被传入vue对象中的属性值替换掉,该属性定义在传入对象的data属性中,与花括号中的属性名称一致,解析的时候就会从data中找出相同名称的属性,把该属性的值用来替换{{属性名}}
v-for 是vue标签中指定for循环的标签,标签对应的值的也就是类似python中for循环或者java中foreach的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue demo</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- {{属性名}} 作为值替换,会被传入vue对象中的属性值替换掉,该属性定义在传入对象的data属性中,
与花括号中的属性名称一致,解析的时候就会从data中找出相同名称的属性,把该属性的值用来替换{{属性名}}-->
{{message}}
<ul>
<!-- v-for是vue标签中指定for循环的标签,标签对应的值的也就是类似python中for循环或者java中foreach的写法-->
<li v-for="item in lists">{{item}}</li>
</ul>
</div>
<script>
//let(变量)/const(常量)
//编程范式,声明式编程
const app = new Vue({
el:'#app', //用于挂载要管理的元素,类似于jquery中$("#"),找到要操作的DOM节点
data:{ //定义的数据,这些定义的数据,只在el 挂在的元素标签的内部才能使用解析
message:"你你好啊,兄弟",
lists:['星际','盗梦','少年'],
}
})
</script>
</body>
</html>
效果
2.2、vue监听事件
vue事件,以 v-on: 开头,指定不同的事件,事件的属性值可以是方法,也可以是代码片段,方法定义在传入vue的对象的methods属性中,vue内部调用data属性中数据对象的属性必须同 this 来指定
@ 是语法糖的一种写法,等价于 v-on: ,为了简写方便,用以替换v-on:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue demo</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<span>当前计数:{{counter}}</span>
<!-- vue事件,以v-on:开头,指定不同的事件,事件的属性值可以是方法,也可以是代码片段-->
<button v-on:click="counter++">+</button>
<button v-on:click="counter--">-</button>
<button v-on:click="add">+2</button>
<button v-on:click="sub">-2</button>
<!-- @是语法糖的一种写法,等价于v-on:,为了简写方便,用以替换v-on:-->
<button @click="counter++">@+</button>
<button @click="counter--">@-</button>
</div>
<script>
//let(变量)/const(常量)
//编程范式,声明式编程
const app = new Vue({
el:'#app', //用于挂载要管理的元素,类似于jquery中$("#"),找到要操作的DOM节点
data:{ //定义的数据,这些定义的数据,只在el 挂在的元素标签的内部才能使用解析
counter:0
},
methods:{//定义的方法,这些定义的方法也是只有在el 挂在的元素标签的内部才能使用解析
add: function () {
console.log("add被执行")
/*调用data属性里的数据,必须用this指定,因为vue实例相当于为我们做了一层代理,并不是app.data.counter这种调用方式,
这种是不能被识别的 */
this.counter += 2;
},
sub: function () {
console.log("sub被执行")
this.counter -= 2;
}
}
})
</script>
</body>
</html>
效果