学学前端框架vue,之前学的太浅了,之前一小时写完后端,得用4个小时调试前端,太痛苦了
于是打算系统地从头开始学一学vue
今日代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>day01</title>
</head>
<body>
<div id="app">
<button @click="cnt++">+</button>
<span>{{cnt}}</span>
<button @click="cnt--">-</button>
<button @click="fn()">log</button>
<input type="text" v-model="username">
<span>{{username}}</span>
<li v-for="(item, index) in list" >{{item}}</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
msg: 'hhhh',
cnt: '123',
list:['西瓜' , '急急急' , '看看'],
username:'',
},
methods: {
//methods中的this指向vue实例
//v-bind: 可以简写成:
//v-for = "(item,index) in 数组"
fn(){
console.log('123');
}
},
})
</script>
</body>
</html>
vue快速入门,构成和一些语法特点.
标签：cnt,vue,log,app,2.3,methods From： https://www.cnblogs.com/daniel350-wang/p/18030303