Is vue a front-end css framework?

Vue is not a front-end CSS framework, but a front-end JavaScript framework. Vue is a progressive JS framework for building user interfaces. It is a front-end framework based on the MVVM design pattern and focuses on the View layer. Advantages of Vue.js: 1. Small size; 2. Based on virtual DOM, higher operating efficiency; 3. Two-way data binding, so developers no longer need to operate DOM objects and devote more energy to business logic Above; 4. Rich ecology and low learning cost.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

What is vue

Vue (pronounced /vjuː/, similar to view) is a progressive JavaScript framework for building user interfaces . Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern tool chain and various supporting libraries, Vue is fully capable of providing drivers for complex single-page applications (SPA).

The goal of Vue.js is to enable responsive data binding and composed view components through the simplest possible API.

Vue.js itself is not a comprehensive framework - it only focuses on the view layer. Therefore it is very easy to learn and very easy to integrate with other libraries or existing projects. On the other hand, Vue.js can also power complex single-page applications when used with related tools and support libraries.

Advantages of Vue.js

• Small size: only 33k after compression;

• More High operating efficiency: Based on virtual DOM, a technology that can perform various calculations through JavaScript in advance to calculate and optimize the final DOM operation. Since this DOM operation is a preprocessing operation and does not actually operate the DOM, It’s called virtual DOM;

• Two-way data binding: It allows developers to no longer have to operate DOM objects and devote more energy to business logic;

• Rich ecology and low learning costs: There are a large number of mature and stable UI frameworks and components based on vue.js on the market, which can be used to achieve rapid development; they are friendly to beginners, easy to get started, and have many learning materials;

VUE Framework Principle

The Vue object binds the elements to be changed in the page and the variables in the data. Once set, it will always monitor changes in variable values ​​in data. When the value changes, it will automatically find the element bound to it and let the element change accordingly. The process of changing the element does not require manual intervention, which improves development efficiency, and this The process does not require frequent DOM operations to change the page structure like JavaScript. It only monitors an area, which improves execution efficiency.

The relationship between Vue.js and MVVM:

The vue framework is a front-end framework based on the MVVM design pattern, and the Vue object is the MVVM design pattern. VM view model in .

MVVM is the abbreviation of Model-View-ViewModel. It is an architectural pattern based on front-end development. Its core is to provide two-way data binding of View and ViewModel, which allows the state changes of ViewModel to be automatically transmitted. For View, it is the so-called two-way binding of data.

Vue.js is a Javascript library that provides MVVM-style two-way data binding, focusing on the View layer. At its core is the ViewModel in MVVM. ViewModel is responsible for connecting View and Model to ensure the consistency of view and data. This lightweight architecture makes front-end development more efficient and convenient.

The Model layer represents the data model, and business logic for data modification and operation can also be defined in the Model;

View represents the UI component, which is responsible for converting data The model is converted into UI and displayed.

ViewModel is an object that synchronizes View and Model.

Under the MVVM architecture, ViewModel connects the View layer and the Model layer through two-way data binding, and the synchronization between the View and the Model is completely automatic without human intervention, so developers only need Focusing on business logic, there is no need to manually operate the DOM, and there is no need to pay attention to the synchronization of data status. Complex data status maintenance is completely managed by MVVM.

Start the installation of vue.js

Installation of Vue Devtools debugging tools: You can install the vue Devtools tools in Google Chrome for better performance Review and debug Vue applications.

Vue.js official website download address: http://vuejs.org/guide/installation.html

According to your own Production requirements to install the corresponding version. The official website gives a variety of methods for installing vue. Here is a demonstration of the installation of an independent version.

The address after I downloaded it: https://vuejs.org/js/vue.js

To use the independent version, you can directly import the url with the script tag. Vue will be registered as a global variable.

The first vue instance:

HTML content is composed of tags, no You can query it yourself if you know it.

..>标签用来声明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 filter "|" is similar to the usage of pipelines in Linux, that is, the output of the upper level is used as the next level Input.

HTML 中的<!--...--> 是注释标签,Split用于分割字符串,join是把数组拼接成为字符串.
整个代码就是调用了vue中过滤器的用法,使用了vue的内置函数和自定义的函数对data里面定义的属性进行了转换大写,反转的操作.

vue usage – conditional judgment

v-*** represents the instructions in 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>

