Vue案例入门 列表展示 计数器

千行

关注

阅读 85

2023-03-14


文章目录

  • ​​1 案例一​​
  • ​​2 列表展示​​
  • ​​3 计数器​​

1 案例一

<div id="app">{{ message }}</div>

<script src="../js/vue.js"></script>
<script>
// 编程范式:声明式编程
const app = new Vue({
el: '#app', // 用于关在要管理的元素
data: { // 定义数据
message: "你好,有勇气的牛排"
}
})

// 元素js的做法(编程范式:命令式编程)
// 1. 创建div元素,设置id属性
// 2. 定义一个变量叫message
// 3 将message变量放在前面的div元素中显示
</script>

2 列表展示

<div id="app">
<ul>
<li v-for="item in movies">{{ item }}</li>
</ul>
</div>

<script src="../js/vue.js"></script>
<script>

const app = new Vue({
el: '#app', // 用于关在要管理的元素
data: { // 定义数据
message: "你好,有勇气的牛排",
movies: ['灰太狼', '有勇气的牛排', '九万里']
}
})

// 响应式:在浏览器console中调式
// app.movies.push('666')

</script>

3 计数器

  • methods:该属性用于在Vue对象中定义方法
  • @click:用于监听某个元素的点击事件,并且需要指定当前发生点击时,执行的方法(方法通常是methods中定义的方法)

<div id="app">
<h2>当前计数:{{ counter }}</h2>
<!-- <button v-on:click="counter++">+</button>-->
<!-- <button v-on:click="counter--">-</button>-->

<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>

<script src="../js/vue.js"></script>
<script>

const app = new Vue({
el: '#app',
data: {
counter: 0
},
methods:{
add: function () {
console.log('add被执行')
this.counter++
},
sub:function () {
console.log('sub被执行')
this.counter--
}
}
})

</script>

项目地址
​​​ https://github.com/courageSteak/vue-framework​​

​​https://www.couragesteak.com/article/153​​


精彩评论(0)

0 0 举报