Vue指令

  • vue-on
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转字符串</button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
  • 缩写

v-bind 缩写

1
2
3
4
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

1
2
3
4
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
即当前此表签的父标签的点击事件不跟随。

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

监听属性

可以通过watch来响应数据的变化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id = "app">
  <p style = "font-size:25px;">计数器: {{ counter }}</p>
  <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>

var vm = new Vue({
  el: '#app',
  data: {
      counter: 1
  }
});
vm.$watch('counter', function(nval, oval) {
  alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});

组件

  • 全局组件
1
2
3
4
5
6
7
8
9
10
11
12
13
runoob为组件名，options为配置选项。注册后，我们可以使用标签<runoob>
<div id="app">
  <runoob></runoob>
</div>

// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
  • 局部组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
可以在实例选项中注册局部组件，这样组件只能在这个实例中使用。
<div id="app">
  <runoob></runoob>
</div>

var Child = {
  template: '<h1>自定义组件!</h1>'
}

// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})

自定义指令

  • v-focus

注册一个全局指令v-focus,该指令的功能是在页面加载时，元素获得焦点。

1
2
3
4
5
6
7
8
9
10
11
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 创建根实例
new Vue({
  el: '#app'
})

可以在实例使用directives选项来注册局部指令，这样指令只能在这个实例中使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})

钩子

  • 钩子函数
1
2
3
4
5
bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
update:被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind:只调用一次，指令与元素解绑时调用。
  • 钩子函数参数
1
2
3
4
5
6
7
8
9
10
el:指令所绑定的元素，可以用来直接操作DOM。
binding:一个对象，包含以下属性：
  name:指令名，不包括v-前缀。
  value:指令的绑定值，例如：v-my-directive="1 + 1", value的值是2。
  oldValue:指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。
  expression:绑定值的表达式或变量名。例如v-my-directive="1 + 1"，expression的值是"1 + 1"。
  arg:传给指令的参数。例如v-my-directive:foo，arg 的值是"foo"。
  modifiers:一个包含修饰符的对象。例如：v-my-directive.foo.bar,修饰符对象modifiers的值是{foo:true, bar:true}。
vnode:Vue编译生成的虚拟节点。
oldVnode:上一个虚拟节点，仅在update和componentUpdated钩子中可用。
1
2
3
4
5
6
7
8
9
10
11
12
Vue.directive('runoob', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

Vue.js Ajax

  • axios
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
get方法,可以简单的读取JSON数据。
<div v-for="site in info">
  {{ site.name }}
</div>

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted(){
    axios
      .get('https://www.runoob.com/try/ajax/json_demo.json')
      .then(response => (this.info = response.data.sites))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})

post方法与get方法相似。
  mounted(){
    axios
    .post('https://www.runoob.com/try/ajax/demo_axios_post.php')
    .then(response => (this.info = response))
    .catch(function (error) { // 请求失败处理
      console.log(error);
    });
}
  • vue-resource
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
get请求
window.onload = function(){
  var vm = new Vue({
    el:'#box',
    data:{
        msg:'Hello World!',
    },
    methods:{
      get:function(){
        //发送get请求
        this.$http.get('/try/ajax/ajax_info.txt').then(function(res){
            document.write(res.body);
        },function(){
            console.log('请求失败处理');
        });
      }
    }
  });
}

post请求
methods:{
  post:function(){
    //发送 post 请求
    this.$http.post('/try/ajax/demo_test_post.php',{name:"菜鸟教程",url:"http://www.runoob.com"},{emulateJSON:true}).then(function(res){
          document.write(res.body);
      },function(res){
          console.log(res.status);
    });
  }
}