vue2.0-start02

发表于 | 阅读次数:
字数统计: 749 | 阅读时长 ≈ 3

列表渲染 v-for

事件处理器（指令，绑定事件） v-on

事件修饰符

.stop(冒泡)
.prevent(默认事件)
.capture(捕获)
.self
.once(执行一次)

条件渲染 v-show

动态绑定 v-bind:class**

除了内置的指令外 还可以自己设置指令

注册全局指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
    <div class="app">
      <div v-color="colorStatus">我是一个普通的div元素</div>
    </div>
  <script src="./node_modules/vue/dist/vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function () {
        Vue.directive('color',function (el,binding) {//指令名称注意不要加**v-**
            console.log(el);//当前绑定自定义指令的元素，可以用来直接操作DOM
            console.log(binding);//一些参数，常用的  => binding.value（指令的值） 
            el.style.backgroundColor = 'lawngreen';
        })
      var vm = new Vue({
          el: '.app',
          data: {
              colorStatus: true
          }
      });
    },false);
  </script>
</body>

当前组件下可用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
      <div class="app">
        <div v-color="colorStatus">我是一个普通的div元素</div>
      </div>
    <script src="./node_modules/vue/dist/vue.js" charset="utf-8"></script>
    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded',function () {
        var vm = new Vue({
            el: '.app',
            data: {
                colorStatus: true
            },
            directives:{
                'color':function (el,binding) {
                    el.style.backgroundColor = 'lawngreen';
                }
            }
        });
      },false);
    </script>
  </body>

计算数据（属性）

为什么需要计算属性

模版式未来描述视图的结构，在模版中放入太多逻辑，导致模版过重难以维护

在计算一个计算属性的时候，更新依赖列表并且缓存结果，只有当其中一个依赖发生了变化，缓存的结果才无效

组件化开发

组件其实是页面组成的一部分

使用组件的好处： 提升效率 方便重复使用 简化调试步骤 提升整个项目的可维护性 便于协同开发

组件的特性：

高内聚性、低耦合性

全局注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <div class="app">
        <my-component></my-component>
    </div>
<script src="vue.js"></script>
<script>
    //全局注册
    Vue.component('myComponent',{//html中是横杠的，在js中就是驼峰
        template: `<h2>我是全局组件</h2>`
    })
    var vm = new Vue({
        el: '.app'
    });
</script>
</body>

局部注册

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<body>
    <div class="app">
        <my-component></my-component>
        <common></common>
    </div>
<script src="vue.js"></script>
<script>
    var Child = {
        template:`<h3>我是局部组件</h3>`
    };
    var common = {
        template: `<p>第二个局部组件</p>`
    }
    var vm = new Vue({
        el: '.app',
        components: {
            // <my-component> 将只在父模板可用
            myComponent: Child,
            common //如果组件定义的名字和在html显示的标签名一致就可以省略
        }
    });
</script>
</body>