Vue 实例

创建 Vue 实例

在 Vue 项目中，每个 Vue 应用都是通过 Vue 构造器创建新的 Vue 实例开始的。

Vue 实例的创建方法：

let vm = new Vue({
    // ...Vue实例配置/属性/参数
})

Vue 实例的基本配置项：

名称	描述
el	指定唯一根标签
data	定义数据
methods	定义方法
components	定义子组件
computed	定义计算属性
filters	定义过滤器
watch	监听数据变化

el 唯一根标签

el 表示唯一根标签。

通过 el 属性可以将 Vue 实例与 #app 盒子绑定在一起。
Vue 实例可以操作 el 属性绑定的 #app 盒子。
可以将 Vue 实例中的数据展示在 el 属性绑定的 #app 盒子内部。

示例：el

入口页面（index.html）：

<div id="app">
    <h3>{{message}}</h3>
</div>

<!-- 在#app外部，无法读取到Vue实例内部的数据 -->
<h3>{{message}}</h3>

<script>
    let vm = new Vue({
        // 将#app盒子托管给Vue实例
        el: "#app",
        data: {
            message: "Hello，Vue.js!"
        }
    })
</script>

示例效果：

data 数据

data 属性表示 Vue 实例的数据对象。

在 #app 盒子中通过插值表达式 {{属性名xxx}} 的方式显示数据。
在 JavaScript 中可以通过 vm.$data.xxx 的方式访问数据。
Vue 实例代理了 data 对象，可以通过 vm.xxx 的方式访问数据。

示例：data

入口页面（index.html）：

<div id="app">
    <!-- 使用插值表达式访问数据 -->
    <h3>{{message}}</h3>
</div>

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            message: "Hello，Vue.js!"
        }
    })

    // 使用Vue实例访问数据
    console.log(vm.$data.message)
    console.log(vm.message)
</script>

示例效果：

methods 方法

methods 属性用于定义方法，通过 Vue 实例可以直接访问这些方法。

定义在 methods 属性中的方法可以作为页面中的事件处理方法使用，如按钮点击事件等。
在定义的方法中，this 指向 Vue 实例本身。

示例：methods

入口页面（index.html）：

<div id="app">
    <h3>{{message}}</h3>
    <!-- @click为按钮绑定点击事件 -->
    <button @click="change">点我</button>
</div>

<script>
    let vm = new Vue({
    el: "#app",
        data: {
            message: "Hello，Vue.js!"
        },
        methods: {
            change() {
                // this = vm
                this.message = "Hello，World!"
            }
        }
    })
</script>

示例效果：

computed 计算属性

computed 计算属性是一种更通用的方式来观察和响应 Vue 实例上的数据变动，当有一些数据需要随着其他数据变动而变动时，可以使用 computed 计算属性。

计算属性结果会被缓存起来。
计算属性依赖的属性发生变化时，会重新计算计算属性的值。
在 #app 盒子中直接通过插值表达式 {{属性名xxx}} 的方式显示计算属性的数据。
计算属性适合于简单的数据转换和同步计算。

示例：computed

入口页面（index.html）：

<div id="app">
    <p>单价：{{price}}</p>
    <p>数量：{{num}}</p>
    <p>总价：{{totalPrice}}</p>
    <button @click="num++">+</button>
    <button @click="num--">-</button>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            price: 20,
            num: 0
        },
        computed : {
            totalPrice () {
                // 返回计算结果给totalPrice
                return this.price * this.num
            }
        }
    });
</script>

示例效果：

watch 状态监听

Vue 提供了 watch 状态监听功能，可以监听当前 Vue 实例中的数据变化，调用当前数据所绑定的事件处理方法。

状态监听是执行代码响应数据变化的，不返回值。
状态监听不进行缓存，每当监听的数据变化时总是会执行。
状态监听适合执行数据变化时的异步操作或较为复杂的数据处理。

示例：watch

入口页面（index.html）：

<div id="app">
    <!-- v-model用于双向绑定 -->
    <input v-model="name">
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: 'Vue实例创建成功！'
        },
        watch : {
            name (newName, oldName) {
                console.log("新的值是：" + newName)
                console.log("旧的值是：" + oldName)
            }
        }
    })