Example 1:

Example 2 :

The v-show directive displays elements based on conditions, that is, the elements will be rendered regardless of the initial conditions.

当ok为true的时候输出了指定的代码Hello!,相应的ok为false时候没有任何输出.

vue usage – loop statement-v-for directive

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

标签用于定义列表中的项目.可用于有序列表

和无序列表

中.也可以使用of替代in作为分隔符. 如下实例使用v-for指令依次遍历了data里面定义的数组元素.



v-for iterable object ,v-for can iterate data through the properties of an object.



##v-for can be used to loop through integers



Understanding of getters and setters

顾名思义，get为取值，set为赋值.
创建一个实例，isMe；此时，isMe是没有name属性的，当我们调用isMe.name时，我们会进入到get name(){...}中，先判断
isMe是否有name属性，答案是否定的，那麽就添加一个name属性并给它赋值；如果有name属性，那就返回name属性。
你可以把get看成一个取值的函数，函数的返回值就是它拿到的值。

set属性理解，当我给实例赋值：
isMe.name="周神"此时，会进入set name(val){...}；形参val就是我赋给name属性的值，在这个函数里，我就可以做很多事了，
比如双向绑定！因为这个值的每次改变都必须经过set，其他方式是改变不了它的，相当于一个万能的监听器。

vue usage vue computed properties vs listening properties

计算属性关键词: computed:
整个代码进行的流程:
1. data 属性初始化 getter setter(可理解为取值和赋值)
2. computed 计算属性初始化，提供的函数将用作属性 vm.reversedMessage 的 getter
3. 当首次获取 reversedMessage 计算属性的值时，dep 开始依赖收集.
4. 在执行 message getter 方法时，如果 dep 处于依赖收集状态，则判定 message 为 reversedMessage 的依赖，并建立依赖关系
5. 当 message 发生变化时，根据依赖关系，触发 reverseMessage 的重新计算



methods are also computed properties of vue. Let me introduce the difference between methods and computed:

使用computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
以下实例分别调用了vue的两种计算属性computed和methods.可以从运行结果很清晰的看到computed在第一次渲染之后就有了缓存,
第二次调用的时候直接依赖缓存不会重新渲染,两次调用结果相同.而methods在每次调用的时候都会渲染,所以两次调用结果不同.



vue’s listening attribute –watch, responds to data changes through watch.

<button>标签是创建一个按钮.
@click等同于v-on:click,是一个指令的缩写.v-on表示事件监听,后续会详细讲到.
<script>表示说明内部的代码属于js.   
px表示像素. font-size设置字体大小.
$watch是一个实例方法, nval表示新的数据, oval旧的数据.
alert()方法用于显示带有一条信息和一个ok按钮的警告框.
以下示例首先通过v-on指令来监听按钮的按键变化,然后data里面进行定义属性,接着调用vue的监听属性$watch来监听counter的
变化,最后调用alert()方法弹出一个页面来直观显示数据的变化.</script></button>



vue usage –vue style binding: v-bind Used to bind html attributes

The method is particularly flexible and can bind arrays, attributes, etc. to meet requirements. Make a demonstration for each part.

v-bind指令的缩写:
<a></a>
<!-- 缩写 -->
<a></a>

class and style are HTML elements Attributes are used to set the style of elements. In addition to strings, the result type of expressions can also be objects or arrays. The style tag is used to define style information for the document. v-bind:class indicates that whether the class exists will depend on the true/false of the data attribute isActive

## Multi-attribute dynamic switching class, you can adjust the value in data in real time to change the output result:

There are two styles defined in the style tag, and the v-bind instruction is used for style binding. Since data The isActive attribute inside is true, so the corresponding style is triggered. You can change the data attribute value to dynamically adjust the style output you want.

Directly bind the data An object: classobject and class are corresponding.

text-danger class background color covers the background color of the active class:

Usage of array:

You can pass an array to v-bind:class to apply a class list. Text-danger will overwrite activeClass, so the display result is red.

Judge the output based on the conditional expression:

The following example uses a ternary expression. It means that errorClass always exists but activeClass can only be true when isActive is When displayed.

##Vue.js style (inline style): We can set the style directly in 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前端入门）

The above is the detailed content of Is vue a front-end css framework?. For more information, please follow other related articles on the PHP Chinese website!