依赖引入
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
Hello world 实现
<html>
<head>
<style>
</style>
</head>
<body>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id = "app">{{msg}}</div>
<script>
new Vue({
el: '#app',
data() {
return {
msg: "hello geek!"
}
}
})
</script>
</body>
</html>
- 给节点定义id,这样组件可以和指定节点进行绑定
- Vue对象中的data节点,是对此实例数据的说明
- 其中div中获取对象实例中定义的msg的值通过
{{}}
来获取,这个叫做插值表达式
效果展示
按钮、todo列表
通过点击按钮获取输入框中的值,添加到todo列表中
- 定义按钮、绑定方法
<div>
<input type="text" v-model="info">
<button @click="handleClick">添加</button>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
msg: "hello geek!",
info: ''
}
},
methods: {
handleClick() {
console.log(this.info)
}
}
})
</script>
input
为输入框,需要通过获取输入框中的内容添加到todo列表中,通过参数绑定:v-model="info"
进行绑定,在Vue对象中定义info
属性,用来接收输入框的值button
绑定方法:@click = "handleClick"
,在Vue对象中定义方法列表,其中定义 handleClick
方法
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
为将输入框的数据动态添加到todo列表中,使用v-for="item in list"
, 使用{{item}}
获取值,其中数据是从list
中取的,所以需要在对象内定义list
属性,是数组类型
new Vue({
el: '#app',
data() {
return {
msg: "hello geek!",
info: '',
list: []
}
},
methods: {
handleClick() {
console.log(this.info)
this.list.push(this.info)
}
}
})
完整body如下:
<body>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id = "app">{{msg}}
<div>
<input type="text" v-model="info">
<button @click="handleClick">添加</button>
</div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
msg: "hello geek!",
info: '',
list: []
}
},
methods: {
handleClick() {
console.log(this.info)
this.list.push(this.info)
}
}
})
</script>
</body>
在点击方法内,将获取到的输入框的值添加到数组中
todo列表添加完成后清空
handleClick() {
if (this.info != '') {
this.list.push(this.info)
this.info = ''
}
}
组件定义
如果<li v-for="item in list">{{item}}</li>
这种遍历场景很多的话,我们为了不希望每个地方都写一遍,所以将此进行封装和定义:
Vue.component('todo-item', {
props: ['item'],
template: '<li class="item">{{item}}</li>'
})
// 在使用时
<todo-item v-for="item in list" :item="item"></todo-item>
Vue.component
是注册一个名为todo-item
的组件,props
是用来接收参数的,这个参数是让template
中使用的:item="item"
是将for
遍历中的item进行绑定的,和props
中定义的参数一致,如果props
中定义的参数为:value
,要给组件传值的话,就需要使用:value=""
来进行传值文章来源:https://www.toymoban.com/news/detail-669738.html
总结
- 插值表达式
- vue对象实例化,我们的数据都是在对象中定义,以及方法也是在其中定义
- 属性绑定:
v-model
、循环遍历:v-for
、参数绑定:参数名称
以上写法我们每次都要刷新页面,没有热刷新,下面我们即将使用热更新的方式进行开发和学习文章来源地址https://www.toymoban.com/news/detail-669738.html
到了这里,关于vue学习之hello world的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!