开发新的页面,使用js太麻烦?
js好久没用,使用起来比较麻烦,或者熟悉vue代码想在老项目里面使用vue怎么破?
来看看新鲜出炉的~~~~
对了,VUe.js地址:https://v2.vuejs.org/js/vue.min.js
在body里最外层div里加上 id="app";
在 script 标签里面引入刚复制好的Vue.js的文件;
剩下的就参考下方代码里面的vue部分就行↓ ↓ ↓,
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{name}}
<ui>
<li v-for="(item,index) in list" :key="index">{{item}}</li>
</ui>
</div>
<script type="text/javascript" src="./js/Vue.js"></script>
<script>
//vue部分
new Vue({
el: '#app',
data() {
return {
name: "小明",
list: ['1', '2', '3', '4', '5', '6']
}
},
methods: {
test() {
console.log(this.name);
setTimeout(() => {
this.name = "小红"
console.log(this.name);
console.log(this);
}, 2000)
}
},
mounted() {
this.test()
},
created() {
},
})
</script>
</body>
</html>
最终效果:是不是很Nice~~~~