vue笔记（一）

最新推荐文章于 2024-04-18 19:32:22 发布

周粥粥ya

最新推荐文章于 2024-04-18 19:32:22 发布

阅读量577

点赞数 1

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

本文链接：https://blog.csdn.net/NITIQ/article/details/124650141

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

vue2->vue3

一套用于构建用户界面的渐进式Javascript框架

特点：
- 采用组件化模式，提高代码复用率，且让代码更好维护
- 声明式编码，让编码人员无需直接操作Dom，提高开发效率
- 使用虚拟DOM+优秀的Diff算法，尽量服用DOM节点

1、使用vue.js

1.1、vue的安装和引用

vue官网：https://cn.vuejs.org/v2/guide/installation.html

下载开发版本的vue文件
项目中通过script标签引入vue.js文件

Hello word案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
   <!-- Vue必须要有一个容器接收 -->
    <div id="hello">
        <!-- {{}}为vue中的插值语法 插值语法必须为js表达式-->
        hello,{{hi}}
    </div>
    <script>
    //创建vue实例对象 
        new Vue({
            //id选择器，表示为hello这个容器服务，必须跟容器一 一对应
            el:'#hello',
            //存储数据，提供给容器使用
            data:{
                hi:'word'
            }
        })
    </script>
</body>
</html>

效果

总结：1、想让vue工作，必须new一个vue的实例对象，而且要传入配置对象

2、容器中的代码依旧是html规范，只是插入了一个特殊的vue语法

3、容器和vue实例之间只能一一对应不能一对多，多对一

4、插值语法中必须为js表达式

2、模板语法

2.1、插值语法

插值语法：用于解析标签体内容

写法：{{XXX}} xxx为一个js表达式

2.2、指令语法

指令语法：

用于解析标签（包括：标签属性、标签体内容、绑定事件）

例子：v-band:href=‘xxx’ 可以缩写为：href=‘xx’(只能v-band可以这样缩写)

vue中还有其他指令语法，都为 v-xxxx

这里跟插值语法不同，如果不加v-bind就不会解析后面的url

3、数据绑定

3.1、单向数据绑定

在vue中v-bind就是一个经典的单向绑定

单向绑定：页面数据变化，数据不会变

代码：

    <div id="root">
        单项绑定：<input type="text" :value="name1"><br>
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
                name1:'姓名',
            }
        })
    </script>

效果：

我们可以看到当在输入框输入值时，data数据不会发生任何改变

3.2、双向数据绑定

在vue中v-model就是双向绑定

双向绑定：页面数据变化，数据跟着变化

    <div id="root">
        双项绑定：<input type="text" v-model:value="name2">
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
                name2:'姓名',
            }
        })
    </script>

效果

3.3、总结

v-bind和v-model区别
- v-bind：页面数据变化，数据不会变
- v-model：页面数据变化，数据跟着变化
v-model应用场景
- v-model主要用于表单类元素上（input，select）等，与用户产生交互的元素

4、el和data的两种写法

4.1、el的两种写法

第一种写法

    <div id="root">
        <h1>{{msg}}</h1>
    </div>
    <script>
        new Vue({
            //第一种写法
            el:'#root',
            data:{
                msg:'el的两种写法'
            }
        })
    </script>

第二种写法

    <script>
        //创建一个变量接收
    const app = new Vue({
            data:{
                msg:'el的两种写法'
            }
        })
        //第二种写法，利用挂载方式
        app.$mount('#root')
    </script>

区别
- 第二种写法可以在写完data数据后，在指定一个容器接收

4.2、data的两种写法

第一种写法

    <div id="root">
        <h1>{{msg}}</h1>
    </div>
    <script>
        new Vue({
            el:'#root',
		//第一种方法：对象式
            data:{
                msg:'data的两种写法'
            }
        })
    </script>

第二种写法

 <script>   
	new Vue({
            el:'#root',
           //第二种方法：函数式
            data(){
		  //必须return,否则会报错
               return {msg:'data第二种写法'}
            }
        })
    </script>

注意事项
- 学到组件后，data必须改为函数式
- 不能写成箭头函数，否则this指向的是全局的Windows
箭头函数和普通函数的比较

箭头

普通函数

5、MVVM模型

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

M ：模型（Model）对应data中的数据
V：视图（View）:模板
VM：视图模型（ViewModel）：Vue实例对象

data中的所有属性都会出现在VM身上

VM身上的所有属性都可以直接进行使用

6、数据代理

数据代理：通过一个对象代理对另一个对象中的属性的操作（读/写）

6.1、Object.defineProperty方法

该方法允许精确的添加或修改对象的属性，默认情况下添加的值不允许修改，遍历的。

 <script>
        let person ={
            name:'zy',
        }
        Object.defineProperty(person,'age',{
            value:18
        })
     	//遍历person的key
        console.log(Object.keys(person));
        console.log(person);
</script>

如果我们需要修改或枚举可以添加以下配置（常用）
- enumerable 是否可以被枚举
- writable 是否可以被修改
- configurable 是否可以被删除
- 必须要有vulue值
get（）和 set（）方法

    <script>
        let number = 18
        let person ={
            name:'zy',
        }
        Object.defineProperty(person,'age',{
            
            // enumerable:true,
            // writable:true,
            // configurable:true,
            
            //读取时返回值
            get(){
                return number
            },
            //修改时赋值
            set(value){
                number=value
            }
        })
    </script>