vue学习笔记

最新推荐文章于 2024-05-30 13:09:09 发布

Chuaniss

最新推荐文章于 2024-05-30 13:09:09 发布

阅读量75

点赞数

本文链接：https://blog.csdn.net/chenglilich/article/details/114974464

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

vue学习笔记
一、Vue是什么？
二、基础使用
------ 待更新 ------

vue学习笔记

一、Vue是什么？

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

javaScript框架
简化Dom操作
响应式数据驱动

核心概念：

双向数据绑定
组件化开发

二、基础使用

1.安装

#最新稳定版本
$ npm install vue

# 最新稳定 CSP 兼容版本
$ npm install vue@csp

# 全局安装 :vue-cli,
$ npm install -g vue-cli

# 创建一个基于 "webpack" 模板的新项目
$ vue init webpack my-project

# 安装依赖
$ cd my-project
$ npm install
$ npm run dev

2.第一个 Vue程序

基本结构（cdn写法）：

// HTML代码：
<div id="app">
        {{ message }}
        // {{}} -- 专业上称为 mustache /mʌstæʃ//马斯达西/  语法,又称胡须胡子，胡子语法 
</div>

//js代码：
<script src="./vue.js"></script>
<script>
	new Vue({
		el:"#app",      // 挂载点 --  element
		data:{          // 数据对象
		message:"Hello world!"
			}
		})
</script>

3.实例 —— 双向数据绑定

什么是双向数据绑定：

数据模型和视图之间的双向绑定。当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化；可以这样说用户在视图上的修改会自动同步到数据模型中去，数据模型也是同样的变化。

双向数据绑定的优点：

无需和单向数据绑定那样进行CRUD（Create，Retrieve，Update，Delete）操作，双向数据绑定最常应用在就表单上，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户输入好的数据，并放到数据模型中了。

原生js实现双向数据绑定

html代码：
<body>
     <!-- oninput 创建函数返回当前元素 -->
    <input type="text" value="你好世界" oninput="getMsg(this.value)">
    <h1 id="text">你好世界</h1>
</body>

js代码：
 <script>
     // 创建对象，接收修改的数据
    let data = {};
    // 创建函数接收 value
    function getMsg(val){
        console.log(val);
        data.msg = val
    }
    // object.defineProperty(对象名， 属性名， {getter  setter})
    // define -- 定义 
    // Property -- 属性
    Object.defineProperty(data, "msg", {
        get(){
            // 调用msg时就会触发getter
        },
        set(newVal){
            // 修改msg时就会触发setter
            // 获取需要修改的元素
            document.getElementById("text").innerHTML= newVal;
        }
    })
    </script>

vue实现数据绑定

html代码:
<body>
	<div id="app">
    <!-- 在标签上写动态变化数据不加{{}} -->
    <!-- 即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化 -->
    <!-- 在全局性数据流使用单项，方便跟踪； 局部性数据流使用双向，简单易操作。 -->
   		<input type="text" v-model="msg"/>
    	<h1>{{msg}}</h1>
	</div>
</body>

js代码：
<script src="./vue.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        msg:"Holle world"
    }
})
</script>

vue双向数据绑定原理

1.vue 双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的，也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；

2.核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法；

3.介绍一下Object.defineProperty()方法（1）Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj （要定义其上属性的对象） prop （要定义或修改的属性）
descriptor （具体的改变方法）
（2）简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；
作者：诸葛乐乐
链接：https://www.jianshu.com/p/e7ebb1500613

------ 待更新 ------

待更新------

Chuaniss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习笔记

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录vue学习笔记一、Vue是什么？二、基础使用1.安装2.第一个 Vue程序3.实例 —— 双向数据绑定总结vue学习笔记一、Vue是什么？Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
复制链接

扫一扫