学习vue.js

学习vue.js

1、vue文件由<template></template><script></script><style></style>三部分组成

2、vue组件的重要选项

export default {
  data : {
    name: 'RSA加密',
    options: [{
      value: 'kaifa',
      label: '开发'
    }, {
      value: 'uat',
      label: '测试'
    }],
    value: ''
  },
  components: {
    HeaderList,//注意如果是驼峰，标签调用组件时，将会被转成小写-,例：header-list
    Side
  }
  //使用methods还是computed ，取决于是否需要缓存
  methods:{//方法
    doThis(){
      console.log(this.name)
    }
  },
  computed :{//计算
  },
  watch : {//监听
      name:function(val) {
          this.name = val;
      }
  }
}

3、vue模板指令

数据渲染v-text/v-html/{{}}
<p>{{name}}</p>
<p v-text="name"></p>
<p v-html="name"></p>
控制模块隐藏v-show/v-if
<p v-show="name"></p>  //代码里可以看到
<p v-if="name"></p>
选择：v-show只是简单的css切换，无论条件都会被编译，适合频繁切换条件，v-if适合条件不经常改变的场景
渲染循环列表v-for
<ul>
  <li v-for='option in options'>
    <p>option.lable</p>
  </li>
</ul>
事件绑定v-on
<button v-on:click="doThis"></button>
v-on的简写方式
<button @click="doThis"></button>
属性绑定v-bind
<div :class="{red:isRed}"></div>//当值为对象时，第一个参数是类的名
<div :class="[classA,classB]"></div>//当值为数组时，都为data的值，有两个class

4、vue组件之间的通信-props

4.1 子组件向父组件传参

4.2 父组件向子组件传参

v-on:click-tell-me //父组件接收
$emit//子组件传参