第二章 数据绑定和第一个 Vue 应用

1、v-model 指令,实现数据绑定(绑定 data 里的数据)

2、Vue 的几个常用的生命周期钩子:
created,实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el 还不可用,需要初始化一些数据时会比较有用;
mounted,el 挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始;
beforeDestroy,实例销毁之前调用,主要用来解绑一些 addEventListener 监听的事件等。

这些钩子与 el 和 data 类似,也是作为选项写入 Vue 实例内,并且钩子的 this 指向都是调用它的 Vue 实例

3、插值与表达式:
{{}}(双大括号)是最基本的文本插值方法,它会自动将我们双向绑定的数据实时显示出来;
v-pre,如果只是想显示某一功能标签而不进行编译替换,使用此标签;
v-text,更新元素的文本内容,写入里面的所有内容都会以文本形式展现出来,包括 HTML 元素、功能性标签等;
v-html,按普通的 HTML 内容进行插入,但在站点上动态渲染任意的 HTML 可能会非常危险,为避免 XSS 攻击,一般我们要在服务端对用户提交的内容进行处理,可将尖括号转义,也可以只在可信内容上使用 v-html,而永不用在用户提交的内容上。

4、Vue 支持在 {{}} 插值的尾部添加一个管道符 “|” 对数据进行过滤,经常用于格式化文本,通过给 Vue 实例添加 filters 选项来设置自定义规则,过滤器可以串联也可以接收参数,传给过滤器的参数是从第二个开始的,因为第一个参数永远是数据本身。

{{ data | filterA('arg1','arg2' }}  // arg1 和 arg2 分别是传给过滤器的第二个和第三个参数

5、v-bind,动态更新 HTML 元素上的属性,比如 id、class 等(绑定元素的属性值);
v-on,绑定事件监听器,实现交互功能;
语法糖,是指在不影响功能的情况下,添加某种方法实现同样的效果,从而方便程序开发,其实也可以说是缩写,v-bind 的语法糖是“:”,v-on 的语法糖是“@”。

<a :href="url"></a>  // v-bind 语法糖
<button @click="handleClose" ></button>  // v-on 语法糖
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,079评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,241评论 0 6
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,095评论 4 129
  • 跟别人背后讲着她的坏话 当面跟她笑成花 你说那些话只是对一些事的不满 可别人听了就会发芽 装作跟所有人很...
    周喜阅读 401评论 0 0
  • 亲亲 谁叫你偷亲我 脸红的羞赧 受宠若惊 亲亲 谁教你的举动 甜甜的小脸 懵懂的样子 亲亲 下次不准这样 呆呆的坐...
    浅浅是水阅读 439评论 67 43