Vue.js는 뷰 레이어에만 초점을 맞추고 상향식 증분 개발 디자인을 채택하는 진보적인 프레임워크입니다. 목표는 가능한 가장 간단한 API를 통해 반응형 데이터 바인딩 및 결합된 뷰 구성 요소를 달성하는 것입니다. Vue는 배우기 매우 쉽습니다. 이 튜토리얼은 Vue 2.1.8 버전 테스트를 기반으로 합니다. 프로그래밍 분야에서 매우 인기가 많은 글입니다. Vue.js의 자세한 사용법을 주로 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.
먼저 Vue를 살펴보겠습니다.
Vue.js는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 다른 헤비급 프레임워크와 달리 Vue는 기본적으로 최소 비용, 점진적으로 채택 가능한 디자인을 채택합니다. Vue의 핵심 라이브러리는 뷰 레이어에만 중점을 두고 있으며 다른 타사 라이브러리 또는 기존 프로젝트와 쉽게 통합할 수 있습니다. 반면 Vue 생태계에서 지원하는 단일 파일 구성 요소 및 라이브러리와 결합하면 Vue는 복잡한 단일 페이지 애플리케이션을 완벽하게 구동할 수도 있습니다. 따라서 Vue는 실제로 매우 강력합니다.
1. Vue.js 설치 및 템플릿 구문
Vue 사용은 매우 간단합니다. Vue.js를 직접 다운로드하거나 Vue.min.js를 가져와 사용할 수 있습니다.
1-1 템플릿 구문
Vue.js는 HTML 기반 템플릿 구문을 사용하므로 개발자는 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있습니다.
Vue.js의 핵심은 간결한 템플릿 구문을 사용하여 선언적으로 데이터를 DOM에 렌더링할 수 있는 시스템입니다.
응답 시스템과 결합하여 애플리케이션 상태가 변경되면 Vue는 구성 요소를 다시 렌더링하는 데 드는 최소 비용을 지능적으로 계산하고 이를 DOM 작업에 적용할 수 있습니다.
1.html 템플릿
html 템플릿: DOM 기반 템플릿, 템플릿은 구문 분석 가능하고 유효한 HTML입니다.
보간:
텍스트: "Mustache" 구문 사용(중괄호) {{ 값 }} 함수: 교체 인스턴스의 속성 값입니다. 값이 변경되면 보간된 내용이 자동으로 업데이트됩니다. 대신 v-text="value"를 사용할 수도 있습니다.
<p>{{ value }}<p> 等价于 <p v-text="value"></p>기본 HTML: 이중 중괄호로 출력된 텍스트는 html 태그를 구문 분석하지 않습니다. 즉, 인스턴스의 데이터가 html 태그인 경우 파싱이 불가능하고 직접 출력됩니다. 이때 구문 분석을 하려면 대신 v-html="value" 를 사용하면 됩니다.
new Vue({
data:{
value: `<span>我是一个span标签</span>`
}
});
<p>{{ value }}<p> 页面展示 => <span>我是一个span标签</span>
<p v-html="value"><p> 页面展示 => 我是一个span标签때때로 일부 네트워크 지연 및 기타 이유로 인해 사용자에게 {{ xxx }}가 먼저 표시된 다음 데이터가 표시된다는 점에 유의해야 합니다. 이 효과를 피하려면 대신 v-text="xxxx"를 사용할 수 있습니다.
속성: 변경 사항에 응답하려면 바인딩에 v-bind를 사용하세요.
{ 1+2 }
{ true? "yes":"no" }템플릿 문자열
tempalte => 옵션 객체의 속성
템플릿은 마운트된 요소를 대체합니다. 마운트된 요소의 내용은 무시됩니다. 루트 노드는 하나만 있습니다. 스크립트 태그 쌍에 HTML 구조를 작성하고 type="x-template"을 설정합니다.
<body>
<p id="box">
</p>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function () {
var str = '<h2>hello pink!</h2>'
var vm = new Vue({
el: '#box',
template: str
});
},false);
</script>
은 가중치가 상대적으로 높음을 나타냅니다. 마운트 지점을 직접 "교체"하고 원본 HTML을 교체하여 표시합니다.
//代码片段这个就是利用script标签对内定义模版，局限性：不能跨文件使用，一个页面中可以使用
<body>
<p id="box">
</p>
</body>
<script src="vue.js"></script>
<script type="x-template" id="str">
<p>我是一个p标签</p>
</script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function () {
var vm = new Vue({
el: '#box',
template: '#str'
});
},false);
</script>Vue 인스턴스, 각 애플리케이션은 Vue 생성자를 통해 루트 인스턴스(루트 인스턴스)를 생성하여 New Vue(옵션 개체)를 시작합니다. 매달린 요소, 데이터, 템플릿, 메서드 등이 포함된 옵션 개체를 전달해야 합니다.
el: 요소 선택기 마운트 --- String|HtmlElement
data: 프록시 데이터 --- Object|Functionmethods: 메서드 정의 --- Object
Vue 프록시 데이터 데이터, 각 vue 인스턴스는 해당 데이터를 프록시합니다. 개체에서 이러한 프록시 속성은 반응합니다. 새로 추가된 속성은 반응하지 않으며 변경 후 보기가 업데이트되지 않습니다.
Vue 인스턴스의 자체 속성과 메서드는 $el, $data와 같이 "$"로 시작하는 자체 속성과 메서드를 노출합니다. . .
var vm = new Vue({
el: '#app',
data: {
message: 'hello,Datura!!!'
}，
methods: {
test (){
alert(1);
}
},
compontents:{
//这里存放组件
}
});
/* vm就是new出来的实例 */
console.log(vm.$data);//也就是数据data，后面还有很多挂载在vm（new出来的）实例上的属性
//代码片段放在template标签里，并给一个id名
<body>
<template id="tem">
<p>我是template</p>
</template>
<p id="box">
</p>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function () {
var vm = new Vue({
el: '#box',
template: '#tem'
});
},false);
</script>3. 템플릿 - 렌더링 기능
render 기능은 편집기와 매우 유사합니다.
render => 옵션 개체 속성
데이터 개체 속성
class: {}, => 绑定class，和v-bind:class一样的API
style: {}, => 绑定样式，和v-bind:style一样的API
attrs: {}, => 添加行间属性
domProps: {}, => DOM元素属性
on: {}, => 绑定事件
nativeOn: {}, => 监听原生事件
directives: {}, => 自定义指令
scopedSlots: {}, => slot作用域
slot: {}, => 定义slot名称 和组件有关系，插曹
key: "key", => 给元素添加唯一标识
ref: "ref", => 引用信息
2Vue.js的条件、循环语句
2-1条件语句
v-if ：根据值的真假，切换元素会被销毁、重建； => 在dom中已消失
v-show ：根据值的真假，切换元素的display属性；
v-else ：条件都不符合时渲染；
v-else-if ：多条件判断，为真则渲染；1. 조건부 판단은 v-if 명령을 사용합니다.
<p id="app">
<p v-if="seen">现在你看到我了</p>
<template v-if="ok">
<p>哈哈哈，打字辛苦啊！！！</p>
</template>
</p>
<script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script><p id="app">
<p v-if="Math.random() > 0.5">
Sorry
</p>
<p v-else>
Not sorry
</p>
</p>
<script>
new Vue({
el: '#app'
})
</script><p id="app">
<h1 v-show="ok">Hello!</h1>
</p>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script><p id="app">
<p v-if="type === 'A'">
A
</p>
<p v-else-if="type === 'B'">
B
</p>
<p v-else-if="type === 'C'">
C
</p>
<p v-else>
Not A/B/C
</p>
</p>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
})
</script>③ v-if有更高的切换消耗而v-show有更高的初始渲染消耗。
如果需要频繁切换使用v-show更好，如果在运行时条件不大可能改变，使用v-if比较好
2-2 循环语句 v-for
① 语法：v-for="x in items"
x是索引；items是数组，这样进行遍历
② v-for循环是不断创建新的标签，标签里的内容，我们决定，一般都是放在数组里，然后遍历显示出来。也可以放对象 ，遍历对象。
③ 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
<body>
<p id="app">
<ul>
<li v-for="(val,key) in fruitsArr">{{ val }} => {{ key }}</li> //循环出来的列表项
</ul>
</p>
</body>
<script src="../vue.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function () {
var vm = new Vue({
el: '#app',
data:{
fruitsArr:['apple','banana','orage','pear'] //数据源
}
});
},false);
</script>
总结
以上所述是小编给大家介绍的Vue.js用法详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
学完本文之后相信大家对Vue.js有一个更深的了解，大家觉得不错的话就收藏起来吧。
相关推荐：
위 내용은 Vue.js의 가장 완벽한 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
