第一天

1、选项数据
data、computed、method如何使用
data:一个函数，定义了很多变量（数据），这些变量服务于整个组件，如定义msg:'helloworld’和a:1;
computed :一个对象，包含各种函数（用来操作变量）
methods:一个对象，包含各种函数（与事件相关）

<template>
  <div>
    <div>选项数据</div>
    <div>data:{{msg}}</div>
    <div>computed:{{aDouble}}</div>
    <div @click="say('hi')">点击我</div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        msg:'helloworld',
        a:1
      }
    },
    computed:{
      aDouble(){
        return this.a*2;
      }
    },
    methods:{
      say(h){
        alert(h);
      }
    },
  }
</script>

2.模板语法
一个vue文件包括如下内容

• data
• 模板可以直接嵌入js代码
• 指令 v-html、v-on、v-bind
• 计算属性
• 过滤器

<template>
  <div>
    <div>模板语法</div>
    <div>data:{{msg}}</div>
    <div>{{number+1}}</div>
    <div v-html="rawHtml"></div>
    <div v-bind:class="color">zzzz</div>
    <div v-on:click="say('hi')">点击我</div>
    <div @click="change">修改颜色</div>
    <div>{{message|capitalize}}</div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        msg:'helloworld',
        number:1,
        rawHtml:'<span>123</span>',
        color:'red active',
        message:'message'
      }
    },
    methonds:{
      change(){
        this.color='yellow';
      },
      say(h){
        alert(h);
      }
    }
  }
</script>

3.条件渲染
v-if指令，用法：
vi-if 、v-else
vi-if、 v-else-if 、v-else

<template>
  <div>
    <div>条件渲染</div>
    <div>--------------</div>
    <div v-if="type==='A'">A</div>
    <div v-else-if="type==='B'">B</div>
    <div v-else-if="type==='C'">C</div>
    <div v-else>Not A/B/C</div>
    <div v-show="isShow">123</div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        type:'A',
        isShow:true
      }
    }
  }
</script>

4.列表渲染
v-for指令，用法

• 用法1：v-for=“item in items”数组
• 用法2：v-for="(item,index) in items "数组
• 用法3：v-for="(value,key) in object"对象

Notes:items 是源数据数组并且 item 是数组元素迭代的别名

<template>
  <div>
    <div>列表渲染</div>
    <ul id="example-1">
      <li v-for="item in items">{{item.message}}</li>
    </ul> 
    <ul id="example-2">
      <li v-for="(item,index) in arr">
        {{index}}---{{item}}
      </li>
    </ul>
    <ul id="example-3">
      <li v-for="(value,key) in obj">{{key}}:{{value}}</li>
    </ul>
  </div>
</template>

<script>
  export default{
    data (){
      return{
        items:[
          {message:'Foo'},
          {message:'Bar'},
          {message:'duck'}
        ],
        arr:['foo','bar','duck'],
        obj:{
          firstName:'X',
          lastName:'page',
          age:30,
          ae:18,
        }
      }
    }
  }
</script>

5.事件处理器

• v-on指令
• 缩写@
• 原始写法 v-on:click 缩写@click

<template>
  <div>
    <div>事件处理器</div>
    <div id="example-1">
      <button v-on:click="counter=counter+1;counter=counter-2">减少1</button>
      <p>这个按钮被点击了{{counter}}次</p>
    </div>
    <div id="example-2">
      <button @click="greet">增加1</button>
    </div>
    <div>--------------</div>
    <div id="example-3">
      <button @click="say('hi')">say</button>
    </div>
    <div id="example-4" @click="doThis2">
      <button @click="doThis">dothis</button>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        counter:0
      }
    },
    methods:{
      greet(){
        this.counter=this.counter+1
      },
      say(h){
        alert(h)
      },
      doThis(){
        alert('doThis')
      },
      doThis2(){
        alert('doThis2')
      }
    }
  }
</script>
<style>
</style>

6.表单控件绑定

• v-model指令在表单控件元素上创建双向数据绑定
• 复选框
• 多个勾选框
• 选择列表

<template>
  <div>
    <div>表单控件绑定</div>
    <div>------------</div>
    <input v-model="message">
    <p>Message is :{{message}}</p>
    <div>-----------------------</div>
    <input type="checkbox" value="Jack" v-model="checkdNames"  />
    <label for="jack">jack</label>
    <input type="checkbox" value="Andy" v-model="checkdNames"  />
    <label for="jack">Andy</label>
    <input type="checkbox" value="Boys" v-model="checkdNames"  />
    <label for="jack">Boys</label>
    <br>
    <span>Checked names:{{checkdNames}}</span>
    <div>-----------------------</div>
    <div>
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected:{{selected}}</span>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        message:'helloworld',
        checkdNames:[],
        selected:''
      }
    },
    mounted() {
      alert(this.$route.params.userId)
    }
  }
</script>

<style>
</style>