vue01

Vue

Vue2.x / Vue3.x - 尤雨溪

Vue2.x 文档

Vue3.x 文档

MVVM

Model: 模型

View: 视图

ViewModel: 视图模型

MVVM采用双向绑定：View的变动，自动反映在ViewModel，反之亦然。

使用演示

Vue2.x 是需要创建 Vue 实例

const vm = new Vue({
    el: '#app', // View
    // data 是一个普通对象
    data: { // Model
        message: 'Hello 千锋成都'
    },
})

也可以写为:

// 也可写为：
const vm = new Vue({
    data() {
        return {
            message: 'Hello Vue2.x'
        }
    }
})
// 挂载
vm.$mount('#app')

Vue3.x 调用 createApp 创建应用实例

// Vue3.x 中调用 createApp() 方法创建应用实例
const app = Vue.createApp({
    // 这个 data 是一个函数，在函数体内部返回一个普通对象
    data() {
        return {
            message: 'Vue3.x Hello'
        }
    },
})
// 挂载
app.mount('#app')

声明式渲染

Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统。

模板:

<div id="app">
    <div>计数数字: {{ count }}</div>
    <div>
        <button v-on:click="count += 5">计数加</button>
        <button @click="count--">计数减</button>
    </div>
</div>

Vue:

// 创建实例
// 传递给 createApp() 的参数叫 option(选项) 对象
const app = Vue.createApp({
    // 这是一个函数，（先固定这么写）
    data() {
        return {
            count: 0,
        }
    }
})

// 挂载
app.mount('#app')

模板语法

文本

插值

{{ expression }}

expression 是表达式，不能书写如 var a = 15 这样的语句

{{ }} 内部如果渲染 html 文本，会进行转义处理，目的是避免 XSS 攻击

也可以在标签内部使用 v-text 指令来渲染文本:

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

可以使用 v-pre 指令原样渲染（即不解析 vue 模板语法内容）:

<div v-pre>{{ message }}</div>

html

如果需要渲染 html 文本，可使用 v-html 的指令来渲染:

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

注意：绝不要对用户输入进行 html 渲染

属性

可使用 v-bind 指令动态为标签绑定属性值:

<div v-bind:title="tip">{{ message }}</div>

由于 v-bind 经常使用，所以可简写为 :

<div :title="tip">{{ message }}</div>

指令

在标签中带有特殊前缀 v- 的属性，vue 会解析这些属性，然后实现预定义的功能。

指令的值是一个 JS 表达式的内容，指令的任务是在其表达式的值变化时响应式地更新 DOM

名称：

比如 bind、html、text、pre 这些指令名称

参数：

在指令名称后以 : 连接（即 : 后面的内容是指令参数名称）

值：

即指令 = 号后的内容为指令值

修饰符：

在指令名或参数名后以 . (点) 定义的后缀

常用指令：

• v-html / v-text / v-pre / v-bind
• 事件绑定: v-on
• 条件渲染: v-if / v-else-if / v-else / v-show
• 列表渲染: v-for