Vue从零开始之Vue基础_从零开始vue-优快云博客

本文链接：https://blog.youkuaiyun.com/lixiaolian123/article/details/106952390

Vue是一个实现MVVM模式的框架，专注于数据绑定和DOM更新。本文介绍了Vue的下载、兼容性、基本使用，包括如何创建第一个项目、Vue实例的生命周期及其钩子函数的触发时机，还详细讲解了Vue的语法，如数据绑定、条件判断、循环遍历、事件监听、计算属性等，帮助初学者掌握Vue的基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是Vue?

Vue就是一个MVVM模式的实现者,MVVM最重要的就是ViewModel,ViewModel是为了实现数据的双向绑定,就是为了解耦.

Model：模型层，在这里表示 JavaScript 对象
View：视图层，在这里表示 DOM（HTML 操作的元素）
ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者

在 MVVM 架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer(观察者)

ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel 能够监听到视图的变化，并能够通知数据发生改变

Vue.js 就是一个 MVVM 的实现者，他的核心就是实现了 DOM 监听与数据绑定. 并且是一个渐进式框架

Vue使用

布局,语法,组件,网络

下载node.js

官网下载

兼容性

Vue 不支持 IE8 及以下版本，但它支持所有兼容 ECMAScript 5 的浏览器。

导入文件

<!-- 开发环境版本，包含了有帮助的命令行警告,不带版本号使用最新版 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 ,生产环境指定版本号防止新版本出错-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

第一个项目

html:5+tab生产h5模板

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="vue">
    {{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            message: 'Hello Vue!'
        }
    });
</script>
</body>
</html>

说明

el:’#vue’：绑定元素的 ID
data:{message:‘Hello Vue!’}：数据对象中有一个名为 message 的属性，并设置了初始值 Hello Vue!
此时就可以在控制台直接输入 vm.message=‘xxx’ 来修改值，中间是可以省略 data 的.在这个操作中，我并没有主动操作 DOM，就让页面的内容发生了变化，这就是借助了 Vue 的数据绑定功能实现的；MVVM 模式中要求 ViewModel 层就是使用观察者模式来实现数据的监听与绑定，以做到数据与视图的快速响应。

Vue 实例的生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

注意： created 钩子函数和 mounted 钩子函数的区别

钩子函数的触发时机

beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。

mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

Vue常见问题

input复用问题

Vue进行DOM渲染时,出于性能的考虑,会尽可能复用已存在的元素,而不是创建新的元素.

导致删除原input渲染一个新的input的时候用户输入的信息还在.

解决:

当两个input的key相同时会复用
不同时会创建一个新的元素而不是复用已存在的

<span v-if="isM"><input ....  key="username"></span>
<span v-else><input ....  key="email"></span>

Vue语法

vue对象

被vue接管的属性或方法中:

如果某个参数符合变量的命名规范,Vue会将其当成属性名或方法名进行解析,这时如果未定义则会产生错误(Property or method “变量” is not defined on the instance but referenced during render.).
使用引号包裹,Vue就不会自行进行解析了.

<script type="text/javascript">
    var vm = new Vue({
        //el绑定元素id
        el: '#vue',  
        //data初始化数据, 类型为: 对象|function
           
        data: {
            message: 'Hello Vue!'
        },
    //data组件的定义只接受 function
        //data: function () {
        //    return { a: 1 }
        //},
        
        //methods初始化方法,调用方法需要带()
            //方法中使用this调用data中的数据
         methods: {
            sayHi: function (event) {
                // `this` 在方法里指向当前 Vue 实例
                alert(this.message);
            }
        },
        //过滤器,类似linux的管道流
            //使用过滤器: {{item.price | showPrice}}
        filters:{
            //过滤方法  
            showPrice(price){
                return xxx
            }
        },
          //计算属性,属性的值会被缓存,调用计算属性不带()
        computed: {
            currentTime2: function () {
                this.message;
                return Date.now();
            }
        },
        //各种钩子(回调)函数,不能使用箭头函数来定义一个生命周期方法,因为箭头函数的this绑定了父上下文
        created: function(){
            //xxxx
        },
        // 注册组件
        components: {
            myli: {
                //组件信息
            }
        }
    });
</script>

绑定数据

行内使用: {{msg}} 双花括号取data中对应变量的值
- {{count * 2}} / {{msg+ ’ ’ +msg2}} / {{ 方法() }} / {{计算属性}}
标签内: 直接使用属性名取值. 前提是标签的属性已经被vue接管

