I. 서론
1. Vue.js 무엇입니까
VUE (발음 / vjuː / 뷰와 유사)가 사용자 인터페이스를 구성하기위한 프로그레시브 프레임이다.
보기 만 층에 뷰 핵심 라이브러리 초점을뿐만 아니라, 사용하기 쉬운뿐만 아니라 쉽게 타사 라이브러리 또는 기존 프로젝트를 통합하는 것이다. 반면에, 때 현대 툴 체인 및 각종 지원 라이브러리와 함께 사용, 뷰 복잡한 한 페이지 응용 프로그램에 대한 드라이브를 제공 완벽하게 할 수.
M (모델)
V (보기)
VM (보기 - 모델)
공식 웹 사이트 : https://cn.vuejs.org
각 다음 데모는 뷰의 JS 라이브러리를 가져와야합니다
2, 첫번째 Vue.js를 만났다
<!-- id标识vue作用的范围 -->
<div id="app">
<!-- {{}} 插值表达式，绑定vue中的data数据 -->
{{ message }}
</div>
<script src="vue.min.js"></script>
<script>
// 创建一个vue对象
var app = new Vue({
el: '#app',//绑定vue作用的范围
data: {//定义页面中显示的模型数据
message: 'Hello Vue!'
}
})
</script>이것은이다 문 렌더링 : 간단한의 사용을 허용 핵심 Vue.js를 선언 구문 템플리트 DOM 시스템에 데이터를 렌더링하는 방법
여기에 핵심 아이디어는 우리가 DOM 개체에 대한 액세스, 사업부 노드를 찾을 필요가 다음 노드 작업의 일련의 jQuery와 같은 성가신 DOM 조작 아니다
코드 대 니펫을 코드를 작성합니다 :
파일 => 환경 설정 => 사용자 = 조각> 새로운 글로벌 코드 조각 / 또는 폴더 니펫을
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" var app = new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}때마다 우리는 html로의 빠른 인터페이스 뷰를 만들려면이 템플릿을 사용하여
둘째, 기초 문법
1, 기본 데이터 및 렌더링 지침
당신은 참조 V-바인드 기능을 명령이라고합니다. 접두사 명령 V-
렌더링 된 데이터를 보간 식 {} {}를 사용하는 것 외에도 V 바인드 명령을 사용할 수 있으며, 이는 : (a 속기 형태 콜론
data: {
content: '我是标题',
message: '页面加载于 ' + new Date().toLocaleString()
}<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
此时title中显示的是模型数据
-->
<h1 v-bind:title="message">
{{content}}
</h1>
<!-- v-bind 指令的简写形式： 冒号（:） -->
<h1 :title="message">
{{content}}
</h1>바인딩 2 양방향 데이터
단방향 및 양방향 데이터 바인딩 바인딩 : 바인딩 양방향 데이터에 대한 V-모델을 사용하여
페이지의 값의 변화는 또한 뷰에있는 데이터의 가치에 영향을 미칠 것
data: {
searchMap:{
keyWord: 'abc'
}
}<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查询的是：{{searchMap.keyWord}}</p>3 이벤트
요구 사항 : 입력 상자에 입력 된 회사의 관련 정보를 찾기 위해 검색 버튼을 클릭
V-에 또는 문법 설탕을 사용하여 트리거 이벤트 @ 달성 할 수있다
아날로그 데이터 : 모의 / company.json
{
"items":[
{
"title":"尚硅谷",
"site":"http://www.atguigu.com"
},
{
"title":"百度",
"site":"http://www.baidu.com"
}
]
}전화 이벤트
<div id="app">
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="searchMap.keyWord">
<!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 -->
<button v-on:click="search()">查询</button>
<p>您要查询的是：{{searchMap.keyWord}}</p>
<p><a v-bind:href="result.site" target="_blank">{{result.title}}</a></p>
</div>
<script src="vue.min.js"></script>
<script src="jquery.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
searchMap:{
keyWord: '百度'
},
//查询结果
result: {}
},
methods:{
search(){
//定义一个变量存储当前Vue对象，因为在ajax操作中的this相当于ajax对象
let vm = this
console.log('search')
$.get('mock/company.json', data => {
data.items.forEach(company => {
console.log(company)
if(company.title === this.searchMap.keyWord){
vm.result = company
}
})
})
}
}
})
</script>VUE에서, 우리는 단지 DOM 작업을 고려 할 필요가 없다, 비즈니스 로직 처리에 초점을 맞출 필요가있다.
4, 수식
수정 (수정)은 특별한 방법으로 결합해야하는 명령을 나타 내기 위해 사용되는 특수 접미사에 지정된 반각 마침표 (.)입니다.
예를 들어, .prevent 수정이) (이벤트 트리거 통화에서는 event.preventDefault에 대한 지시에 절-말한다 :
즉, 원래 이벤트의 기본 동작을 방지
data: {
user: {}
}<!-- 修饰符用于指出一个指令应该以特殊方式绑定。
这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：
即阻止表单提交的默认行为 -->
<form action="save" v-on:submit.prevent="onSubmit()">
<label for="username">
<input type="text" id="username" v-model="user.username">
<button type="submit">保存</button>
</label>
</form>methods: {
onSubmit() {
if (this.user.username) {
console.log('提交表单')
} else {
alert('请输入用户名')
}
}
}이러한 이벤트는 양식을 제출하면 뷰 동작이 차단되어 있기 때문에, 형태와 정말 제출 트리거됩니다.
렌더링 5. 조건
V-경우 : 조건부 명령
data: {
ok: false
}참고 : 하나의 확인란은 부울 값에 바인딩
<input type="checkbox" v-model="ok">同意许可协议
<!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
<h1 v-if="ok">if：Lorem ipsum dolor sit amet.</h1>
<h1 v-else>no</h1><!-- v:show 条件指令 初始渲染开销大 -->
<h1 v-show="ok">show：Lorem ipsum dolor sit amet.</h1>
<h1 v-show="!ok">no</h1>v-if이 조건 블록 내에서 이벤트 리스너 및 하위 구성 요소가 파괴되어 핸드 오버 과정에서 제대로 재건되어 있는지 확인하기 때문에 "진짜"조건은, 렌더링된다.v-if그것은이다 불활성 처음 조건부 블록을 렌더링하기 시작할 때 조건이 true가 될 때까지 - 조건이 초기 렌더링시 false 인 경우에는 아무 것도 할 필요가 없습니다 :.- 반면에,
v-show어떤 초기 조건이 요소가 항상 CSS 스위치를 기반으로 간단하게 렌더링 될 것입니다 어떤 문제 - 매우 간단합니다. - 일반적으로,
v-if더 높은 오버 헤드를 스위칭 및v-show렌더링 높은 초기 비용을 갖는다. (가) 매우 자주 전환해야 할 경우, 따라서, 사용되는v-show것이 바람직하다; 상태 동작 동안 거의 변화하지 않는 경우, 사용되는v-if것이 바람직하다.
6 렌더링 목록
V-에 대한 : 루프 명령 목록
실시 예 1 : 간단한리스트 렌더링
<!-- 1、简单的列表渲染 -->
<ul>
<li v-for="n in 10">{{ n }} </li>
</ul>
<ul>
<!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
<li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>예 2 : 상기 계산 된 특성을 사용하여, 상기 어레이를 통과
data: {
numbers: [1, 2, 3, 4, 5]
}<!-- 2、遍历数组，使用计算属性 -->
<ul>
<li v-for="n in numbers">{{ n }}</li>
</ul>
<ul>
<li v-for="n in evenNumbers">{{ n }}</li>
</ul>계산 : 동일한 레벨 데이터에 정의 산출 특성
// 计算属性：这里的数据是通过某种方式计算出来的
computed: {
evenNumbers() {
console.log('计算属性 evenNumbers')
// filter：遍历numbers，并返回满足条件的值，放在一个数组中
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}예 3 : 데이터 목록을 가로 지르는
data: {
userList: [
{ id: 1, username: 'helen', age: 18 },
{ id: 2, username: 'peter', age: 28 },
{ id: 3, username: 'andy', age: 38 }
]
}<!-- 3、遍历数据列表 -->
<table border="1">
<!-- <tr v-for="item in userList"></tr> -->
<tr v-for="(item, index) in userList">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
</tr>
</table>실시 예 4 : 물체를 횡단
data: {
user:{
id: 1,
username: 'helen',
age: 18
}
}<!-- 4、遍历对象 -->
<!-- 直接访问 -->
<form action="">
<p><label>id：<input type="text" v-model="user.id"></label></p>
<p><label>用户名：<input type="text" v-model="user.username"></label></p>
<p><label>年龄：<input type="text" v-model="user.age"></label></p>
</form>
<!-- 遍历 -->
<form action="">
<!-- <p v-for="value in user"> -->
<p v-for="(value, key, index) in user">
<label>{{index}}-{{key}}：<input type="text" v-model="value"></label>
</p>
</form>7 산출 특성
실시 예 1 : 템플릿에 사용되는 식 차분 JS
data: {
message: '上海自来水来自海上 haha'
}템플릿의 표현은 매우 편리하지만, 그들은 주로 간단한 조작을 위해 설계되었습니다. 템플릿 템플릿에 너무 많은 로직을 두는 것은 너무 무겁고 유지하기 어려울 것이다.
<p>原始值: "{{ message }}"</p>
<!-- 1、插值数据绑定中使用表达式 -->
<p>反转消息: {{ message.split('').reverse().join('') }}</p>따라서, 복잡한 로직을 위해, 당신은 사용해야 계산 된 속성을
예 2 : 상기 계산 된 속성을 사용하여
computed: {
reversedMessage () {
return this.message.split('').reverse().join('')
}
}<!-- 2、使用计算属性 -->
<p>反转消息: "{{ reversedMessage }}"</p>예 3 :
methods:{
reversed () {
return this.message.split('').reverse().join('')
}
}<!-- 3、使用方法 -->
<p>反转消息: "{{ reversed() }}"</p>외모는 그들이 그것을 만드는 무엇 차이가, 속성과 메소드는 동일한 기능을 수행 할 수 계산?
- 속성 기반 캐시 계산 : 연관된 의존 변경 이의 재평가 될 때.
- 방법은 항상 다시 실행됩니다
왜 우리는 캐시에 필요합니까? 우리는 성능 오버 헤드가 상대적으로 많은 전산 등록되어 있다고 가정하자 를 , 그것은 거대한 배열을 통과하고 계산을 많이 할 필요가있다. 그런 다음 우리는 다른 특성이 계산에 따라있을 수 있습니다 . 더 캐시가없는 경우, 우리는 필연적으로 여러 수행 의 계산을! 대신 방법을 사용하는 캐시를하지 않으려면.
8 듣는다 속성
일부 데이터가있을 때 변화와 다른 데이터와 함께 변화에 대한 요구, 당신은 청취자 속성을 사용할 수 있습니다
예 1 :
data: {
firstName: '道格拉斯',
lastName: '狗剩'
fullName: '道格拉斯 狗剩'
},
watch: {
firstName(val){
console.log('firstName changed...')
this.fullName = val + ' ' + this.lastName
},
lastName(val){
console.log('lastName changed...')
this.fullName = this.firstName + ' ' + val
}
}<label>名：<input type="text" v-model="firstName"></label>
<label>姓：<input type="text" v-model="lastName"></label>
{{fullName}}예 2 :
사실, 시계의 남용의 예. 우리는보다 효율적으로 동일한 작업으로 계산 된 속성을 사용할 수 있습니다
data: {
firstName: '道格拉斯',
lastName: '狗剩'
// fullName: 'Foo Bar' //既然fullName需要被计算，那么将此属性放在计算属性中
},
computed: {
fullName () {
return this.firstName + ' ' + this.lastName
}
}예 3 :
<p>
Ask a yes/no question:
<input v-model="question">
<button @click="getAnswer()">提问</button>
</p>
<p>{{ answer }}</p>var app = new Vue({
el: '#app',
data: {
question: '',
answer: '请提问!'
},
methods: {
getAnswer: function () {
this.answer = '我想想...'
var vm = this
$.ajax({
url: 'https://yesno.wtf/api',
type: 'get',
success(data) {
// console.log(this);
vm.answer = data.answer
},
error (error) {
vm.answer = '网找不到API接口. ' + error
}
})
}
}
})사용 시계 :
필요 비동기 데이터 변경 동작 또는 큰 오버 헤드를 수행하는 경우,이 방법은 매우 유용하다.
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = '等待您停止输入...'
this.getAnswer()
}
}9, 필터
예 1 : 로컬 필터
data: {
userList: [
{id: 1, name: 'peter', gender: 1},
{id: 2, name: 'helen', gender: 0}
]
}// filters 定义局部过滤器，只可以在当前vue实例中使用
filters: {
genderFilter(gender) {
return gender === 1 ? '男' : '女'
}
}<td>
<!-- | 管道符号：表示使用后面的过滤器处理前面的数据 -->
{{item.gender | genderFilter}}
</td>예 2 : 글로벌 필터
// 在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
return value.charAt(0).toUpperCase() + value.slice(1)
})이 필터는이 페이지에서 사용 어디서나 할 수있다
필터 작업을 포맷 프로세스 텍스트에 사용. 필터는 두 곳에서 사용할 수 있습니다 : 이중 중괄호는 보간 및 v-bind 표현
필터는 심볼 나타내는 "관"으로, 자바 스크립트 표현의 끝에 추가되어야
