Vue数据绑定

Vue 实例与数据绑定

如何创建 Vue 实例

Vue.js 可以通过构造函数来创建一个 Vue 根实例,且启动 Vue 应用

var app = new Vue({
  // Code
});

一个变量代表一个 Vue 实例,一个 Vue 实例代表一个对象
在代码内,必不可少的是 el 选项,el 是 element 的缩写,用于指定页面中已经存在的 DOM,el 的值可以是 HTMLElement,也可以是 CSS 的选择器样式Style

<div id="app"></div>

var app = new Vue({
  el: '#app'
});

<div id="app"></div>

var app = new Vue({
  el: document.getElementById('app')
});

生命周期

Vue 的生命周期类似 jQuery 的初始化调用:

//jQuery
$(document).ready(function(){
  //DOM 加载完毕后会执行这里的代码
});

Vue 常用的生命周期钩子与之类似,常用的有:

  1. created 实例创建完成后调用,此阶段完成数据探测,但尚未挂载
  2. mounted el 挂载到实例后使用,一般这个使用较多
  3. beforeDestroy 实例销毁前调用,主要用于解绑一些使用 addEventListener 监听的事件Event
    这些钩子与 el 和 data 类似都是可选选项写入 Vue 实例内,且钩子的 this 指向的是调用它的 Vue 实例

插值与表达式

Vue 使用双大括号(Mustache 语法){{}}实施文本插值。在 HTML 中声明位置,并在 Vue 的 data 中绑定其值,就可以在网页中将双向绑定的数据显示出来

  • 如果想单纯用于输出 HTML,可以在 HTML 的标签Tag中使用 v-html 渲染方法
  • 如果想显示{{}}标签而不进行替换,可以使用 v-pre 渲染方法
    {{}}中,除了可以绑定属性值外,还可以使用JavaScript 表达式进行简单的运算和三元运算等
    注意:vue.js 只支持单个的表达式,不支持语句和流控制。另外在表达式中不允许使用用户自定义的全局变量,而是只能用 Vue 白名单内的全局变量

过滤器

在{{}}插值的尾部添加一个管道Pipe符号 | 可以进行过滤,经常用于格式化文本。这个过滤器也可以进行串联和接收参数Parameter

指令和事件

指令(Directives)是 Vue 模板中最常用的一项功能,带有前缀 v-
指令的主要职责就是当其表达式的值改变时,相应地将某些行为应用到 DOM 上

v-if

v-if 类似 JavaScript 的 if 判断语句,在 HTML 中用 v-if 调用,并在 Vue 实例内声明表达式并赋值,就可以达到 if 语句的效果

<div id="app">
    <p v-if="show">Show text</p>
</div>

<script>
var app = new Vue({
    el: '#app',
    data: {
        show: true
    }
});
</script>

v-bind

v-bind 的基本用途是动态更新 HTML 元素上的属性,比如 id、class 等

v-on

v-on 用来绑定事件监听器
在使用 v-on 时,建议在 methods 里声明一个方法,而不是采用内联语句的形式
Vue 将 methods 的方法也代理了,所以也可以像访问 Vue 数据那样来调用方法

语法糖

v-bind 可以简化成 :
v-on 可以简化成 @

Last modification:September 12th, 2018 at 09:24 pm

Leave a Comment