Vue.set 修改数组的值

直接通过数组下标修改值,Vue不会重新将其渲染到页面,可以使用Vue.set或数组的splice方法来修改数组指定下标的值.

Vue.set(要修改的数组,索引值,修改后的值)

条件判断语句 v-if

<div id="vue">
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
        var vm=new Vue({
           el:'#vue',
           data:{
               ok:true
           }
        });
</script>

注意：使用 v-* 属性绑定数据是不需要双花括号包裹的. 微信小程序要包裹. 控制台使用vm.ok=true 修改数据

连续的条件判断语句

<div id="vue">
    <h1 v-if="type==='a'">a</h1>
    <h1 v-else-if="type==='b'">a</h1>
    <h1 v-else-if="type === 'C'">C</h1>
    <h1 v-else>其他</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
        var vm=new Vue({
           el:'#vue',
           data:{
               type:'a'
           }
        });
</script>

===全等于控制台使用vm.type='b’修改数据

是否展示元素 v-show

<h1 v-show="isShow"></h2>

v-if和v-show的区别:

v-if是直接删除和创建元素
v-show是添加行内样式display:none

循环遍历语句 v-for

可以遍历出对象或同时遍历出对象和下标

<div id="vue">
    //遍历数组
    <ul>
           <li v-for="(item,index) in items">
            {{item.message}}+{{index}}
        </li>
         <li v-for="item in items">
            {{item.message}}+{{index}}
        </li>
    </ul>
    
    //遍历对象中的属性
    <ul>
        <li v-for="value in info">{{value}}</li>
    </ul>
    <ul>
        <li v-for="(value,key) in info">{{value}}-{{key}}</li>
    </ul>
    <ul>
        <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
    </ul>
    
    // 使用<template>循环渲染一段包含多个元素的内容
    <ul>
      <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divider" role="presentation"></li>
      </template>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
        var vm=new Vue({
           el:'#vue',
           data:{
               items:[
                    {message:"a"},
                    {message:"b"},
                    {message:"c"}
               ],
               infor:{
                   name: 'xiao',
                   age: 18,
                   height: 188
               }
           }
        });
</script>

官方建议在使用v-for时在对应的元素上添加:key="xxx"属性,使用Diff算法提高更新虚拟DOM速度.但要保证key指定的值唯一不能重复

只渲染一次 v-once

v-once修饰的元素或组件只渲染一次,不会随数据的改变而改变

<h2 v-once>{{msg}}</h2>

解析标签进行显示 v-html

<h2 v-html="url"></h2>

data: {
    url: '<a>啊啊啊</a>'
}

不解析直接显示 v-text

//啊啊啊 会被 你好 替换
<h2 v-text="msg">啊啊啊</h2>

data: {
    msg: '你好'
}

不进行转义 v-pre

会直接在页面显示 {{msg}} 而不是对应的值

<h2 v-pre>{{msg}}</h2>

vue解析元素后会自动将 `v-cloak` 属性删除

可用于未解析完成前不显示任何内容

<style>
    [v-cloak]{
        display: none;;
    }
</style>

<h2 v-cloak>{{msg}}</h2>

表单输入 v-model

UI控件的数据双向绑定,将页面中的数据和js中的数据绑定起来. v-model相当于v-bind+input事件.

v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

v-model绑定相同变量的单选/复选框默认成为一组,不需要指定name属性

<div id="vue">
    单行文本：<input type="text" v-model="message" />  单行文本是：{{message}}<br/>
    多行文本：<textarea v-model="message"></textarea>  多行文本是：{{message}}<br/>
    单复选框：
    <input type="checkbox" id="checkbox" v-model="checked">  <label for="checkbox">{{ checked }}</label><br/>
    多复选框：
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <span>选中的值: {{ checkedNames }}</span><br/>
    单选按钮：
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <span>选中的值: {{ picked }}</span><br/>
    下拉框：
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>选中的值: {{ selected }}</span>
    
    value值绑定: 从data中取值设置为表单元素的value
    <label v-for="item in items" :for="item">
        <input type="checkbox" :value="item" :id="item" v-model="hobbies" >{{item}}
    </label>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            message:'',
            checked: false,
            checkedNames: [],
            picked:'',
            selected: '',
            items: ['足球','篮球','乒乓球'],
            hobbies: []
        }
    });
</script>

