2018-03-05 vue实践学习

经历过一周我又继续和这个vue磕上了,我想这次得有点收获了吧......

1.来点知识点

console.dir()可以显示一个对象所有的属性和方法;

测试一段代码执行时间

console.time('test');

/* 这里运行待测代码 */

console.timeEnd('test');

2.vue概述:

Vue主要是“面向数据”编程。当数据发生改变时使用虚拟DOM来更改某一DOM节点,避免将整个页面渲染.

Vue特色—数据双向绑定:数据模型(model)与视图(view)组件的自动同步。

Vue特色—声明式渲染:数据模型(model)与视图(view)组件的自动同步。

声明式

只需要声明在哪里(where)做什么(what),而无需关心如何实现(how)

3.Vue指令

指令

是一种特殊的自定义行间属性(也就是在html标签内写);指令的职责就是当其表达式的值改变时相应地将某些行为应用到DOM上,在Vue中,指令以“v-”开头

4.

1. html模版

html模版:基于DOM的模版,模版都是可解析的有效的HTML

插值

文本:使用“Mustache”语法(大括号){{ value }};作用:替换实例上的属性值,当值改变时,插值内容会被自动更新。也可使用v-text="value"代替。

原生的html:双大括号输出的文本,不会解析html标签。也就是说当实例的data为html标签时,不能解析而是直接输出出来。此时如想要解析,可使用v-html="value"代替。

<p>{{ value }}</p>   === <p v-text="value"></p>

需要注意的是,有时候因为一些网络延迟等原因,用户会在也买年中先看到{{ xxx }},然后才有数据。我们若想避免此效果,可用v-text="xxxx"代替

想要解析,可使用v-html="value"代替。

使用javascript表达式:可以写简单的表达式。(可以简单的三目运算,但是不可以写if语句),以后会有计算属性。

{ 1+2 }

{ true? "yes":"no" }

2.字符串模版

template字符串

tempalte => 选项对象的属性

模版将会替换挂载的元素。挂载元素的内容都会被忽略,根节点只有一个,将html结构写在一对script标签中,设置type="x-template"。

3种方式字符串模版:


第一种方式


第一种方式结果

说明权重比较高,直接“代替”挂载点,把原来的html替换后显示。


第二种方式


第3种方式
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容