1. Vue.js 소개
1. Vue의 주요 기능: (1) 단순성 (2) 경량 (3) 빠름 (4) 데이터 기반 (5) 모듈 친화적 (6) 구성 요소화
(1) 단순성
양방향 바인딩을 구현하는 Angular 코드를 살펴보겠습니다
// html
<body ng-app="myApp">
<div ng-controller="myCtrl">
<p>{{ note }}</p>
<input type="text" ng-model="note">
</div>
</body>
// js
var myModule = angular.module('myApp', []);
myModule.controller('myCtrl', ['$scopp', function($scope) {
$scope.note = '';
]);로그인 후 복사
그런 다음 Vue 코드를 살펴보겠습니다.
// html
<body>
<div id="app">
<p>{{ note }}</p>
<input type="text" v-model="note">
</div>
</body>
// js
var vm = new Vue({
el: '#app',
data: {
note: ''
}
})로그인 후 복사
비교 , 개인적으로 Vue의 코딩 스타일이 더 간결하고 이해하기 쉽다고 생각합니다.
(2) 우아함
Vue는 상대적으로 가벼운 프레임워크이지만 간단하고 가벼우며 매우 사용자 친화적이며, Vue가 제공하는 API도 이해하기 매우 쉽습니다. 매우 편리한 지침과 속성.
예:
1) 바인드 클릭 이벤트
예 약어는 다음과 같습니다.
2) 동적 속성 바인딩
은 다음과 같이 축약될 수 있습니다:
3) 편리한 수식어
<!-- 阻止单击事件冒泡 -->
<a @click.stop="doSomething"></a>
<!-- 只在按下回车键的时候触发事件 -->
<input @keyup.enter="submit">
로그인 후 복사
4) 실용적인 매개변수 기능은 어때요
<!-- debounce 设置一个最小的延时 -->
<input v-model="note" debounce="500">
<!-- 在 "change" 而不是 "input" 事件中更新数据 -->
<input v-model="msg" lazy>
로그인 후 복사
, 정말 고급스러운 느낌이죠?
(3) 컴팩트
컴팩트함을 논하자면 먼저 Vue의 소스 코드 크기에 주목해야 합니다. Vue의 프로덕션 버전(즉, 최소 버전)의 소스 코드는 72.9에 불과합니다. kb, 공식 웹사이트에서는 gzip이라고 부릅니다. 압축 후 크기는 25.11kb에 불과합니다. 이는 Angular의 144kb 크기의 절반입니다.
컴팩트하다는 장점 중 하나는 사용자가 해당 솔루션을 더 자유롭게 선택할 수 있고, 다른 라이브러리와 협업할 때 사용자에게 더 많은 공간을 제공한다는 것입니다.
예를 들어 Vue의 핵심에는 기본적으로 라우팅 및 Ajax 기능이 포함되어 있지 않습니다. 그러나 프로젝트에 라우팅 및 AJAX가 필요한 경우 공식 라이브러리 Vue-router 및 타사를 직접 사용할 수 있습니다. Vue에서 제공하는 플러그인 vue-resource를 동시에 사용할 수도 있습니다. jQuery, AJAX 등과 같이 사용하려는 다른 라이브러리나 플러그인을 사용할 수도 있습니다.
굉장히 유연한 느낌이 들지 않나요?
(4) 마스터가 부족하지 않습니다
Vue는 작아도 내부 장기는 다 갖추고 있고, 대규모 애플리케이션을 구축할 때도 편리합니다.
1) 모듈화
CommonJS, RequireJS 또는 SeaJs와 같은 일부 타사 모듈 구축 도구와 결합하면 코드를 쉽게 모듈화할 수 있습니다.
그러나 여기 편집자는 위의 빌드 도구를 사용하는 것을 권장하지 않습니다. ES6의 모듈식 기능을 직접 사용하고 해당 패키징을 위해 Webpack과 결합하는 것이 현재 가장 인기 있는 솔루션입니다.
ES6 모듈의 기능이 이해가 안 되시면 http://es6.ruanyifeng.com/#docs/module을 참고하세요
향후 기사에서는 ES6 모듈에 대해서도 소개하겠습니다. 웹팩 구성.
2) 컴포넌트화
Vue의 컴포넌트화 기능은 페이지에 있는 특정 컴포넌트의 html, CSS, js 코드를 .vue 파일로 넣어주는 기능이라고 할 수 있습니다. 파일 관리는 코드의 유지 관리성을 크게 향상시킬 수 있습니다.
예:
// App.vue
<template>
<div class="box" v-text="note"></div>
</template>
<script>
export default {
data () {
return {
note: '这是一个组件的html模板！'
}
}
}
</script>
<style scoped>
.box {
color: #000;
}
</style>로그인 후 복사
컴포넌트에 전처리 언어를 작성할 수도 있습니다.
// App.vue
<template>
div(class="box" v-text="text")
</template>
<script>
export default {
data () {
return {
note: '这是一个组件的html模板！'
}
}
}
</script>
<style>
.box
color: #000
</style>로그인 후 복사
물론 webpack을 통해 패키징해야 합니다. Webpack + vue-loader 사용을 권장하며, 변환을 위해서는 Babel을 설치해야 합니다. 이 글은 Vue.js에 대한 간략한 논의이므로 여기서는 깊이 있는 소개를 하지 않겠습니다.
3) 라우팅
Angular와 마찬가지로 Vue에도 라우팅 기능이 있습니다. 라우팅 기능을 통해 필요에 따라 각 구성 요소를 로드하고 단일 페이지 애플리케이션을 쉽게 구축할 수 있습니다. 다음은 간단한 라우팅 구성 파일입니다.
// router.js
'use strict'
export default function(router) {
router.map({
'/': {
component: function (resolve) {
require(['./components/Foo.vue'], resolve)
}
},
'/foo': {
component: function (resolve) {
require(['./components/Foo.vue'], resolve)
}
},
'/bar': {
component: function (resolve) {
require(['./components/Bar.vue'], resolve)
}
}
})
}로그인 후 복사
(1)
사용 방법 .vue 컴포넌트 파일에 다음과 같은 템플릿, 즉 html 코드를 작성합니다.
<table class="table table-hover table-bordered">
<thead>
<tr>
<th width="10%">id</th>
<th width="30%">name</th>
<th width="40%">content</th>
<th width="20%">remark</th>
</tr>
</thead>
<tbody>
<tr v-for="data in tableList">
<td v-text="data.num"></td>
<td v-text="data.author"></td>
<td v-text="data.contents"></td>
<td v-text="data.remark"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="col-sm-12 pull-right">
<boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen"></boot-page>
</div>
</td>
</tr>
</tfoot>
</table>
로그인 후 복사
태그의 async는 서버 측에서 데이터를 가져올지 여부를 나타내며, false는 아니요를 의미합니다. 데이터는 페이징된 테이블 데이터의 정적 배열입니다. 페이지당 행 수는 표시할 수 있는 페이지 수입니다.
정적 데이터를 사용하는 JavaScript 코드, 즉 스크립트 태그의 내용은 다음과 같습니다.
<script>
import bootPage from './components/BootPage.vue'
export default {
data () {
return {
lenArr: [10, 50, 100], // 每页显示长度设置
pageLen: 5, // 可显示的分页数
lists: [
{num: 1, author: 'luozh', contents: '123', remark: 'bootPage'},
{num: 1, author: 'luozh', contents: '123', remark: 'bootPage'},
{num: 1, author: 'luozh', contents: '123', remark: 'bootPage'},
{num: 1, author: 'luozh', contents: '123', remark: 'bootPage'},
{num: 1, author: 'luozh', contents: '123', remark: 'bootPage'},
{num: 1, author: 'luozh', contents: '123', remark: 'bootPage'}
], // 表格原始数据，使用服务器数据时无需使用
tableList: [] // 分页组件传回的分页后数据
}
},
components: {
bootPage
},
events: {
// 分页组件传回的表格数据
'data' (data) {
this.tableList = data
}
}
}
</script>로그인 후 복사
일반적으로 정적 테이블 데이터는 거의 사용하지 않으며 대부분의 애플리케이션 데이터는 모두 서버 측에서 가져오므로 서버 페이징 데이터를 가져오는 방법은 다음과 같습니다.
서버를 사용하는 구성 요소 HTML 데이터는 다음과 같습니다:
여기서 url은 서버의 요청 주소이고, param은 서버에서 보낸 Parameter 객체의 요청 주소입니다.
서버 데이터 javascript를 사용하는 코드는 다음과 같습니다. :
<script>
import bootPage from './components/BootPage.vue'
export default {
data () {
return {
lenArr: [10, 50, 100], // 每页显示长度设置
pageLen: 5, // 可显示的分页数
url: '/bootpage/', // 请求路径
param: {}, // 向服务器传递参数
tableList: [] // 分页组件传回的分页后数据
}
},
methods: {
refresh () {
this.$broadcast('refresh') // 这里提供了一个表格刷新功能
}
},
components: {
bootPage
},
events: {
// 分页组件传回的表格数据（这里即为服务器传回的数据）
'data' (data) {
this.tableList = data
}
}
}
</script>로그인 후 복사
참고: 구성 요소 테이블에 전달된 배열 콘텐츠 외에도 서버에는 page_num
이라는 총 페이지 수에 대한 키 이름이 필요합니다. Vue.js 기반 테이블 페이징 구성 요소에 대한 기사는 PHP 중국어 웹사이트에 주목하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
