뷰 연구 노트의 -day1

1. 가져 오기 vue.js, 특정 코드 및 자습서 https://learning.dcloud.io/, HBuilder 코드에서 직접 도입 될 수있다, 연구에 매우 편리합니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	</body>
</html>

도 2는, 제 도입 vue.js 다음에, 뷰는 다음 두 가지 예, 측위 한 EL 소자가 있는데, 인스턴스를 생성하는 클래스 선택기 경우, 그와 "클래스 선택기 이름."; 만약 아이디 선택이, 다음 사용이다 "#ID 선택을." 값, 즉 키 : 데이터 값은 데이터 및 변수를 저장하기 위해, 일반적으로 변수 이름이고, 다른이다.
다음 사용하여 보간 {{}} 중괄호는 보간.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
	<div id="app2">
	  {{ msg }} {{name}}
	</div>
	
	<script type="text/javascript">
	var app = new Vue({
		el: '#app',//元素
		data: {//数据，变量
			message: 'Hello Vue!',
			name : "Vue"
		}
	});
	var app2=new Vue({
		el:'#app2',//元素用于定位
		data:{//数据变量
			msg:'hello world',
			name:"Fuck"
		}
	})
	</script>
</body>
</html>

3. 데이터 및 방법, 시계 ( '관찰 객체 함수 (새로운 값이 이전 값))를 사용하여

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{a}}
</div>

<script type="text/javascript">
var data = { a : 1 };//data是一个变量，值是1
var vm = new Vue({
	el   : "#app",//ID选择器
	data : data//data是变量
});
vm.$watch('a', function(newVal, oldVal){//watch('观察的对象'，function(newWal,oldVal))
 	console.log(newVal, oldVal);//watch观察变量的变化
 })

vm.$data.a = "test...."//用于区分
</script>
</body>
</html>

4.beforeCreate : 함수 () {} 데이터 관찰 및 이벤트 / 시계 구성 호출을 생성하기 전에 초기화 뷰 인스턴스 후 : 함수 () {} 인스턴스를 만든 후이 단계에서 즉시 호출, 완료 인스턴스 데이터 관찰 , 속성 및 운영의 방법은, 시계 / 이벤트 콜백 이벤트, 다음 단계를 마운트는 아직 시작하지 않은, $엘 속성은 현재 볼 수 없습니다. beforeMount : 함수 () {}는 마운트의 시작 전에 관련 렌더링 함수가 처음이라고 불려; 장착 : 함수 () {} VM을 새롭게 만들어지고있다.$ 성공적인 호출, beforeUpdate 설치시 EL은 대안 : 함수 () {} 업데이트 된 데이터를 업데이트 할 때 호출 : 함수 () {} 함수는 DOM 요소에 업데이트되었습니다, 구성 요소 호출 후 업데이트 .

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{msg}}
</div>
<script type="text/javascript">
	//生命周期钩子需要写在声明vue里面
var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
	},
	//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	beforeCreate:function(){
		console.log('beforeCreate');
	},
	/* 在实例创建完成后被立即调用。
	在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	然而，挂载阶段还没开始，$el 属性目前不可见。 */
	created	:function(){
		console.log('created');
	},
	//在挂载开始之前被调用：相关的渲染函数首次被调用
	beforeMount : function(){
		console.log('beforeMount');

	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
		console.log('mounted');
	
	},
	//数据更新时调用
	beforeUpdate : function(){
		console.log('beforeUpdate');
			
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
		console.log('updated');	
	}
});
setTimeout(function(){
	vm.msg = "change ......";
}, 3000);
</script>
</body>
</html>

변수 이름 텍스트 보간 {{}}
페이지로는 V가-HTML = "태그의"와 같은 요구 <p v-html="rawHtml"></p>
클래스 또는 ID = "클래스 이름 또는 ID 선택기": 동적으로 값을 변경 V-바인드.
V-바인딩 : HREF = "URL ": 점프 페이지
V-IF = ""
V - 더 다른-IF = ""
V - 더 다른 = "을"심판
"에 해당하는 이벤트 기능을 클릭 @ 클릭 ="
@ click.stop = "를 "부모는 자신의 구현을 실행되지 않습니다.

Vue实例中有el,data,还有一个就是methods，用于定义函数，比如下面的点击事件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<p v-if="seen">现在你看到我了</p>
	<a v-bind:href="url">...</a>
	<div @click.stop="click1">
		<div @click="click2">
			click me
		</div>
	</div>
	<div @click="click3">
		Don't click me or you will shadow the side
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		seen : true,
		url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
	},
	methods:{
		click1 : function () {
			console.log('click1......');
		},
		click2 : function () {
			console.log('click2......');
		},
		click3:function(){
			console.log('clickmmmmmm');
		}
	}
});
</script>
<style type="text/css">
</style>
</body>
</html>

6. 렌더링 어레이
V-용 = "항목 인덱스 에 배열 이름 정의"키 = "인덱스"
V-용 = "값, 어레이 키 이름에 기재된"속성 추출주기 값 + 이름

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<ul>
		<li v-for="item,index in items" :key="index">
		{{index}}{{ item.message }}
		</li>
	</ul>
	<ul>
		<li v-for="value, key in object">
			{{key}} : {{ value }}
		</li>
	</ul>
	<ul>
		<li v-for="value,key in lesson">
			{{value}}
		</li>
	</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		items : [
			{ message: 'Foo' },
			{ message: 'Bar' },
			{ message:'too far'}
		],
		object: {
			title: 'How to do lists in Vue',
			author: 'Jane Doe',
			publishedAt: '2016-04-10'
		},
		lesson:{
			titile:"高等数学",
			author:"汪红"
		}
	}
});
</script>
</body>
</html>

겸손 파라오

게시 된 원본 기사 · 원의 칭찬 0 · 조회수 27

개인 편지 우려

뷰 연구 노트의 -day1

추천