2、数据绑定,指令,事件

vue实例和数据绑定

1、通过构造函数 Vue 就可以创建一个 Vue 的根实例,并启动 Vue 应用---入口

                例子:var app =new Vue({ el:'', data:{ msg:"123" , a:1 } })

2、必不可少的一个选项就是 el 。 el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue实例,可以是标签。也可以是css语法(不推荐)。

3. 通过 Vue 实例的 data 选项,可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内 声明,这样不至于将数据散落在业务逻辑中,难以维护。也可以指向一个已经有的变量。

4. 挂载成功后,我们可以通过 app.$el  ; app.$data 来访问Vue实例属性。Vue 提供了很多常用的实例属性与方法,都以$开头。访问data元素的属性,直接app.属性名,app.msg。




生命周期钩子

created 实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载, $el 还不可用。需要初始化处理一些数据时会比较有用。----还未挂载

mounted el 挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始 。相当于 $(document).ready()。---刚刚挂载

beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。




文本插值和表达式

在 {{ }} 中,除了简单的绑定属性值外,还可 以使用 JavaScript 表达式进行简单的 运算 、 三元运算等 。( 文本插值只支持单个表达式,不支持语句、多行表达式和流控制。)

例:{{ 6<3 ? msg :a}},可以用三元运算符;

        {{ 3+4 }},可以为运算;

        {{ var book = ' Vuejs '}},不可以用语句;

        {{var a = 2}},不可用多行表达式( var a  ; a = 2 )

        {{ if (ok) return msg }},不可用流控制;




过滤器

Vue. 支持在{{}}插值的尾部添加一小管道符 “ | ” 对数据进行过滤,经常用于格式化文本,比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的, 通过给 Vue 实例添加选项 filters 来设置过滤器。例:{{ data | filter }},多个多虑器{{ data | filter1 | filter2}}。

{{ date | formatDate(66,99) }} 中的第一个和第二个参数,分别对应过滤器的第二个和第三个参数。




指令、事件

指令(Directives)是 Vue 模板中最常用的一项功能,它带有前缀 v-,能快速完成DOM操作。循环渲染,显示和隐藏。(v-text,v-html,v-on,v-bind)

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,072评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,233评论 0 6
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,589评论 0 6
  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 2,842评论 4 45
  • 元旦第三天,你给我来了句生日快乐,告诉我看到两天前的说说才想起这句迟到的祝福。我都能想象出屏幕后那张肉肉的笑得猥琐...
    海林钥匙阅读 633评论 0 1