vue2.0-vue-cli搭建项目学习 onclick事件绑定 v-if v-show v-for 的用法

vue-cli搭建项目参考地址https://cn.vuejs.org/v2/guide/installation.html

先安装node.js  

在安装vue.js.

安装完成 安装全局vue-cli

 npm install --global vue-cli    

下一步搭建项目 vue init webpack vue-projeck。

下一步安装运行依赖 npm install。

<template>
  <div>
   <div v-on:click="click">咯山洞里；这里是大幅高开；</div> <!--给v-on绑定click事件声明一个方法-->

   <div @click="chenges(index)" v-for="list in list">{{list.message}}-{{list.name}}</div> <!--  &lt;!&ndash;v-for  的使用和click简写方法-->

    <div v-if="strIf"></div><!-- v-if和v-show的写法和区别-->

<div v-show="strShow">客户经理放进锅里加啦</div><!--v-if可以说是显示时创建元素false时删除元素而v-show是设置display属性控制显示隐藏 -->
</div>
</template>

<script>
  export default {
    data () {

      return {
        strIf:false,
        strShow:false,
        msg: 'Welcome to Your Vue.js App',
        list: [
          { message: 'Foo',
            name:"zxhanmg",
            age:59
          },
          {  message: 'Foo',
            name:"zxhanmg",
            age:59
          }
        ],
      }
    },
    methods:{
      click () {
        alert(1)
      },
      chenges (index){
       if(index==0){
         alert("你好")
       }else{
         alert("one")
       }
      }
    }
  }
</script>