</script>

示例效果：

filters 过滤器

过滤器是一种特殊的功能，用于在绑定数据到视图之前对 Vue 实例中的数据进行格式化。

过滤器可以被用于两个地方：插值表达式中和 v-bind 表达式中。
过滤器应该被添加在 JavaScript 表达式的尾部，由管道符号 | 指示。

示例：filters

入口页面（index.html）：

<div id="app">
    <!-- 在插值表达式中使用过滤器 属性名 |(管道符) 过滤方法 -->
    <h3>{{message}}</h3>
    <h3>{{message | toUpperCase}}</h3>
</div>

<script>
    let vm = new Vue({
       el: '#app',
       data: {
           message: 'HelloWorld！'
       },
        filters: {
           // value：旧的值
           toUpperCase(value) {
               // 将字母转换成大写
               // 返回新的值
               return value.toUpperCase();
           }
        }
    })
</script>

示例效果：

Vue 数据绑定

内置指令概述

Vue 提供了内置指令，通过内置指令可以用简洁的代码实现复杂的功能。

Vue 基本内置指令：

名称	描述
v-model	双向数据绑定
v-on / @xxx	监听事件
v-bind / :xxx	单向数据绑定
v-text	插入文本内容
v-html	插入包含 HTML 的内容
v-for	列表渲染
v-if	条件渲染
v-show	显示隐藏

v-model

v-model 指令用于实现双向数据绑定，常用于表单元素上。

双向数据绑定：页面中的数据改变时 data 中的数据会改变，data 中的数据改变时页面中的数据也会改变，双向数据绑定是数据驱动视图的结果。

v-model 的基本用法：

<input v-model="xxx">

示例：v-model

入口页面（index.html）：

<div id="app">
    请输入内容：<input v-model="name">
    <br>
    输入的内容：{{name}}
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: ''
        }
    })
</script>

示例效果：

v-bind

v-bind 指令用于实现单向数据绑定，常用于绑定 HTML 元素属性。

单向数据绑定：页面中的数据改变时 data 中的数据不会改变，data 中的数据改变时页面中数据会改变。

v-bind 的基本用法：

<div v-bind:元素属性="xxx"></div>
<div :元素属性="xxx"></div>

示例：v-bind

入口页面（index.html）：

<div id="app">
    <!-- v-bind:value可以缩写成:value -->
    请输入内容：<input v-bind:value="name">
    <br>
    输入的内容：{{name}}
</div>

<script>
    let vm = new Vue({
    el: '#app',
        data: {
            name: 'duozai'
        }
    })
</script>

示例效果：

Vue 提供了 v-bind 样式绑定功能，可以通过绑定内联样式和绑定样式类这两种方式来实现。

示例：使用 v-bind 绑定样式

入口页面（index.html）：

<div id="app">
    <div style="background-color: red; width: 500px; height: 500px;">
        <div style="background-color: blue; width: 200px; height: 200px;"></div>
    </div>
    <br>
    <div v-bind:style="myStyle">
        <div v-bind:style="{backgroundColor: color, width: width, height: height}">
        </div>
    </div>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            myStyle: {
                backgroundColor: 'red',
                width: '500px',
                height: '500px'
            },
            color: 'blue',
            width: '200px',
            height:  '200px'
        }
    })
</script>

示例效果：

v-bind 绑定样式时，还可以结合其他事件，实现动态切换样式的功能。

示例：v-bind 切换样式

入口页面（index.html）：

<style>
    .box {
        background-color: red;
        width: 500px;
        height: 500px;
    }
    .box2 {
        background-color: green;
        width: 500px;
        height: 500px;
    }
    .inner {
        background-color: blue;
        width: 200px;
        height: 200px;
    }
</style>

<div id="app">
    <div v-bind:class="box">
        <div v-bind:class="inner">
        </div>
    </div>
    <button @click="change">点我</button>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            box: 'box',
            inner: 'inner'
        },
        methods: {
            change() {
                this.box = 'box2'
            }
        }
    })
</script>

示例效果：

v-text

v-text 指令用于在元素内部插入文本内容。

v-text 的基本用法：

