整理vue-1.0之旅

vue, 老早就想总结一下了, 这个可不是那个vue视频编辑器, 而是一出生就在前端界刮起一阵强风的js框架, 被广泛用于前后端项目中, 火, 是有一定道理的, 废话少说, 用用就知道了, 快来看正文

VUE 1.0 官网文档戳这里

准备

  • 下载js包, cdn下载地址
  • 在页面body最后引入vue文件, 更多其他诸如npm bower的安装方式戳官方安装
    1
    <script src="/statics/js/vue.min.js"></script>

使用总结

  • 定义作用域

1
2
3
<div id="app">
  {{ message }}  <!--在页面中渲染出来的结果是 Hello Vue.js! -->
</div>
1
2
3
4
5
6
new Vue({
  el: '#app', //支持选择器包括id, class, 标签(最好是唯一的, 比如body)
  data: {
    message: 'Hello Vue.js!'
  }
})

  • 数据绑定

属性绑定:

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

<button v-bind:disabled="someDynamicCondition">Button</button> <!-- 完整语法 -->
<button :disabled="someDynamicCondition">Button</button> <!-- 缩写 -->

class与style绑定:

1
2
3
4
5
6
7
8
9
<!--class绑定-->
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div> <!--hash法-->
<div v-bind:class="[classA, isB ? classB : '']"> <!--数组法-->
<div v-bind:class="[classA, { classB: isB, classC: isC }]"> <!--在 1.0.19+ 中，可以在数组语法中使用对象语法--->

<!--style绑定-->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>
<div v-bind:style="[styleObjectA, styleObjectB]">

1
2
3
4
5
6
7
8
9
10
data: {
  isA : false,
  isB : true,
  activeColor: 'red',
  fontSize: 30,
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

事件绑定:

1
2
3
4
5
6
7
8
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<!--传参数-->
<button v-on:click="sayHi('hi')">Say Hi</button>
<!--传原生事件-->
<button v-on:click="sayHello('hello!', $event)">Submit</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var vm = new Vue({
  // ...
  // 在 `methods` 对象中定义方法
  methods: {
    doSomething: function (event) {
      // 方法内 `this` 指向 vm
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      alert(event.target.tagName)
    },
    sayHi: function(str){
        alert(str);
    },
    sayHello: function(msg, event){
       event.preventDefault()
    }
  }
})

按键修饰符:

1
2
3
4
5
6
7
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 别名 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
<!--全部的按键别名：enter tab delete esc space up down left right-->

1.0.17+： 可以自定义按键别名：

1
2
// 可以使用 @keyup.f1
Vue.directive('on').keyCodes.f1 = 112

  • 数据监听

watch:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var vm = new Vue({
  // ...
  data: {
    currentTab: '#tab1'
  },
  watch: {
    // 监听header nav tab变化, 请求相应的数据
    currentTab: function (val, oldVal) {
      if(val == '#tab1'){
        //获取活动列表balabala...
        //mainPage.getActivityLists();
      }
      if(val == '#tab2'){
        //获取报名审核列表balabala...
        //mainPage.getSignCheckLists();
      }
    }
  }
})

  • 优化数据没加载出来时, 出现vue的大括号的情况

    解决方法是在有vue数据渲染的块上 添加v-cloak, 如:
1
2
3
4
5
<ul id="example-1">
  <li v-for="item in items" v-cloak>
    {{ item.message }}
  </li>
</ul>

并设置css隐藏, vue会自动在块内数据运算完后再显示出来

1
2
3
[v-cloak]{
    display: none;
}

blog
vue