吴荣昌个人博客|五天入门Vue--Day1

[[ $t(slide_text) ]]

[[ item.c ]]

五天入门Vue--Day1

[[ $t('发布时间') ]]：2023-03-10 [[ $t('作者') ]]：吴荣昌 [[ $t('来源') ]]：吴荣昌个人博客

HTML5 CSS JavaScript Vue

## 为什么要学习Vue：

![image-20221204170539598](http://typora.wrcblog.cn/typora/img/image-20221204170539598.png)

## Vue和Jquery有什么区别：

> **数据驱动视图**

![image-20221204170605011](http://typora.wrcblog.cn/typora/img/image-20221204170605011.png)

## 插值表达式：

> 使用 {{  }} 进行渲染 `data:{ }` 里面的变量

```vue
<body>
<div id="app">
    姓名：{{ dic.name }}
    班级第二个人：{{ studentList[1].name }}
    <div v-html="aDemo"></div>
    <div v-text="aDemo"></div>
</div>
<script>
    var vue = new Vue({
        el: '#app', // vue挂在的位置，不能是body
        data: {
            a: '欢迎过来到vue！',
            dic: {
                name: '张三',
                age: 21,
                addr: '福建省厦门市',
            },
            studentList: [
                {name: '王五'},
                {name: '李四'},
            ],
            aDemo: '<a href="https://www.baidu.com" target="_blank">百度</a>',
        }
    })
</script>
</body>
```

## 指令：

> v-html：渲染标签
>
> v-text：渲染文本
>
> v-bind：绑定属性
>
> v-if：条件性地渲染一块内容
>
> v-else：v-if的else块【同级使用】
>
> v-show：同v-if
>
> v-for：渲染列表
>
> v-on：绑定事件

## 绑定属性：

```vue
<body>
<div id="app">
    <dic class="name" v-bind:title="dic.name"></dic>
    
    <dic class="name" :id="dic.name"></dic>
</div>
<script>
    var vue = new Vue({
        el: '#app', // vue挂在的位置，不能是body
        data: {
            dic: {
                name: '张三',
                age: 21,
                addr: '福建省厦门市',
            },
        }
    })
</script>
</body>
```

## 使用JavaScript表达式：

```vue
<body>
<div id="app">
    <div class="name" v-bind:title="a.split('.')[1]">
        {{ a.length === 0 ? '没有数据' : a }}
        -{{ a.split('.')[1] }}
    </div>
</div>
<script>
    var vue = new Vue({
        el: '#app', // vue挂在的位置，不能是body
        data: {
            a: 'www.baidu.com'
        }
    })
</script>
</body>
```

## 条件渲染：

### v-if：

> `v-if=flag`为true的时候显示，为false的时候消失

```vue
<body>
<div id="app">
    <div v-if="flag">
        {{ a }}
    </div>
    <div v-else>
        if没匹配到就显示我
    </div>
</div>
<script>
    var vue = new Vue({
        el: '#app', // vue挂在的位置，不能是body
        data: {
            a: '欢迎过来到vue！',
            flag: false,
        }
    })
</script>
</body>
```

![image-20221204175333579](http://typora.wrcblog.cn/typora/img/image-20221204175333579.png)

### v-show：

```vue
<body>
<div id="app">
    <div v-show="flag">
        {{ a }}
    </div>
</div>
<script>
    var vue = new Vue({
        el: '#app', // vue挂在的位置，不能是body
        data: {
            a: '欢迎过来到vue！',
            flag: false,
        }
    })
</script>
</body>
```

![image-20221204175427491](http://typora.wrcblog.cn/typora/img/image-20221204175427491.png)

### v-if和v-show的区别：

- v-if 如果是false，不会渲染
- v-show如果是false，不会显示，但是多一条属性【`style='display:none;'`】

> 那个用的多？
>
> 看你想不想把数据给用户看！！！

## 列表渲染：

### 遍历列表：

```vue
<body>
<div id="app">
    <ul>
        <li v-for="(item, index) in studentList" v-bind:key="item.id">
            {{ index + 1 }} - {{ item.name }}
        </li>
    </ul>
</div>
<script>
    var vue = new Vue({
        el: '#app', // vue挂在的位置，不能是body
        data: {
            studentList: [
                {id: 1, name: '张三'},
                {id: 2, name: '李四'},
                {id: 3, name: '王五'},
                {id: 4, name: '张三'},
            ],
        }
    })
</script>
</body>
```

### 遍历对象：

```vue
<body>
<div id="app">
    <ul>
        <li v-for="item in obj">
            {{ item }}
        </li>
        --
        <li v-for="(item, key) in obj">
            {{ key }} - {{ item }}
        </li>
        --
        <li v-for="(item, key, index) in obj">
            {{ key }} - {{ item }} - {{ index }}
        </li>
    </ul>
</div>
<script>
    var vue = new Vue({
        el: '#app', // vue挂在的位置，不能是body
        data: {
            obj: {
                name: '吴荣昌',
                age: 21,
                addr: '福建省厦门市'
            }
        }
    })
</script>
</body>
```

> 一个参数：就是遍历对象的值
>
> 两个参数：值、键
>
> 三个参数：值、键、索引

[[ $t("上一篇") ]]：PTA-求一批整数中出现最多的个位数字 [[ $t("下一篇") ]]：五天入门Vue--Day2

[[ $t('你觉得文章怎么样') ]]