<p v-text="xxx"></p>

示例：v-text

入口页面（index.html）：

<div id="app">
    <p v-text="name"></p>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: 'Vue实例创建成功！'
        }
    })
</script>

示例效果：

v-html

v-html 指令用于在元素内部插入 HTML 标签内容。

v-html 的基本用法：

<p v-html="xxx"></p>

示例：v-html

入口页面（index.html）：

<div id="app">
    <div v-html="name"></div>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: '<h1>Vue实例创建成功！</h1>'
        }
    })
</script>

示例效果：

v-on

v-on 指令是事件监听指令，直接与标签的事件类型（如 click、change 事件等）配合使用，可以在触发事件时运行一些 JavaScript 代码，或绑定事件处理方法。

v-on 的基本用法：

<button v-on:事件类型="xxx"></button>
<button @事件类型="xxx"></button>

示例：v-on

入口页面（index.html）：

<div id="app">
    <p v-text="name"></p>
    <p v-text="count"></p>
    <!-- 绑定事件处理方法 -->
    <button @click="showInfo">点击</button>
    <!-- 在触发事件时执行JavaScript代码 -->
    <button @click="count+=Math.random()">点击2</button>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: 'Vue实例创建成功！',
            count: 0
        },
        methods : {
            showInfo() {
                this.name = "点击啦！"
            }
        }
    })
</script>

示例效果：

v-on 指令还可以结合按键修饰符，监听按键。

示例：结合按键修饰符监听事件

入口页面（index.html）：

<div id="app">
    <p v-text="name"></p>
    <input type="text" v-on:keyup.enter="showInfo">
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: 'Vue实例创建成功！'
        },
        methods : {
            showInfo() {
                this.name = "Enter回车键被按下啦！"
            }
        }
    })
</script>

示例效果：

v-for

v-for 指令用于实现页面列表渲染，常用来循环数组。

v-for 的基本用法：

<div v-for="(item, index) in list" :key="id"></div>

v-for 指令的基本参数：

名称	描述
list	要遍历的数据列表/数组
item	遍历后的每一个元素的别名
index	当前元素的索引值
key	使用 v-for 时，需要为每项提供一个唯一的 key 属性其主要用于 Vue 的 diff 算法，提高遍历效率 key 的值只能是字符串或数字类型，且必须具有唯一性建议把数据项的主键 id 属性的值作为 key 的值

示例：v-for

入口页面（index.html）：

<div id="app">
    <div v-for="(item, index) in userList" :key="item.id">
        {{index}} => {{item.name}}
    </div>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            userList: [
                { id: 1, name: '张三' },
                { id: 2, name: '李四' },
                { id: 3, name: '王五' },
                { id: 4, name: '赵六' },
                { id: 5, name: '陈七' }
            ]
        }
    })
</script>

示例效果：

v-if

v-if 指令用于控制元素显示隐藏，其会对元素进行删除和重新创建，性能较低。

v-if 的基本用法：

<p v-if="条件"><p>
<p v-else></p>

示例：v-if

入口页面（index.html）：

<div id="app">
    <p v-text="name" v-if="isShow"></p>
    <button @click="showInfo">点击</button>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: 'Vue实例创建成功！',
            isShow: true
        },
        methods : {
            showInfo() {
                this.isShow = !this.isShow
            }
        }
    })
</script>

示例效果：

v-show

v-show 指令用于控制元素显示隐藏，其本质是操作元素的 display 属性，不会对元素进行删除和重新创建，性能较高。

v-show 的基本用法：

<p v-show="条件"></p>

示例：v-show

入口页面（index.html）：

<div id="app">
    <p v-text="name" v-show="isShow"></p>
    <button @click="showInfo">点击</button>
</div>

示例效果：

Vue.js 前端开发实战之 02-Vue 开发基础（1）

Vue 实例

创建 Vue 实例

el 唯一根标签

data 数据

methods 方法

computed 计算属性

watch 状态监听

filters 过滤器

Vue 数据绑定

内置指令概述

v-model

v-bind

v-text

v-html

v-on

v-for

v-if

v-show

添加新评论

最新合集

随机推荐

近期文章

近期评论

目录