模板语法
文本:
- <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 衔接的纽带, 其本意是用来描述元素内容的
image.PNG
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>
计算属性和侦听器
image.PNG
- <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 还没有发生改变
多次访问 计算属性会立即返回之前的计算结果, 而不必再次执行函数
image.PNG
image.PNG
侦听属性
- <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]
- }
- }
- }
- // ...
image.PNG
当需要在数据变化时执行异步或开销较大的操作时, 这个方式是最有用的.
image.PNG
请点赞! 因为你的鼓励是我写作的最大动力!
官方微信公众号
吹逼交流群: 711613774
吹逼交流群
来源: http://www.jianshu.com/p/ebf198feb648