注意： v-model 会忽略所有表单元素的value, checked、selected 属性设置的初始值而总是将 Vue 实例的数据作为初始值。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

注意: 如果 v-model 表达式的初始值未能匹配任何选项，元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

v-model 修饰符

v-model.修饰符

.lazy 懒加载:表单失去焦点或回车时才会更新数据(默认是同步的)
.number 将输入的内容修改为数字类型.使用v-model绑定数据时,无论输入什么默认当做字符串处理
.trim 去重输入内容首尾的空格

监听事件 v-on

v-on:可以缩写为@

参数传递问题:

使用v-on进行事件监听并且方法无形参时,方法的()可以省略
方法有一个形参,但调用时省略了().Vue会将浏览器生成的event事件对象传入到方法中
方法有多个形参时, 方法的实参使用 $event ,传递浏览器生成的event事件对象

<div id="vue">
    <!--这里的sayHi带不带()都行-->
    <button v-on:click="sayHi">点我</button>
    <button v-on:click="counter++">{{counter}},点击加一</button>
    //使用v-bind+input事件实现v-model的效果
    <input type="text" :value="message" v-on:input="messgae = $event.target.value">{{counter}},点击加一</input>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            message: 'Hello World',
            counter: 0
        },
        // 在 `methods` 对象中定义方法
        methods: {
            sayHi: function (event) {
                // `this` 在方法里指向当前 Vue 实例
                alert(this.message);
            }
        }
    });
</script>

v-on修饰符

.stop: 阻止事件冒泡.
- 如果未使用stop点击按钮,btnClick和divClick两个事件都会触发.
- 使用后点击按钮触发btnClick,点击aaaa触发divClick.

<div @click="divClick">
    aaaaaaa
    <button @click.stop="btnClick">按钮</button>
</div>

.prevent: 阻止默认事件发生

<!-- 阻止默认的提交事件 -->
<form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitclick">
</form>

.keyCode(键代码)|keyAlias(键别名): 监听键盘某个按键
- .enter: 监听回车键

<input type="text" @keyup.enter="keyUp">

.once: 只触发一次事件

<input type="text" @keyup.once="keyUp">

.native: 监听组件根元素的原生事件

绑定标签的属性 v-bind

v-bind:可以缩写为:

使用v-bind接管herf后才会被解析为data中的数据,不然会被当做普通的字符串

<a v-bind:href="info.url" target="_blank">{{info.url}}</a>

//为true时渲染该属性,false时不渲染  
<button :diasbled="boolean">按钮</button>

动态绑定class

对象语法:
当类名对应的boolean值为true时会绑定该类名,为false时则不绑定. 对象的key一定不会被vue解析,value如果使用单引号包裹则不会被解析

<h2 :class="{类名1: boolean, 类名2: boolean}">{{msg}}</h2>

<!-- 两个class会进行合并, 最终变为 class="title active"-->
<h2 class="title" :class="{active: isActive, line: isLine}">{{msg}}</h2>
data: {
    isActive: 'true',
    isLine: 'false'
}

数组语法: 数组中未使用单引号包裹的会解析为data中的值,使用单引号包裹的直接显示不会被解析

<!-- class="aaa bbb title" -->
<h2  :class="[active,line,'title']">{{msg}}</h2>
data: {
    active: 'aaa',
    line: 'bbb'
}

动态绑定css样式style

对象语法:

<h2 :style="{fontSize: finalSize, color: finalColor}">{{msg}}</h2>

data: {
    msg: '你好',
    finalSize: '100px',
    finalColor: 'red'
}

数组语法:

<h2 :style="[my1,my2]">{{msg}}</h2>
data: {
    msg: '你好',
    my1: {
      fontSize: '100px'  
    },
    my2{
      color: 'red'
    }
}

Vue 计算属性

首先它是个属性其次这个属性有计算的能力.简单点说，它就是一个能够将计算结果缓存起来的属性.

computed计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销

<div id="vue">
    <p>调用当前时间的方法：{{currentTime1()}}</p>
    <p>当前时间的计算属性：{{currentTime2}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            message: 'Hello Vue'
        },
        methods: {
            currentTime1: function () {
                return Date.now();
            }
        },
        //计算属性
        computed: {
            currentTime2: function () {
                this.message;
                return Date.now();
            },
            //计算属性完整写法:由于set方法通常不会使用,就简写成了上面的写法
            fullname: {
                set: function(){
                    //...
                },
                get: function(){
                    //...
                } 
            }
        }
    });
</script>