数据绑定,指令,事件

149 阅读1分钟

vue实例和数据绑定

  • 必不可少的一个选项就是 el。 el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue实例,可以是标签。也可以是css语法
  • 通过 Vue 实例的 data 选项,可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内 声明,这样不至于 将数据散落在业务逻辑中,难以维护。也可以指向一个已经有的变量
  • 挂载成功后,我们可以通过 app.$el 来访问该元素。Vue 提供了很多常用的实例属性与方法,都以开头,比如el,Vue实例本身也代理了data对象里的所有属性,所以可以这样访问
  • ---访问vue实例的属性app.el ,app.data
  • ---访问vue实例的属性:都是以开头如app.开头 如app.el
  • ---访问data元素的属性-- 直接app.属性名,app.msg

生命周期钩子

  • created 实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载, $el 还不可用。需要初始化处理一些数据时会比较有用----还未挂载
  • mounted el 挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始 。相当于 $(document).ready()---刚刚挂载
  • beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。

文本插值和表达式

语法:使用双大括号( Mustache 语法)“{{}}”是最基本的文本插值方法,它会自动将我们双向绑定的数据实时显示出来

在{{}}中,除了简单的绑定属性值外,还可以使用 JavaScript 表达式进行简单的运算 、 三元运算等

---实例 Vue .js 只支持单个表达式,不支持语句和流控制。

  • {{ 6+6 *3}}---可以进行简单的运算
  • {{ 6<3 ? msg :a}}---可以用三元运算符
  • {{if(6>3){}}-----注意:文本插值的形式,其中不能书写表达式,支持单个表达式
  • {{var a = 6}}--也是多行表达式----var a ;a = 6;
    • 〈!一这是语旬,不是表达式 一〉
      • { { var book = ’ Vue . js 实战 ’ }}
    • 〈!一不能使用流控制,要使用三元运算 一〉
      • {{ if (ok) return msg ))