Vue2(一)：Vue简介、模板语法、数据绑定、MVVM模型、双向绑定、事件

lsrxz

已于 2023-09-13 19:17:48 修改

阅读量188

点赞数

分类专栏： vue2 文章标签： vue.js javascript 前端

于 2023-09-10 12:51:33 首次发布

本文链接：https://blog.csdn.net/lsrxz/article/details/132767161

版权

vue2 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

（一）Vue简介

（1）Vue的特点

（1）采用组件化模式，提高代码复用率，让代码更好维护
一个vue文件就是一个组件
在这里插入图片描述

（2）声明式编码，让编码人员无需直接操作DOM，提高开发效率
在这里插入图片描述
（3）使用虚拟DOM+diff算法，尽量复用DOM节点

虚拟dom对于时刻变化的数据才有意义。
使用优秀的diff算法，可以感知页面数据的变化，避免每次都更新真实dom。

（2）Vue开发环境

（3）引入

src：本地资源引入和在线资源引入
可以通过CDN加速在线资源引入的速度

（4）Vue实例的创建

（1）需要vue工作，就需要创建一个vue实例，然后传入一个配置对象
在这里插入图片描述
el和data是两个配置对象
（2）root容器中的代码仍然复合html规范，只不过混入了一些特殊的vue语法
（3）root容器中的代码成为【vue模板】
（4）vue实例和容器是一一对应的
（5）真实开发中只有一个Vue实例，并且会配合着各个组件一起使用
（6）{{}}中要写js表达式，且可以自动读取到data中的所有属性
（7）一旦data中的数据发生改变，页面中用到该数据的部分会自动更新

js代码和js表达式的区别：
表达式：一个表达式会生成一个值，可以放在任何一个需要的地方 a/a+b/demo(2)
js代码：语句 if() for(){}

（二）模板语法

（1）插值语法

{{}} ：把指定的值放在指定的位置

（2）指令语法

功能：用于解析标签，vue可以将双引号中的语句解析为js表达式

//href是普通的属性
<a href="url"></a> 
 //有了v-bind，vue会把双引号中的表达式当做js表达式执行
 //将url执行的结果，绑定给href
<a v-bind:href="url"></a>

（三）数据绑定

（1）单向数据绑定

v-bind

数据只能从data流向页面

//简写形式
:value=“name”

（2）双向数据绑定

v-model

数据不仅能从data流向页面，还可以从页面流向data
只能运用在表单类元素上（输入类）例如input、select等

//简写形式
v-model=“name”

（四）el和data的两种写法

（1）el

写法一：

//写在Vue对象中
new Vue({
            el:'#root' 
        })

写法二：

//挂载到生命周期函数中
const v= new Vue({})
v.$mount('#root')

写法二更加灵活，例如想要在页面打开后过一段时间再挂载

setTimeout(()=>{
v.$mount('root')
},1000
)

（2）data

对象式：

 new Vue({
            //元素 一个id选择器 对应上面的id=root,用于指定当前vue实例为哪个容器服务，值通常为css选择器
            el:'#root' ,
            //数据,是一个对象，{}包裹的都是对象,用于指定容器去使用
            data:{
                name:'vue'
            }
        })

函数式：

data：function(){
return{
name：'a'
}
}

（五）MVVM模型

在这里插入图片描述

m：模型（model）是data中的数据
v：视图（view）是模板代码
vm：视图模型（Viewmodel）Vue实例
data中的所有属性，最终都出现在了vm身上
vm身上所有属性以及vue原型上的所有属性，在vue中都可以直接使用

（六）Object.defineProperty

可以对追加属性进行高级的配置。

<body>
    
    <script type="text/javascript">
        let person = {
            name:'张三',
            sex:'男'
        }
        Object.defineProperty(person,'age',{
            value:18
        })
        console.log(person);
        
    </script>
</body>

枚举
enumerable:true
修改
writable:true
删除
configure:true

（1）get函数

当读取传入给defineproperty中传入的属性时，get函数（getter）就会被调用，且返回值就是该属性的值

get:function(){
return number
//此时number和age双向绑定，改变任意一个值都会使另一个同时发生变化
}

（2）set函数

当修改这个属性时，set函数（setter）就会被调用，且收到具体值

set:function(){
number = value
//此时number和age双向绑定，改变任意一个值都会使另一个同时发生变化
}

（七）数据代理

通过一个对象代理对另一个对象属性的操作（读写）

let obj = {x = 100}
let obj2 = {y =  200}
Object.defineProperty(obj2,"x",{
get(){
return obj.x
}
set(value){
obj.x = value
}}
)

在这里插入图片描述

（八）事件相关

vue实例中的配置名：methods

const vm = new Vue({
            //元素 一个id选择器 对应上面的id=root,用于指定当前vue实例为哪个容器服务，值通常为css选择器
            el:'#root' ,
            //数据,是一个对象，{}包裹的都是对象,用于指定容器去使用
            data:{
                name:'vue',
            }
            //事件处理配置项
            methods:{
            showInfo( ){
            alart('')
			}
			}
        })

（1）事件修饰符

prevent：阻止默认事件
stop:阻止事件冒泡

事件冒泡：当子元素（事件源）事件触发，事件会沿着包含关系，依次往上级传递，每一级都可以感知到事件，直到触发根元素（根源)

once:事件只触发一次
capture:使用事件捕获模式
self:只有event.target是当前操作的元素是才触发事件
passive:事件默认行为立即执行，无需等待事件回调进行完毕

（2）键盘事件

<div id="root">
    <h2>我的名字叫{{name}}</h2>
    <input type="text" placeholder="按下回车输出" @keyup.enter="showInfo">
    <input type="text" placeholder="按下回车输出" @keyup.13="showInfo">
    <input type="text" placeholder="按下回车输出" @keyup.huiche="showInfo">
    <input type="text" placeholder="按下删除或退格输出" @keyup.delete="showInfo">
    <input type="text" placeholder="按下切换大小写输出" @keyup.caps-lock="showInfo">
</div>

<script>
    Vue.config.keyCodes.huiche = 13; //定义一个别名为huiche的enter按键

    const vm = new Vue({
        el: '#root',
        data: {
            name: 'zzy',
            age: 18
        },
        methods: {
            showInfo(e) {
                // if (e.keyCode !== 13) return  //原生js实现按下回车输出值
                console.log(e.target.value);
            }
        }
    })
</script>

vue常见的按键别名：

按键	别名
回车	enter
删除	delete
退出	esc
空格	space
换行	tab
上、下、左、右	up down left right

Vue未提供别名的按键，可以使用原始的key值去绑定，但注意要转为kebab-case
系统修饰键：ctrl、alt、shift、meta（start）

（1）配合keyup使用：按下其他键，随后释放其他键，事件才会被触发。
（2）配合keydown使用：正常触发事件。

也可以使用keycode去指定具体的按键
Vue.config.keyCodes.自定义键名 = 键码，可以定制按键别名

补充细节

修饰符可以连续写

<button @click.stop.prevent="showInfo">你好</button>

如果先让两个键同时按下才触发，键名也可以连续绑定
比如按下ctrl+y触发showInfo方法

<input type="text" @keyup.ctrl.y="showInfo">