Vue.js의 일반적인 템플릿 구문에 대한 자세한 소개
- 黄舟원래의
- 2017-07-26 16:12:091626검색
이 글은 주로 Vue.js 스터디노트의 공통 템플릿 구문에 대한 자세한 설명을 소개하는 글입니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집기를 따라 살펴보겠습니다
이 문서에서는 Vue.js의 일반적인 템플릿 구문을 소개하고 이를 모든 사람과 공유합니다. 세부 사항은 다음과 같습니다.
1. Vue는 다음의 동적 렌더링을 지원합니다. 텍스트, 즉 속성을 수정할 때 동시에 텍스트 콘텐츠가 실시간으로 렌더링됩니다. 동시에 렌더링 효율성을 높이기 위해 한 번만 렌더링하는 것도 지원됩니다. 즉, 텍스트가 처음으로 렌더링된 후에는 속성 값이 변경되어도 텍스트 내용이 더 이상 변경되지 않습니다. 실시간 렌더링
<p class="row">
<h2>文本 - 实时渲染</h2>
<input type="text" v-model="msg" class="col-md-2" />
<span class="col-md-">{{ msg }}</span>
</p>
<p class="row">
<h2>文本 - 一次渲染</h2>
<input type="text" v-model="msg_once" class="col-md-2" />
<span class="col-md-" v-once>{{ msg_once }}</span>
</p>vm 개체에 속성 추가 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
var vm = new Vue({
el: "#app",
data: {
msg_once: "once..."
}
});
});
어떤 경우에는 페이지에 HTML 코드 조각을 동적으로 삽입해야 합니다.vm 객체에 속성을 추가하세요. 속성 값은 HTML 코드 조각입니다.
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
var vm = new Vue({
el: "#app",
data: {
html: "<span>This is a html tag.</span>"
}
});
});Add 페이지 요소에 대한 v -html 지시문 다음에 속성 값 내의 해당 요소가 요소의 해당 위치에 표시됩니다<p class="row"> <h2>文本 - HTML</h2> <p v-html="html"></p> </p>
v-html 指令后，元素对应位置将显示出属性值内的对应元素
<p>
<h4>运算表达式</h4>
<span v-pre>{{ Number(number)+ }}：</span>
<input v-model="number" type="text" />
<span>运算结果：{{ Number(number)+ }}</span>
</p>
二、表达式
上文中已经介绍过的 {{ msg }} 就是一个简单的表达式。除此之外，还有一些常用的表达式写法。
运算表达式
在上述简单表达式中可以使用运算符，Vue会将运算后的结果渲染在页面上
<p>
<h4>三元运算表达式</h4>
<span v-pre>{{ ok ? 'YES' : 'NO' }}：</span><span>{{ ok ? 'YES' : 'NO' }}</span>
</p>
在文本框中输入数字，Vue通过表达式内的运算符实时计算出结果，并显示出来。因为文本框内容为字符串，所以在表达式中需要对 number 属性进行类型转换成数字。
三元运算表达式
Vue支持在表达式内使用三元运算符
<p>
<h4>Javascript方法</h4>
<span v-pre>{{msg_once.split('').reverse().join('')}}：</span><span>{{msg_once.split('').reverse().join('')}}</span>
</p>
Javascript方法
表达式内也可以使用Javascript支持的基础方法，Vue会动态执行方法并显示最终结果
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
var vm = new Vue({
el: "#app",
data: {
filter_msg: 'base'
},
filters: {
filter: function (value) {
if (!value) {
return '';
}
return value + '_filter1';
},
filter2: function (value) {
if (!value) {
return '';
}
return value + '_filter2';
},
filter_arg: function (value, arg1, arg2) {
if (!value) {
return '';
}
return value + ' ' + arg1 + ' ' + arg2;
}
}
});
});
这个例子是将 msg_once 属性值的字符进行倒序排列后重新组合起来。
三、过滤器
过滤器经常用来进行内容的格式化显示。Vue支持自定义过滤器
首先要在 vm 对象里增加过滤器方法
<p>
<h4>单一过滤器</h4>
<span v-pre>{{ filter_msg | filter1 }}：</span><span>{{ filter_msg | filter1 }}</span>
</p>所有的过滤器方法都要定义在 filters 属性里，方法的第一个参数值就是传递进来需要被处理的原始内容，方法的返回值即时处理过的新内容。
自定义的过滤器使用方法如下
<p>
<h4>串联过滤器</h4>
<span v-pre>{{ filter_msg | filter1 | filter2 }}：</span><span>{{ filter_msg | filter1 | filter2 }}</span>
</p>
上面的例子中，过滤器通过管道符号“|”与需要处理的内容进行连接，将 filter_msg 属性值经过 filter1 
2. Expression
{{ msg }} 위에서 소개한 code> 는 간단한 표현입니다. 그 외에도 자주 사용되는 표현이 있습니다.
위의 간단한 표현식에 연산자를 사용할 수 있으며, Vue는 해당 연산의 결과를 페이지에 렌더링합니다
<p>
<h4>过滤器参数</h4>
<span v-pre>{{ filter_msg | filter_arg('arg1', 'arg2') }}：</span><span>{{ filter_msg | filter_arg('arg1', 'arg2') }}</span>
</p>
🎜🎜텍스트 상자에 숫자를 입력하면 Vue는 표현식 내의 연산자를 통해 실시간으로 결과를 계산하여 표시합니다. 텍스트 상자의 내용은 문자열이므로 표현식에서 숫자 속성을 숫자로 유형 변환해야 합니다. 🎜🎜🎜삼항 연산 표현식🎜🎜🎜Vue는 표현식 내에서 삼항 연산자 사용을 지원합니다🎜🎜🎜🎜<p> <h>v-bind（属性绑定）</h> <span v-pre>可用的按钮(v-bind:disabled="!btn_enabled")：</span><button v-bind:disabled="!btn_enabled" type="button">可以点击的按钮</button><br/> <span v-pre>不可用的按钮(v-bind:disabled="btn_enabled")：</span><button v-bind:disabled="btn_enabled" type="button">不可点击的按钮</button><br/> <span v-pre>缩写(:disabled="!btn_enabled")：</span><button :disabled="!btn_enabled" type="button">可以点击的按钮</button> </p>🎜
🎜🎜이 예는 msg_once 속성 값의 문자를 반대로 배열하고 재조립. 🎜🎜🎜🎜 3. 필터 🎜🎜🎜🎜필터는 콘텐츠 형식을 지정하고 표시하는 데 자주 사용됩니다. Vue는 사용자 정의 필터를 지원합니다🎜🎜먼저, vm 객체🎜🎜🎜🎜 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
var vm = new Vue({
el: "#app",
data: {
btn_enabled: true
}
});
});🎜에 필터 메소드를 추가하세요. 모든 필터 메소드는 첫 번째 매개변수 값인 filters 속성에 정의되어야 합니다. 메서드는 처리해야 하는 전달된 원본 콘텐츠이고, 메서드의 반환 값은 처리된 새 콘텐츠입니다. 🎜🎜커스텀 필터 사용 방법은 다음과 같습니다🎜🎜🎜🎜 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
var vm = new Vue({
el: "#app",
methods: {
btn_click: function () {
console.log("button click!");
},
btn_clickWithEvent: function($event){
console.log($event);
},
btn_clickWithMsg: function (msg) {
console.log("Message is:" + msg);
}
}
});
});🎜🎜🎜위의 예에서는 파이프 기호 "|"를 통해 처리해야 할 내용에 필터가 연결되어 있고 filter_msg 속성 값이 filter1을 통해 전달됩니다. 필터. 내용이 추가되어 나중에 표시됩니다. 🎜🎜동시에 Vue는 여러 필터 연결도 지원합니다🎜🎜🎜🎜<p> <h4>v-on（事件绑定）</h4> <span v-pre>点击事件(v-on:click="btn_click")：</span><button v-on:click="btn_click" type="button">点我！</button><br/> <span v-pre>带事件参数的点击事件(v-on:click="btn_clickWithEvent($event)")：</span><button v-on:click="btn_clickWithEvent($event)" type="button">点我！</button><br/> <span v-pre>带自定义参数的点击事件(v-on:click="btn_clickWithMsg('Hello world!')")：</span><button v-on:click="btn_clickWithMsg('Hello world!')" type="button">点我！</button><br/> <span v-pre>缩写(@click="btn_click")：</span><button @click="btn_click" type="button">点我！</button> </p>🎜🎜🎜🎜이 예에서는 파이프 기호 "|"를 통해 여러 필터를 연결할 수 있으며 이전 각 필터의 출력은 다음과 같이 사용됩니다. 다음 최종 결과가 표시될 때까지 입력을 필터링합니다. 🎜🎜필터에 여러 매개변수가 있는 경우 Vue는 매개변수 호출도 지원합니다🎜🎜🎜🎜
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
var vm = new Vue({
el: "#app",
data: {
books: ["深入浅出node", "C#本质论", "编程珠玑"]
}
});
});🎜🎜🎜四、常用指令
指令就是将一些特殊行为应用到页面DOM元素的特殊属性。Vue的内置指令都是一些带有 v- 前缀的特殊属性。
常用的指令如下：
v-bind
v-on
v-for
v-if
v-else-if
v-else
v-show
v-bind
该指令用来给元素绑定一个或多个特性
<p> <h>v-bind（属性绑定）</h> <span v-pre>可用的按钮(v-bind:disabled="!btn_enabled")：</span><button v-bind:disabled="!btn_enabled" type="button">可以点击的按钮</button><br/> <span v-pre>不可用的按钮(v-bind:disabled="btn_enabled")：</span><button v-bind:disabled="btn_enabled" type="button">不可点击的按钮</button><br/> <span v-pre>缩写(:disabled="!btn_enabled")：</span><button :disabled="!btn_enabled" type="button">可以点击的按钮</button> </p>
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
var vm = new Vue({
el: "#app",
data: {
btn_enabled: true
}
});
});在上面的例子里，给 vm 对象增加一个名称为 btn_enabled 的布尔属性，在按钮中通过 v-bind:disabled="btn_enabled" 动态给 disabled 属性赋值
页面上可以看到“不能点击的按钮”动态增加了一个 disabled 属性。同时 v-bind:disabled="!btn_enabled" 也可以简写成 :disabled="!btn_enabled" 。
v-on
该指令绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句。用在普通元素上时，只能监听原生 DOM 事件。在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性。
在 vm 对象的 methods 属性里添加自定义方法
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
var vm = new Vue({
el: "#app",
methods: {
btn_click: function () {
console.log("button click!");
},
btn_clickWithEvent: function($event){
console.log($event);
},
btn_clickWithMsg: function (msg) {
console.log("Message is:" + msg);
}
}
});
});通过属性 v-on:click="btn_click" 在按钮上添加 click 事件
<p> <h4>v-on（事件绑定）</h4> <span v-pre>点击事件(v-on:click="btn_click")：</span><button v-on:click="btn_click" type="button">点我！</button><br/> <span v-pre>带事件参数的点击事件(v-on:click="btn_clickWithEvent($event)")：</span><button v-on:click="btn_clickWithEvent($event)" type="button">点我！</button><br/> <span v-pre>带自定义参数的点击事件(v-on:click="btn_clickWithMsg('Hello world!')")：</span><button v-on:click="btn_clickWithMsg('Hello world!')" type="button">点我！</button><br/> <span v-pre>缩写(@click="btn_click")：</span><button @click="btn_click" type="button">点我！</button> </p>
页面效果如下
v-on指令也支持缩写，用@符号代替，比如： @click="btn_click" 。
v-for
该指令用来基于源数据多次渲染元素或模板块。
在 vm 对象里添加一个数组类型的属性 books
require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
var vm = new Vue({
el: "#app",
data: {
books: ["深入浅出node", "C#本质论", "编程珠玑"]
}
});
});通过 v-for 指令实现一个简单列表
<p>
<h4>v-for（循环）</h4>
<ul>
<li v-for="item in books">
{{ item }}
</li>
</ul>
</p>页面效果如下
v-for 属性值是一个 item in expression 结构的表达式，其中 item 代表 expression 运算结果的每一项。最终的HTML代码如下
v-if、v-else-if、v-else
条件渲染指令，通过表达式结果的真假来插入和删除元素。 v-if 可以单独使用，而 v-else-if 、 v-else 必须和 v-if 一起使用。
下面是一个简单用法的例子
<p> <h4>v-if、v-else-if、v-else（分支）</h4> <span>分支示例：</span> <input type="text" v-model="number" /> <span v-if="number>10">大于10</span> <span v-else-if="number==10">等于10</span> <span v-else>小于10</span><br/> </p>
页面显示如下
当文本框里输入小于10的数字时，右侧只显示“小于10”的文本内容。
查看源码发现，只有“小于10”的内容的 span 标签存在，另外两个标签被插入到页面中。
同样，在输入大于10的数字时，右侧只显示“大于10”的文本内容。而源码里只有对应的 span 标签存在。
v-show
该指令也是条件渲染指令，但是与上述的 v-if 有不同。这可以通过一个例子来说明。
<p> <h4>v-show（条件渲染）</h4> <span>v-show示例：</span> <input type="text" v-model="number" /> <span v-show="number>10">大于10</span> <span v-show="number==10">等于10</span> <span v-show="number<10">小于10</span><br/> </p>
将上面例子里的指令都换成 v-show ，页面显示如下
从页面显示的结果上看，没有任何区别。但是查看源码会发现，符合表达式结果判断的元素内容将被显示，不符合结果判断的元素将被隐藏，即被加上 display: none; 的样式。
위의 두 예를 비교해 보면 알 수 있듯이
v-if: 요소를 동적으로 삽입하거나 삭제합니다
v-show: 요소를 동적으로 표시하거나 숨깁니다
위 내용은 Vue.js의 일반적인 템플릿 구문에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!