认认真真学习Vue，从我做起。🦾

## v-bind和v-model
> v-bind使用在标签上 绑定标签的属性 title、href之类 缩写
```vue
<div :href="url"> </div>
```

> v-model使用在表单上双向绑定 
``` html 
<input v-model="innerText" type="text">
```

## v-if
> 控制表现显示状态 true和false

## v-on和v-once
> v-on给标签绑定事件
`v-on:click="handleMessage"` handleMessage写在method中
v-once让数据只渲染一次

## v-for
> 循环当前标签，根据数组来 
```html
<p v-for="item in todos"> {{item.text}}</p>
```

## 基本结构
html 部分
```html
    <div id="app">
        <p v-bind:title="counter">
            Counter: {{counter}}
        </p>

<p>
            Message:{{message}}
        </p>

<input v-model="innerText" type="text">
        <span v-if="show">
            {{innerText}}
        </span>
        <br>
        <button v-on:click="handleMessage">反转</button>
        <p v-for="item in todos"> {{item.text}}</p>
    </div>
```

js部分
``` javascript
        const Count = {
			//数据
            data() {
                return {
                    counter: 0,
                    message: "hello vue!",
                    innerText: "",
                    show: false,
                    todos: [
                        { text: '张三' },
                        { text: '李四' },
                        { text: '王五' }
                    ]
                }
            },
			//绑定的方法
            methods: {
                handleMessage() {
                    this.message = this.message.split('').reverse().join('')
                }
            },
            mounted() {
                setInterval(() => { this.counter++ }, 1000)
            },
        };
        Vue.createApp(Count).mount('#app')
```

## 组件
> 子组件中可以用`props:['prop']`来声明属性，父组件可以用`v-bind`来传值给`prop`
html部分

``` html
    <div id="app" class="default">
        
        <todo-item v-for="item in todoItems" v-bind:comptodo="item" v-bind:key="item.id">

</todo-item>
    </div>
```
js部分

```js
        const app = Vue.createApp({
            data() {
                return {
                    todoItems: [
                        { id: 1, text: "张三" },
                        { id: 2, text: "李四" },
                        { id: 3, text: "王五" },
                        { id: 4, text: "hello Vue" },
                    ]
                }
            },
        })

app.component('todo-item', {
            //props中的参数在子组件中定义，父组件中v-bind使用  类似于提前占坑 
            props: ['comptodo'],
            //props中定义了就可以拿来用
            template: `<li>{{comptodo.text}}</li>`
        })

app.mount('#app')
```

## computed和methods区别
>1. 调用的时候`{{computed}}` `{{methods()}}`
2. computed有缓存,如果数值没改变是不会重新计算的,methods没有缓存，调用一次计算一次
3. computed返回的是一个值，methods是一个函数，

标签：Vue, 前端

你的评论