Vue는 프런트엔드 CSS 프레임워크인가요?
- 青灯夜游원래의
- 2022-08-26 19:37:103415검색
vue는 프런트엔드 CSS 프레임워크가 아니라 프런트엔드 JavaScript 프레임워크입니다. Vue는 사용자 인터페이스 구축을 위한 진보적인 JS 프레임워크이며 MVVM 디자인 패턴을 기반으로 하며 View 계층에 중점을 둡니다. Vue.js의 장점: 1. 작은 크기, 2. 가상 DOM 기반, 더 높은 운영 효율성, 3. 양방향 데이터 바인딩으로 인해 개발자는 더 이상 DOM 객체를 운영하고 비즈니스 로직에 더 많은 에너지를 쏟을 필요가 없습니다. 풍부한 생태와 낮은 학습 비용.
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
vue란 무엇입니까
Vue(/vjuː/로 발음, view와 유사)는 사용자 인터페이스 구축을 위한 진보적인 JavaScript 프레임워크입니다. 다른 대형 프레임워크와 달리 Vue는 아래에서 위로 레이어별로 적용되도록 설계되었습니다. Vue의 핵심 라이브러리는 시작하기 쉬울 뿐만 아니라 타사 라이브러리 또는 기존 프로젝트와 쉽게 통합할 수 있는 뷰 레이어에만 중점을 둡니다. 반면, 최신 도구 체인 및 다양한 지원 라이브러리와 결합하면 Vue는 복잡한 단일 페이지 애플리케이션(SPA)용 드라이버를 완벽하게 제공할 수 있습니다.
Vue.js의 목표는 가능한 가장 간단한 API를 통해 반응형 데이터 바인딩 및 구성된 뷰 구성 요소를 활성화하는 것입니다.
Vue.js 자체는 포괄적인 프레임워크가 아니며 뷰 레이어에만 중점을 둡니다. 따라서 배우기가 매우 쉽고 다른 라이브러리나 기존 프로젝트와 통합하기가 매우 쉽습니다. 반면에 Vue.js는 관련 도구 및 지원 라이브러리와 함께 사용하면 복잡한 단일 페이지 애플리케이션을 강화할 수도 있습니다.
Vue.js의 장점
작은 크기: 압축 후 33k에 불과
더 높은 운영 효율성: 가상 DOM 기반으로 JavaScript를 통해 사전에 다양한 계산을 수행하고 최종 DOM A로 변환할 수 있습니다. 연산을 계산하고 최적화하는 기술입니다. 이 DOM 연산은 전처리 연산이고 실제로 DOM을 연산하지 않기 때문에 이를 가상 DOM이라고 합니다.
양방향 데이터 바인딩: 개발자가 더 이상 DOM 객체를 연산할 필요가 없습니다. 비즈니스 로직에 더 많은 에너지를 투자하세요.
풍부한 생태계와 낮은 학습 비용: 시장에는 vue.js를 기반으로 하는 성숙하고 안정적인 UI 프레임워크와 구성 요소가 많이 있으며 이를 통해 빠른 개발을 달성할 수 있습니다. 초보자도 쉽게 시작할 수 있고 학습 자료도 많습니다.
VUE 프레임워크의 원리
Vue 객체는 페이지에서 변경할 요소와 데이터의 변수를 바인딩합니다. , 데이터의 변수 값을 항상 모니터링합니다. 값이 변경되면 해당 요소가 자동으로 발견되고 그에 따라 요소가 변경됩니다. 수동 개입이 필요하지 않으므로 개발이 향상됩니다. 이 프로세스에는 JavaScript와 같은 빈번한 DOM 작업이 필요하지 않으며 페이지 구조를 변경하면 영역만 모니터링되므로 실행 효율성이 향상됩니다.
Vue.js와 MVVM 관계:
vue 프레임워크는 MVVM 디자인 패턴을 기반으로 하는 프런트 엔드 프레임워크이며, 여기서 Vue 개체는 MVVM 디자인 패턴의 VM 뷰 모델입니다.
MVVM은 Model-View-ViewModel의 약어입니다. 프론트엔드 개발을 기반으로 하는 아키텍처 패턴입니다. 핵심은 ViewModel의 상태 변경을 자동으로 수행할 수 있도록 하는 View와 ViewModel 간의 양방향 데이터 바인딩을 제공하는 것입니다. View에 전달되는데, 이는 소위 양방향 데이터 바인딩입니다.
Vue.js는 View 레이어에 초점을 맞춰 MVVM 스타일의 양방향 데이터 바인딩을 제공하는 Javascript 라이브러리입니다. 그 핵심에는 MVVM의 ViewModel이 있습니다. ViewModel은 View와 Model을 연결하여 뷰와 데이터의 일관성을 보장하는 역할을 합니다. 이 경량 아키텍처는 프런트 엔드 개발을 보다 효율적이고 편리하게 만듭니다.
모델 레이어는 데이터 모델을 나타내며, 데이터 수정 및 작업을 위한 비즈니스 로직도 모델에서 정의할 수 있습니다.
View는 데이터 모델을 표시용 UI로 변환하는 UI 구성 요소를 나타냅니다.
ViewModel은 동기식 View 및 Model 개체입니다.
MVVM 아키텍처에서 ViewModel은 양방향 데이터 바인딩을 통해 View 레이어와 Model 레이어를 연결하고 View와 Model 간의 동기화는 사람의 개입 없이 완전히 자동으로 이루어지므로 개발자는 비즈니스 로직에만 집중할 필요가 없습니다. DOM을 수동으로 운영하기 때문에 데이터 상태 동기화에 신경 쓸 필요가 없습니다. 복잡한 데이터 상태 유지 관리는 MVVM에서 완벽하게 관리됩니다.
vue.js 설치 시작
Vue Devtools 디버깅 도구 설치: Google Chrome에 vue Devtools 도구를 설치하면 Vue 애플리케이션을 더 잘 검토하고 디버깅할 수 있습니다.
Vue.js 공식 웹사이트 다운로드 주소: http://vuejs.org/guide/installation.html
자신의 제작 요구 사항에 따라 해당 버전을 설치하세요. 공식 웹사이트에서는 vue 설치를 위한 다양한 방법을 제공합니다. 독립버전.
다운받은 후 주소: https://vuejs.org/js/vue.js
독립 버전을 사용하려면 스크립트 태그를 사용하여 URL을 직접 가져오면 Vue가 전역 변수로 등록됩니다.
첫 번째 vue 인스턴스:
HTML 콘텐츠는 태그의 조합입니다. 모르는 경우 직접 쿼리할 수 있습니다.
..>标签用来声明HTML文档的编写标准,放在最开头位置,可写可不写.
和是中必须有的元素.
里面必须有<title>标签,<meta>和<style>可选.
charset属性指定HTML文档的编码为utf-8.
<script>标签里面的url即为我下载的vue独立版本的地址.src标签指定超链接.
View 层 - Div之间的代码属于html的view层
id指定HTML的唯一属性.
{{ }} 用于输出对象属性和函数返回值.
Model 层 - JavaScript代码如下(需放在指定的HTML元素之后)
el标签为实例提供挂载元素.用来联立view层和model.
data 用于定义属性.里面的内容也即最后的运行结果.</style>
</title>
vue 필터 "|", Linux에서 파이프라인의 사용법은 유사합니다. 즉, 상위 레벨의 출력이 다음 레벨의 입력으로 사용됩니다.
HTML 中的<!--...--> 是注释标签,Split用于分割字符串,join是把数组拼接成为字符串. 整个代码就是调用了vue中过滤器的用法,使用了vue的内置函数和自定义的函数对data里面定义的属性进行了转换大写,反转的操作.
vue 사용법 - 조건부 판단
v-***는 vue 지침을 나타냅니다.
<h1>~<h6>用来表示标题的层级关系.<h1>表示最大. 在 Vue 中，我们使用 v-if 指令实现同样的功能,和其他编程语言的条件判断逻辑一样.条件成立才会执行相应的代码. <h1>Yes</h1> 也可以用 v-else 添加一个“else 块”： <h1>Yes</h1> <h1>No</h1> 同样也可以添加v-else-if在多种条件下进行判断.</h1> </h6> </h1>
예 1:
예 2:
v-show 지시문은 조건에 따라 요소를 표시합니다. 즉, 요소는 조건에 관계없이 렌더링됩니다. 초기 조건.
当ok为true的时候输出了指定的代码Hello!,相应的ok为false时候没有任何输出.
vue 사용법 – 루프 문-v-for 명령
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
- 和无序列表
- 中.也可以使用of替代in作为分隔符.
如下实例使用v-for指令依次遍历了data里面定义的数组元素.
v-for는 객체를 반복하고, v-for는 객체의 속성을 통해 데이터를 반복할 수 있습니다. ㅋㅋㅋ
顾名思义，get为取值，set为赋值.
创建一个实例，isMe；此时，isMe是没有name属性的，当我们调用isMe.name时，我们会进入到get name(){...}中，先判断
isMe是否有name属性，答案是否定的，那麽就添加一个name属性并给它赋值；如果有name属性，那就返回name属性。
你可以把get看成一个取值的函数，函数的返回值就是它拿到的值。
set属性理解，当我给实例赋值：
isMe.name="周神"此时，会进入set name(val){...}；形参val就是我赋给name属性的值，在这个函数里，我就可以做很多事了，
比如双向绑定！因为这个值的每次改变都必须经过set，其他方式是改变不了它的，相当于一个万能的监听器。
计算属性关键词: computed:
整个代码进行的流程:
1. data 属性初始化 getter setter(可理解为取值和赋值)
2. computed 计算属性初始化，提供的函数将用作属性 vm.reversedMessage 的 getter
3. 当首次获取 reversedMessage 计算属性的值时，dep 开始依赖收集.
4. 在执行 message getter 方法时，如果 dep 处于依赖收集状态，则判定 message 为 reversedMessage 的依赖，并建立依赖关系
5. 当 message 发生变化时，根据依赖关系，触发 reverseMessage 的重新计算
vue 스타일입니다. 바인딩: v-bind를 사용합니다. html 속성을 바인딩하는 방법
은 특히 유연하며 각 부분에 맞게 배열, 속성 등을 바인딩할 수 있습니다.
使用computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。 而使用 methods ，在重新渲染的时候，函数总会重新调用执行。 以下实例分别调用了vue的两种计算属性computed和methods.可以从运行结果很清晰的看到computed在第一次渲染之后就有了缓存, 第二次调用的时候直接依赖缓存不会重新渲染,两次调用结果相同.而methods在每次调用的时候都会渲染,所以两次调用结果不同.클래스와 스타일은 HTML의 속성입니다. 요소, 요소 및 표현식의 스타일을 설정하는 데 사용됩니다. 문자열 외에도 결과 유형은 객체 또는 배열일 수도 있습니다. 스타일 태그는 문서에 대한 스타일 정보를 정의하는 데 사용됩니다. v-bind:class는 클래스 존재 여부가 isActive 데이터 속성의 true/false에 따라 달라짐을 나타냅니다. 두 가지 스타일이
에 정의됩니다. style 태그이며 v-bind 명령은 스타일 바인딩에 사용됩니다. 데이터의 isActive 속성이 true이므로 해당 스타일이 트리거되어 원하는 스타일 출력을 동적으로 조정할 수 있습니다.
데이터의 객체 직접 바인딩: 클래스객체와 클래스가 일치합니다.
text-danger 클래스 배경색은 활성 클래스의 배경색을 덮습니다.
배열 사용법:
다음을 수행할 수 있습니다. 클래스 목록을 적용하려면 배열을 v-bind:class에 전달합니다. Text-danger는 activeClass를 덮어쓰므로 표시 결과는 빨간색입니다.
조건식을 기반으로 판단합니다. 출력:
다음 예에서는 삼항 표현식은 errorClass가 항상 존재하지만 isActive가 true인 경우에만 activeClass를 표시할 수 있음을 의미합니다.
Vue.js 스타일(인라인 스타일): v -bind:style을 사용하여 스타일을 직접 설정할 수 있습니다
可以直接绑定到一个样式对象，让模板更清晰
v-bind:style 可以使用数组将多个样式对象应用到一个元素上：
vue用法之–事件处理器:v-on指令用来事件监听.
以下示例调用了v-on指令来监听按钮的点击变化,每次点击counter加1最后做一个输出.
v-on指令:处理用户输入
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器， 通过它调用在 Vue 实例中定义的方法： methods是定义的函数. 以下示例同样是使用v-on来监听按钮的变化.当点击按钮会调用自定义的函数reverseMessage 来对data里面定义的message进行反转拼接操作.
v-on用法:内联js语句中调用方法
say()实际是一条JS语句，带有括号的就叫内联处理器.相当于直接使用v-on来监听一条js语句,当点击按钮时进行调用say语句进行输出.
vue:事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。 Vue.js通过由点(.)表示的指令后缀来调用修饰符。 .stop .prevent .capture .self .once <!-- 阻止单击事件冒泡 --> <a></a> <!-- 提交事件不再重载页面 -->
...
...
vue:按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： <!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input> 全部的按键别名： .enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta 实例: <!-- Alt + C的ASCll码为67 --> <input> <!-- Ctrl + Click --> <p>Do something</p>
vue.js表单
你可以用 v-model 指令在表单,,元素上创建双向数据绑定。V-model指令会自动根据控件类型自动选取正确的方法来更新元素.在input输入框中我们可以使用 v-model 指令来实现双向数据绑定.
实例:
以下实例将js代码单独分离出来用src标签引入即可.在主程序里面看起来代码量比较少. 使用了v-model指令将输入框内容就行了双向绑定.会自动对页面数据变化做出响应.
输出:
更改输入框数据查看效果
以上实例中 {{message}} 会根据输入框 input 的改变而改变，如果你不想让其变化可以修改为：{{* message }}
v-model对input和textarea框进行双向数据绑定:
Placeholder是一个动态变量可以实现动态绑定.input单行文本框,textarea多行文本框. style标签用于定义一些代码的呈现样式,后面会有详细讲解. 本实例就是使用v-model指令对单行和多行文本框进行了双向数据绑定.当我们修改文本框内容,vue会自动响应页面数据变化.
v-model对复选框的双向数据绑定
<input>标签用于收集用户信息.type规定了input元素的类型,value指定了输入字段的初始值. checkbox为复选框类型. <span>标签被用来组合文档中的行内元素. <br>是换行标签. <label> 标签为 input 元素定义标注（标记）,label 元素不会向用户呈现任何特殊效果。 不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。</label></span>
v-model对单选按钮的双向绑定: radio为单选按钮类型
v-model对select下拉列表的双向绑定:
option 元素定义下拉列表中的一个选项。浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个 元素显示。option 元素位于 select 元素内部,必须与select元素配合使用不然没意义。<option> 标签可以在不带有任何属性的 情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容。</option></select> </option>
v-model修饰符
.lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ,从而转变为在change 事件中同步,也就是在失去焦点或者按下回车键才更新. <!-- 在 "change" 而不是 "input" 事件中更新 --> <input> .number 如果想自动将用户的输入值转为 Number 类型，可以添加一个修饰符number给v-model 来处理输入值：否则你输入的是数字 但是类型却是字符串String,在数字输入框中有用. <input> 这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。 .trim 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入： <input>
（学习视频分享：web前端入门）
위 내용은 Vue는 프런트엔드 CSS 프레임워크인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!