1、Vue安装。 2、Vue 基本语法（数据绑定、事件、if、循环）

Vue 基本语法

<template>
 <!-- 1、 .vue 后缀的文件，按照vue写法
 vue 文件里面有三个标签 
第一个是 template   写 html 代码
第二个是 script           写js代码
第三个是 style                写css代码--> 
  <!-- <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav> -->
  <!-- <router-view/> -->
  <!-- <div style="color:red;">我是小狗</div>
    <div style="color:green;">我是{{lh}}</div>
     <div style="color:green;">我是{{num}}</div>
      <div style="color:green;">我是{{float}}</div>
            <div style="color:green;">{{float +num}}</div>
            <div>{{fun()}}</div>
                    <!-- v-on 绑定事件监听   点击确定按钮触发方法 -->
            <!-- <div v-on:click="fun">确定按钮</div> -->
           <!-- 双向绑定     默认 type  为text-->
            <!-- <input  v-model="lh" type="text">
                        <input  v-model="lh" type="text"> -->
                        <!-- 取消双向绑定 -->
                      <!-- <input  v-once="lh" type="text">
                <div><input  v-once="lh" type="text"></div> -->
<hr>
<!-- <div>{{html}}</div> -->
<br>
<!-- <div v-text="html"></div>
<br>
<div v-html="html"></div> -->
<br>
<!-- <div >{{html}}</div> -->
<!-- <hr> --> 
<!-- 动态绑定属性 -->
<!-- 此处是静态的 -->
<!-- <div style="" class=""> 小猪</div> -->
<!-- <a href="" class="index" ref="xiaozhu"  >xiaozhu</a> -->
<hr>
<!-- 标签属性变为动态  v-bind  -->
<!-- <a v-bind:class="class" href="">小牛</a> -->
<br>
<!-- <a v-bind:class="class2" href="">小龙</a> -->
<br>
<!-- <input type="text" v-model="class2" > -->
<br>
<!-- 语法糖   v-bind (:)         v-on (@)    -->
<!-- <a v-bind:class="class2" :href="url">小猫</a> -->
<br>
<!-- <input v-model="url"> -->
<!-- <hr> -->
<!-- <button @click="show= !show">点击事件</button>
<button @click="show++ ">点击事件</button> -->
<!-- <div>{{show}}</div> -->
<!-- <hr> -->
<!-- <button @click="fun2()">点击事件</button> -->
</template>
<script>
// export default {
//   data() {
//     return {
       // 此处是 双引号注意
      // lh : "小狗",
      // num:20,
      // float:30.2,
      // html : '<span style = "color:gold">我是span标签，没有改变样式</span>',
      // 此处是 单引号注意
    //  class: 'index',
    //     class2: 'index index-two',
    //     url:'http:///www.baidu.com',
    //    show:  true,
    //    show2:1
  //  }
  // },
  // methods 配置项  json格式
//   methods: {
//     // 配置项的方法
//   //   fun(){
//   // console.log(123);
//   //   },
//     // fun2(num){
//     //   //  console.log(456);
//     //       this.show2 = this.show2 +this.num;
//     //    console.log(this.show2);
//       //  this.fun3();
//     // },
//     // fun3(){
//     //   console.log("这是方法三");
//     // }
//   },
// }
// </script>
<style lang="scss">
div{
  background: #42b983;
}
.index{
    background: red;
}
.index-two{
font-size: 50px;
background: goldenrod;
}
</style>

v-for v-if .self .stop .prevent

<template>
  <div>123</div>
     <div @click.self="fun()">
      熊爷爷
               <!-- .self  只有自身触发 -->
      <div @click.self="fun2()">
        熊爸爸
        <div @click="fun3()">
          熊孩子
        </div>
      </div>
    </div>
<hr>
        <div @click="fun()">
      熊爷爷2
      <div @click="fun2()">
        熊爸爸2
        <div @click="fun3()">
          熊孩子2
        </div>
      </div>
    </div>
    <hr>
      <div @click="fun()">
      熊爷爷3
      <div @click="fun2()">
        熊爸爸3
          <!-- .stop防止冒泡 -->
        <div @click.stop="fun3()">
          熊孩子3
        </div>
      </div>
    </div>
    <hr>
                                                            <!-- 阻止默认事件，比如 a 标签的跳转 -->
    <a href="http://www.baidu.com" @click.prevent="fun2()">跳转</a>
    <hr>
    <div v-if="show">小猫</div>
    <div v-if="!show">小狗</div>
<hr>
<!-- 显示的方式 是跟 v-if 一样的 -->
  <!-- v-if 值为假的时候，在html中显示的是 \<\!--v-if--\>  有占位符-->
 <!-- v-show 是给html标签增加一个 style样式，让它隐藏 display: none; -->
<div v-show="show">小牛</div>
<div v-show="!show">小马</div>
<hr>
<div>
  <div>{{arr}}</div>
        <li>{{arr}}</li>
             <!-- vue 的循环是循环的值，放前面 -->
      <!-- in 就相当于 php中的as -->
      <!-- 数组在后面，循环的值在前面 -->
      <!-- v 是 循环的值， k是下标( 数组是0，对象是 自定义)， index 是对象的 0开头的下标 -->
                  <li v-for="(value,key,index) in arr1">{{value}}--{{key}}--{{index}}</li>
    </div>
    <hr>
</template>
<script>
export default {
  data(){
    return {
      ouyangke : "欧阳克",
      num : 20,
      float : 30.2,
      html : '<span style="color:gold">span标签</span>',
      class : 'index index-two',
      url : 'http://www.php.cn',
      show : true,
      arr: [
   "欧阳克",
 "朱天蓬",
"灭绝师太"
     ],
        arr1: {
        ouyangke : "欧阳克",
        zhutianpeng : "朱天蓬",
        miejueshitai : "灭绝师太"
      }
    }
  },
  // methods 配置项，json格式
  methods : {
    // 配置项里的方法
    fun(){
      // 怎么样在methods里的js里，找到data的数据
      // 使用this来指向
      // this.show = this.show + num;
      // console.log(this.show);
      // this.fun2();
      console.log('这是方法1');
    },
    fun2(){
      console.log('这是方法2');
    },
    fun3(){
      console.log('这是方法3');
    }
  }
}
</script>
<style>
div{
  background-color: green;
  font-size: 25px;
}
.index{
  color:aqua;
  background-color: blueviolet;
}
.index-two{
  font-size: 30px;
}
</style>