vue学习之hello world-编程知识

vue学习之hello world

依赖引入

<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=""来进行传值