对Vue的模板语法,计算属性,侦听器的分析-js教程-PHP中文网

对Vue的模板语法,计算属性,侦听器的分析

不言

发布： 2018-07-17 16:32:10

原创

1704人浏览过

本篇文章给大家分享的内容是关于对vue的模板语法,计算属性以及侦听器的分析。有需要的朋友可以参考一下。

模板语法、计算属性和侦听器

目标：

1、熟练使用vue的模板语法

2、理解计算属性与侦听器的用法以及应用场景

立即学习“前端免费学习笔记（深入）”；

1. 模板语法

<div id="app">
<!-- 以下说绑定的值都可以写成js表达式形式 -->
<!-- {{}}: 双大括弧语法 -->
<!-- 如果不想让它响应更新,可以添加v-once指令(只渲染一次) -->
<p>
first: {{firstName}}<br>
last: {{lastName}}<br>
{{firstName + ' ' + lastName}}
</p>
<!-- 以下的绑定都会优先显示,也就是原本标签之间的值的会无效 -->
<!-- 使用v-html: html会被解析 -->
<p v-html="test"></p>
<!-- 使用v-text: html不会被解析,直接以文本输出 -->
<p v-text="test">123</p>
 
<!-- 标签属性绑定v-bind, 简写":" -->
<img  v-bind:height="imgHeight" :   style="max-width:90%" style="border: 1px solid #000" alt="对Vue的模板语法,计算属性,侦听器的分析" ></img>
</div>
 
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Chi',
lastName: 'Chan',
test: '<h1>哈哈哈<h1>',
imgHeight: '200px',
imgWidth: 200
}
})
</script>

登录后复制

2. 计算属性(computed)

启科网络PHP商城系统

启科网络商城系统由启科网络技术开发团队完全自主开发，使用国内最流行高效的PHP程序语言，并用小巧的MySql作为数据库服务器，并且使用Smarty引擎来分离网站程序与前端设计代码，让建立的网站可以自由制作个性化的页面。系统使用标签作为数据调用格式，网站前台开发人员只要简单学习系统标签功能和使用方法，将标签设置在制作的HTML模板中进行对网站数据、内容、信息等的调用，即可建设出美观、个性的网站。