(32)Vue模板语法
模板语法
文本:
<span>Message: {{ msg }}</span>
v-once
一次性地插值,当数据改变时,插值处的内容不会更新
<span v-once>这个将不会改变: {{ msg }}</span>
v-html 指令
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
<div v-bind:id="dynamicId"></div>
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
<p v-if="seen">现在你看到我了</p>
v-if 指令将根据表达式 seen 的值的真假来插入/移除 元素
<a v-bind:href="url">...</a>
深刻理解语义化
Web 语义化是指使用恰当语义的 HTML 标签、Class 类名等内容
HTML 为网页文档内容提供上下文结构和含义
CSS语义就是class和ID命名的语义
Class 属性作为 HTML 与 CSS 衔接的纽带,其本意是用来描述元素内容的
html语义化就是让页面的内容结构化
Web语义化是指使用恰当语义的html标签、class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容
html语义化及css命名语义化
利于 SEO,便于阅读维护理解
Web标准-结构、样式和行为的分离
结构部分、样式部分和行为部分
结构部分主要包括XML标准、XHTML标准
样式标准主要是指CSS标准
行为标准主要包括DOM标准和ECMAScript标准
HTML:超文本标记语言,负责网页的结构
通常语义化HTML会使代码变的更少,使页面加载更快
语义化HTML会使HTML结构变的清晰,有利于维护代码和添加样式
提升网页的可访问性和交互操作性
提升搜索引擎优化(SEO)的效果
v-on 指令,它用于监听 DOM 事件
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
计算属性和侦听器
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'
计算属性缓存,方法,计算属性,侦听属性,计算属性的setter
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
计算属性是基于它们的响应式依赖进行缓存的
只在相关响应式依赖发生改变时它们才会重新求值
只要 message 还没有发生改变
多次访问 计算属性会立即返回之前的计算结果,而不必再次执行函数
侦听属性
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
请点赞!因为你的鼓励是我写作的最大动力!
吹逼交流群:711613774
(32)Vue模板语法的更多相关文章
- Vue 模板语法 && 数据绑定
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- Vue模板语法(二)
Vue模板语法(二) 样式绑定 class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...
- Vue模板语法(一)
Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...
- Vue模板语法(一)
Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...
- 初始Vue、Vue模板语法、数据绑定(2022/7/3)
文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...
- (Vue)vue模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. ...
- Vue模板语法与常用指令
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...
- Vue模板语法(二)
Vue基础模板语法 二 1. 样式绑定 1.1 class绑定 使用方式:v-bind:class="expression" expression的类型:字符 ...
- 11 - Vue模板语法
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...
随机推荐
- Java的集合整理
1.List和Set都是接口,他们都继承于接口Collection,List是一个有序的可重复的集合,而Set的无序的不可重复的集合.Collection是集合的顶层接口,Collections是一个 ...
- C#混音同时录制采集声卡和麦克风话筒
在项目中,我们可能需要同时录制声卡的声音和麦克风的声音,比如直播间,在线教学.那么如何实现呢?当然是采用SharpCapture!下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步: ...
- c#的一些书写技巧
从非创建线程访问线程资源 Invoke(new Action<int>((o)=> { textBox1.Text = (Convert.ToInt32(textBox1.Text ...
- 学了python能干什么
学了python能做些什么 1.WEB开发 Python拥有很多免费数据函数库.免费web网页模板系统.以及与web服务器进行交互的库,可以实现web开发,搭建web框架,目前比较有名气的Python ...
- Ubuntu 18.04 LTS版本 GIMP安装
为何安装? GIMP全称GNU Image Manipulation Program,是Linux下的一款图片处理软件,功能基本完备,用户体验不错. 如何安装? 命令:sudo apt install ...
- JAVA基础之ServletContext对象
个人理解: ServletContext类似字节码文件对象,在web创建的时候就自动生成了,并且是唯一的,跟随着项目和服务器共存亡了.通过这个对象,我们可以向里面存数据(键值对),也可以通过别的Se ...
- Sbase数据库自动截断日志
http://infocenter.sybase.com/help/index.jsp?topic=/com.sybase.infocenter.dc36273.1550/html/sprocs/X3 ...
- python实现进制转换(二、八、十六进制;十进制)
python实现进制转换(二.八.十六进制:十进制) (一)十进制整数转为二.八.十六进制 1.format实现转换>>> format(2,"b") # (10 ...
- excel合并日期和时间(转载)
https://jingyan.baidu.com/article/d3b74d641669361f77e60914.html =TEXT(A2,"YYYY/M/D")&& ...
- 【微信小程序】——wxss引用外部CSS文件及iconfont,图文教程
小程序引入外部文件的方式是:@import “/.wxss”; 小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为bas ...