Vue 3.0 快速上手基础篇（一）

前言

Vue目前是一款流行的前端框架，已更新到3.0版本，她是一套用于构建用户界面的渐进式框架，易于上手并且有强大的社区，和友好的开发文档。下面我们一起一边操作一边学习vue3.0，一定要自己敲。

一、引入

如何安装vue项目：

1、直接引入CND: unpkg.com/vue@next

2、 手动使用npm安装

3、使用官方的CLI来构建一个项目: vue create hello-world

1、直接引入CND

使用

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

<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = {
        data() {
            return {
                msg: 'hello vue'
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>

2、第二点需要手动配置这里就不说了，只看CLI的构建就行。

cmd

// 全局安装@vue/cli
npm install -g @vue/cli `OR` yarn global add @vue/cli

// 创建一个项目，可以一直默认都最后
vue create hello-world

// 进入项目目录
cd hello-world

// 安装依赖
npm install

// 运行项目，如果安装了cnpm镜像。
npm run serve `OR` cnpm run serve

vue安装完成，下面就开始进行操作。

一、基础

1.插值

1.1 文本：数据绑定使用双大括号{{}}

<div>{{msg}}</div>

<script>
const app = {
    data() {
        return {
            msg: 'hello vue'
        }
    }
}
</script>

1.2 文本：使用v-text指令

<div v-text="msgText"></div>

<script>
const app = {
    data() {
        return {
            msgText: 'hello vue'
        }
    }
}
</script>

1.3 原始HTML：输出真正的HTML,使用v-html指令

<div v-html="msgHtml"></div>

<script>
const app = {
    data() {
        return {
            msgHtml: '<p>hello vue</p>'
        }
    }
}
</script>

1.4 绑定属性值：使用v-bind指令

<div v-bind:title="msgTitle"></div>

<script>
const app = {
    data() {
        return {
            msgTitle: 'hello vue'
        }
    }
}
</script>

1.5 javascript表达式

<div>{{isShow ? "显示" : "不显示"}}</div>
<div v-bind:title="isShow ? '显示' : '不显示'"></div>

2.指令

2.1 v-bind 绑定属性值

// 完整写法
<div v-bind:title="msgTitle"></div>

// 缩写
<div :title="msgTitle"></div>

// 动态属性
<div :[attrbut]="msgTitle"></div>
<div v-bind:[attrbut]="msgTitle"></div>

<script>
    const app = {
        data() {
            return {
                attrbut: 'title'
            }
        }
    }
</script>

2.2 v-on 绑定事件

// 完整写法
<div v-on:click="handlerClick">点击</div>

// 缩写
<div @click="handlerClick">点击</div>

// 动态属性
<div v-on:[attrclick]="handlerClick">点击</div>
<div @[attrclick]="handlerClick">点击</div>

<script>
    const app = {
        data() {
            return {
                attrClick: 'click'
            }
        },
        methods: {
            handlerClick () {
                console.log('hello vue')
            }
        }
    }
</script>

2.3 v-if、v-else-if、v-else 条件渲染

注意：

1. v-else-if必须在v-if或v-else-if后面
2. v-else必须在v-if或v-else-if后面

<div v-if="isRender === 1">为1时我被渲染了~</div>
<div v-else-if="isRender === 2">为2时我被渲染了~</div>
<div v-else>除了1和2我都被渲染了~</div>

2.4 v-show 通过切换元素的display css 来触发过渡效果

<div v-show="isRender === 1">为1时我真显示~</div>

2.5 v-for 遍历多次渲染元素和模板库

注意：

1. 添加一个key 来提供一个排序提示
2. 使用了v-for尽可能不要使用v-if,将数据处理好以后再遍历

<div v-for="(item, index) in 6" :key="index">我被渲染了+{{item}}~</div>

2.6 v-model 在表单控件或者组件上创建双向绑定

限制于：

input、select、textarea: 标签

components: 组件

<div>
    <input type="text" v-model="indexText" />
</div>
<div>
    <select v-model="selectText">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div>
<div>
    <textarea v-model="textareaText" id="" cols="30" rows="6"></textarea>
</div>

<script>
    const app = {
        data() {
            return {
                indexText: 'hello input',
                selectText: 2,
                textareaText: 'hello textarea'
            }
        }
    }
</script>

3. 计算属性: computed

当某些复杂逻辑中包含响应式数据时，我们可以考虑使用计算属性来实现。如下例子：

<div @click="num += 1">计数：{{setNum}}</div>
<script>
    const app = {
        data() {
            return {
                num: 1,
                num2: 2
            }
        }
    }
</script>

当我们响应式数据`num`的值，我们不需要再去修改计算属性中的值就会自动把修改后的值反馈到页面上。

4.侦听器: watch

用于侦听响应数据的变动，但只能侦听单个响应数据。只有当你所侦听的数据发生改变以后，你的表达式才会触发活动。如下例子：

<div @click="firstName += 1">watch：{{firstName}} + {{fullName}}</div>
<script>
    const app = {
        data() {
            return {
                firstName: 2,
                fullName: 10
            }
        },
        watch: {
            firstName(val) {
                this.fullName += val
            }
        }
    }
</script>

5.绑定Class与内联样式

5.1.绑定Class，我们可以使用v-bind:class(简写:class)来实现

// 对象语法
<div class="static" :class="{ active: isActive, 'text-wrap': isText }">绑定Class,对象语法</div>
<script>
    const app = {
        data() {
            return {
                isActive: true,
                isText: true
            }
        }
    }
</script>

// 数组语法
<div class="static" :class="[activeClass, textWrapClass]">绑定Class,数组语法</div>
<script>
    const app = {
        data() {
            return {
                activeClass: 'active',
                textWrapClass: 'text-wrap'
            }
        }
    }
</script>

5.2.内联样式，我们可以使用v-bind:class(简写:class)来实现

<div class="static" :style="{ color: color, fontSize: fontSize }">绑定Style</div>
<script>
    const app = {
        data() {
            return {
                color: 'red',
                fontSize: '20px'
            }
        }
    }
</script>

6.事件处理

6.1. 触发事件v-on(简写'@')

// click事件
<div v-on:click="handlerGreet">click点击事件,处理方法</div>
<div v-on:click="likeVue = 'like vue'">click点击事件,处理表达式:{{likeVue}}</div>
<script>
    const app = {
        data() {
            return {
                likeVue: ''
            }
        },
        methods: {
            handlerGreet () {
                console.log('hello vue')
            }
        }
    }
</script>

6.2. 事件修饰符

<!-- 阻止单击事件继续冒泡 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

6.3. 按键修饰符

<input @keyup.enter="submit" />
<input @keyup.tab="submit" />
<input @keyup.delete="submit" />
<input @keyup.esc="submit" />
<input @keyup.space="submit" />
<input @keyup.left="submit" />
<input @keyup.right="submit" />

结语：本章主要介绍了vue的入门操作，后面还有更新的会再更新。