前端(Vue基础语法)

数据绑定

数据绑定就是指将js中的变量自动更新到html中。如下代码, message的默认值是“Hello Vue.js!”, 那么当页面启动时，html中的默认值会被设置成“Hello Vue.js”

  
{{message}}
  

new Vue({
  el: '#demo',
  data: {
    message: 'Hello Vue.js!'
  }
})

如果要输出原生的html，可以使用三个大括号来实现

{{{messageHtml}}}

也可以做表达式的绑定

{{length - 1}}
{{isShow ? 'block' : 'none'}}

指令

指令是特殊的带有前缀 v- 的特性。当表达式的值发生变化时，响应应用特定的行为到DOM。

hello

指令可以进行缩写

html模板

Vue.js支持对js对象进行判断(if), 循环(for)输出。类似于前端模板。

Yes
No


Hello!




  

    {{ $index }} : {{ item.message }}
  

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      {_uid: '1', message: 'Foo' },
      {_uid: '2',  message: 'Bar' }
    ]
  }
})

事件绑定

可以使用 v-on 指令来监听DOM事件。

  Say Hi
  Say What

new Vue({
  el: '#example-2',
  methods: {
    say: function (msg, event) {
      alert(msg);
      event.preventDefault();
    }
  }
})

常见的阻止冒泡，禁止默认行为等event方法可以通过修饰符来快速处理。

对特殊按键生效也可以使用修饰符