var app=new Vue({
        //ID
        el:'#app',
        //属性 
        data: {
            msg: 'Vue修改',
            exam:19+1,
            message:'页面加载于'+new Date().toLocaleString()
        }
    });

<button v-on:click="sj">事件1</button>
  
var app=new Vue({
        el:'#app',
        data: {
            num:1
        },
        //方法
        methods: {
            sj:function(){
                this.num++;
                console.log(this);
            }
        }
    })

<button @click="cc(3,6)">传参数</button>

var app=new Vue({
        el:'#app',
        data: {
            num:1
        },
        //方法
        methods: {
            cc:function(a,b){
                this.num=a+b;
            }
        }
    })

<button @click="cc2(num,6)">传参数</button>

var app=new Vue({
        el:'#app',
        data: {
            num:1
        },
        //方法
        methods: {
           cc2:function(a,b){
                this.num=a+b;
                //传了值也有event
                console.log(event.target);
            }
        }
    })

<button @click="hello">A</button>
<button @click="hello">B</button>
<button @click="hello">C</button>

var app=new Vue({
        el:'#app',
        data: {
            num:1
        },
        //方法
        methods: {
                hello:function(event){
                //如果是hello没有括号的时候默认是有一个参数 event参数 
                //event.target得到事件源
                alert("我是"+event.target.innerHTML);
            }
        }
    })

<div @click="show('父')">
            父盒子
            <div @click.stop="show('子')">
                子盒子
            </div>
</div>

//不阻止的话就会输出 父 子
var app=new Vue({
        el:"#app",
        data: {
            num:0
        },
        methods: {
            show: function(info) {
                console.log(info);
            }        
        }
    });

 <!--只会触发一次 点了一次就没用了-->
<a v-on:click.once="doThis">ayd1</a>



var app=new Vue({
        el:"#app",
        data: {
            num:0
        },
        methods: {
            doThis:function(){
                alert("点击了！");
            }
        }
    });

h1>练习2</h1>
<a href="http://www.baidu.com" @click.prevent="lj">百度</a>



var app=new Vue({
        el:"#app",
        data: {
            num:0
        },
        methods: {
            lj:function(){
                //阻止默认行为
                //event.preventDefault();
                alert("点击了链接！");
            }
        }
    });

<h1>练习</h1>
<div @click="dj">
   <button>A</button>
   <button>B</button>
   <button>C</button>
</div>    

var app=new Vue({
        el:"#app",
        data: {
            num:0
        },
        methods: {
            dj:function(event) {
                console.log(event.target.innerHTML);
            }
        }
    });    

<form>
   Name:<input type="text" v-model="name" />
   Password:<input type="password" id="pa"  v-model="pass" @keyup.enter="login"/>
   <input type="button" value="登入">
</form>



    var app=new Vue({
        el:'#app',
        data: {
            name:"",
            pass:""
        },
        methods:{
            //双向绑定
            login:function(){
                console.log(this.name);
                console.log(this.pass);
                this.name='',
                this.pass=''
            }
        }
    });

<h1>按del</h1>
<form>
  Name:<input type="text" v-model="name" />
  Password:<input type="password" v-model="pass" @keyup.delete="de"/>
  <input type="button" value="登入">
</form>

var app=new Vue({
        el:'#app',
        data: {
            name:"",
            pass:""
        },
        methods:{   
            //按删除 就删除密码
            de:function(){
                this.pass=''
            }
        }
    });

<h1>自定义</h1>
<input type="text" @keyup.da="r"/>

    //自定义名字
    Vue.config.keyCodes.da=82;

    var app=new Vue({
        el:'#app',
        data: {
            name:"",
            pass:""
        },
        methods:{
            //自定义r键
            r:function(){
                console.log("按了R");
            }
        }
    });

<a v-bind:href="href">去百度2</a>
<a :href="href">去百度2</a>

var app=new Vue({
        el:"#app",
        data: {
            href:"http://www.baidu.com",
        }
    });

<img :src="arr[index]" width="500px" height="300px"><button @click="huan2()">换</button>

var app=new Vue({
        el:"#app",
        data: {
            href:"http://www.baidu.com",
            info:"今天送皮肤",
            imgurl:'img/11.webp',
            id:0,
            arr:['img/11.webp','img/12.webp','img/22.webp','img/3210.webp'],
            index:0,
            h1ar:''
        },
        methods:{
            huan2:function(){
                this.index++;
                if(this.index==this.arr.length){
                    this.index=0;
                }
            }
        }
    });

<h1>{{h1ar}}</h1>
<input type="text" :value="h1ar" @keyup="gb"/>

var app=new Vue({
        el:"#app",
        data: {
           
        },
        methods:{
            gb:function(){
                this.h1ar=event.target.value;
            }
        }
    });

<!-- 定义：atice是样式的名称：随便名字  
      随便名字可以在下面进行true(使用这个样式) || false(不使用这个样式)  -->
      <h1>对象语法绑定</h1>
      <div :class="{atice:isActive,err:iserr}">
          用对象
      </div>

var app = new Vue({
     el: "#app",
     data: {
       val: "",
       isActive:false,
       iserr: true
     }
   });

<!-- 定义[自定义名字1,自定义名字2] data里面 自定义名字1="样式表名" -->
      <h1>数组语法绑定</h1>
      <div :class="[c1,c2]">
          用数组
      </div>

var app = new Vue({
      el: "#app",
      data: {
        c1:'atice'
        c2:'err',
      }
    });

<h1>混合使用</h1>
      <div :class="[c3,{err:herr}]">
          混合使用
</div>

var app = new Vue({
      el: "#app",
      data: {
        c3:'atice',
        herr:true
      },
      methods: {
        nj: function () {
          this.val = event.target.value;
        },
        //切换样式表 
        dxhys:function () {
            this.isActive = !this.isActive;
            this.iserr=!this.iserr;
        },
        szhys:function(){
            this.c2='';
        }
      },
    });

<div id="app">
      <!--v-if 返回true false 控制标签的隐藏显示-->
      <div v-if="score>=90">优秀</div>
      <div v-else-if="score>=80">中等</div>
      <div v-else-if="score>=70">一般般</div>
      <div v-else>补课</div>

      <hr>
      <!--v-show 标签隐藏显示-->
      <div v-show="flag">目标</div>
    </div>
    
var app = new Vue({
      el: "#app",
      data: {
        score:76,
        flag:false
      },
      methods: {
        
      },
    });

var app = new Vue({
      el: "#app",
      data: {
        fruit: ["apple", "orange", "banana", "watermelon", "almond"],
      },
      methods: {},
    });
    

var app = new Vue({
      el: "#app",
      data: {
        mystud: [
          { id: 1, name: "st1", age: 18 },
          { id: 2, name: "st2", age: 20 },
          { id: 3, name: "st3", age: 19 },
        ]
      },
      methods: {},
    });
    

var app = new Vue({
      el: "#app",
      data: {
        mys:{
          id:101,name: "st101", age:90
        },
      },
      methods: {},
    });

var app = new Vue({
      el: "#app",
      data: {
        una:''
      },
      methods: {
        //登录方法 
        tj:function () {
          console.log("姓名："+this.una);
        }
      },
    });

var app = new Vue({
      el: "#app",
      data: {
        city:'请选择城市'
      },
      methods: {
        //登录方法 
        tj:function () {
          console.log("下拉框："+this.city);
        }
      },
    });

var app = new Vue({
      el: "#app",
      data: {
        sex:'男',
        ches:['打球'],
        city:'请选择城市',
        ms:''
      },
      methods: {
        //登录方法 
        tj:function () {
          console.log("性别："+this.sex);
        }
      },
    });

var app = new Vue({
      el: "#app",
      data: {
        ches:['打球']
      },
      methods: {
        //登录方法 
        tj:function () {
          console.log("复选框："+this.ches);
        }
      },
    });

var app = new Vue({
      el: "#app",
      data: {
        ms:''
      },
      methods: {
        //登录方法 
        tj:function () {
          console.log("描述："+this.ms);
        }
      },
    });

//自定义的指令 使用v-名字  focus是自定义名字
 Vue.directive("focus", {
   //el是绑定的元素
   inserted: function (el) {
     el.focus(); //js
   },
 });

  //带参数自定义指令
    Vue.directive("color", {
      //bindc是自定义 bindc.value.color 就是 
      //bindc的值下面的color属性 JSON对象
      bind: function (el, bindc) {
        el.style.backgroundColor = bindc.value.bgcolor;
        el.style.color = bindc.value.color;
      },
    });
    
var app = new Vue({
      el: "#app",
      data: {
        bgc: {
          color: "red",
          bgcolor: "pink",
        }
      },
      methods: {
        dl: function () {
          console.log("年龄：" + this.age + 10);
          console.log("地址：" + this.address);
          console.log("姓名：" + this.stname);
        },
      }
    });

//带参数自定义指令
    Vue.directive("colorg", {
      //bindc是自定义
      bind: function (el, bindcj) {
        el.style.backgroundColor = bindcj.value;
      },
    });
    
var app = new Vue({
      el: "#app",
      data: {
        bg2: "pink",
      },
      methods: {
        dl: function () {
          console.log("年龄：" + this.age + 10);
          console.log("地址：" + this.address);
          console.log("姓名：" + this.stname);
        },
      }
    });

var app = new Vue({
      el: "#app",
      data: {
        co:{
          color:'pink',
          color2:'red'
        }
      },
      methods: {
        
      },
      //局部 v-focuc  focuc是自定义
      directives: {
        //获取焦点
        focuc: {
          // 指令的定义 不带参数
          inserted: function (el) {
            el.focus();
          },
        },
        //带参数
        col:{
          bind: function (el,bindc){
            el.style.color=bindc.value.color
          }
        }
      },
    });
    

var app = new Vue({
      el: "#app",
      data: {
        msg: '你好',
        nr:''
      },
      methods: {
        msg3:function(){
          console.log('方法...')
          return this.nr.substring(0,1).toUpperCase()+this.nr.substring(1).toLowerCase();
        }
      },
      //计算属性
      computed:{
        //计算属性 反转
        msg2: function(){
         return this.msg.split('').reverse().join('');
        },
        //首字母大小 后面小写
        zhuan:function(){
          console.log("计算中...")
          return this.nr.substring(0,1).toUpperCase()+this.nr.substring(1).toLowerCase();
        }
      }
    });

计算属性和方法的区别：
计算属性有缓存 调用多次只执行一次
方法调用多次就执行多次
侦听器有缓存 computed生成一个新的数据，直接渲染至视图中，watch是修改本身已经存在的数据

var app=new Vue({
        el:"#app",
        data: {
            firstname: "bill",
            lastname: "盖字",
        },
        //监听某个变量 改变后显示
        watch: {
            //val就是改后的
            firstname:function(val){
                this.fullname=val+this.lastname;
            },
            lastname:function(val){
                this.fullname=this.firstname+val;
            }
        },
        computed:{
            fullname:function(){
                return this.firstname+this.lastname;
            }
        }
    });

//全局过滤器 upper是自定义的过滤器的名字   使用插值{{原变量 | 过滤器的名字}} 属性的话就不要{{}} 
    Vue.filter('upper',function(val){
        //首字母大写 其他的小写 val就是原来变量
        return val.substring(0,1).toUpperCase()+val.substring(1).toLowerCase();
    })

//过滤器带参数
    Vue.filter('formattime', function(val,cf){
        //val=newtime
        if(cf=='yyyy-MM-dd HH:mm:ss'){
            let y=val.getFullYear();
            let m=val.getMonth()+1;
            let d=val.getDate();
            let s=val.getHours();
            let f=val.getMinutes();
            let miao=val.getSeconds();
            return `${y}-${m}-${d} ${s}:${f}:${miao}`;
        }
    })
    var app=new Vue({
        el:'#app',
        data: {
            newtime:new Date(),
        },
        watch:{
            
        },
        methods:{
            
        }
    });

1、data是一个函数
2、组件模板必须是根元素
3、组件的模板内容可以是模板字符串

如果是使用驼峰命名法的组件 在根组件里面无法使用 多个单词只能用- 横杠
驼峰命名法的组件只能在template模板中使用 使用时直接名字
如果组件的名字 有多个单词的时候 如：HelloWord 那么界面组件就是 Hello-Word

//组件的注册 button-unter：组件的名字  
   Vue.component('button-unter',{
       data(){
           return {
               count:0
           }
       },
       //template:'<button @click="count++">计数 {{ count }} </button>'
       template:'<button @click="click">计数 {{ count }} </button>',
       methods:{
           click(){
               this.count++;
           }
       }
   })

var helloword={
       data(){
           return {
               name:'张三'
           }
       },
       template:`<h3>我是{{name}}</h3>`
   }

    var app=new Vue({
        el:'#app',
        data:{

        },
        //可以多个
        components:{
            "hello-word":helloword
        }
    })

如果使有样式的话可以直接赋值
或者照下面赋值

示例1

定义样式
.cf{
   border-bottom: 1px solid red;
}
原来赋值 ：class={cf:iscf} //iscf实际上是最大的父元素赋值的true || false
组件赋值：:class="{cf:items.pbool}" //items.pbool是父元素的赋值 同样为 true|| false

//博客组件
    Vue.component('blog2-post',{
        data(){
            return {
                postFontSize:16
            }
        },
        //bolis就是组件上的属性 
        props:['bolis'],
        template:`<div>
            <div v-for="items in bolis" :class="{cf:items.pbool}">
                <h3>标题：{{items.title}}</h3>
            <p :style="{ fontSize: postFontSize + 'px' }">内容：{{items.context}}</p>
            <p>内容图片：
                <img v-for="ite in items.blogimg" :src="ite" width="300px" height="200px" />
            </p>
            <p>博龄：{{items.age+10}}</p>
            <p>鸣谢：
                <ul >
                   <li v-for="it in items.help">{{it}}</li>
                </ul>
            </p>
            <p>作者信息：
                <ul>
                   <li>姓名：{{items.authinfo.name}}</li>
                   <li>创建时间：{{items.authinfo.crtime}}</li>
                </ul>
            </p>
            <button @click="postFontSize+=10">放大字体</button>
            </div>
            </div>`
    })

    var app=new Vue({
        el:'#app',
        data:{
            title:[
                {
                    title:"博客1",
                    context:"博客1内容",
                    age:19,
                    pbool:true,
                    help:["auth1","auth9","auth2","auth5"],
                    authinfo:{name:"auth2",crtime:'2021-10-11'},
                    blogimg:['img/11.webp','img/12.webp']
                },
                {
                    title:"博客2",
                    context:"博客2内容",
                    age:10, 
                    pbool:true,
                    help:["auth1","auth9","auth2","auth5"],
                    authinfo:{name:"auth1",crtime:'2021-10-11'},
                    blogimg:['img/11.webp']
                },
                {
                    title:"博客3",
                    context:"博客3内容",
                    age:15,
                    pbool:true,
                    help:["auth1","auth9","auth2","auth5"],
                    authinfo:{name:"auth3",crtime:'2021-10-11'},
                    blogimg:['img/11.webp','img/12.webp','img/22.webp']
                },
                {
                    title:"博客4",
                    context:"博客3内容",
                    age:20,
                    pbool:true,
                    help:["auth1","auth9","auth2","auth5"],
                    authinfo:{name:"auth4",crtime:'2021-10-11'},
                    blogimg:['img/11.webp','img/12.webp','img/22.webp','img/3210.webp']
                }
              ]
        }
    })

子组件调用事件通知父组件
1、子组件模板绑定事件$emit('.....')
2、子元素标签绑定对应的事件,事件名与$emit括号内的名称一样
3、最后在vue对象中添加方法执行对应的操作
 
子组件传值
this.$emit('bigtext',10)
父组件接收子组件的值
handler(num){
   this.fons+=10;
   console.log("调用！"+num);
}

//菜单组件 子组件
    Vue.component('menu-item',{
        data(){
            return {

            }
        },
        //单向数据流
        props:['he'],
        template:`
        <div >
        <ul>
            <li v-for="item in he">{{item}}</li>
        </ul>
        <button @click="test">改变</button>
        </div>
        `,
        // <button @click="$emit('bigtext')">改变</button>
        methods:{
            //按钮点击方法 
            test(){
                // this.he[0]="JK";
                //调用方法
                this.$emit('bigtext');
                //传值
                this.$emit('bigtext',10)
            }
        }
    })
    var app=new Vue({
        el:"#app",
        data: {
            help:["auth1","auth9","auth2","auth5"],
            pmsg:'父组件',
            fons:16
        },
        methods:{
            handler(num){
                this.fons+=10;
                console.log("调用！"+num);
            }
        }
    });

兄弟之间传值 
创建中央处路由 var hub=new Vue();
通知相对的组件jerry-event:是兄弟的挂载完成的name  hub.$emit("jerry-event",2)
自己挂载完成后监听自己的
mounted(){
  hub.$on("tom-event",(value)=>{
  this.num+=value;
  })
}

//事件中心 帮助传值 中央路由
    var hub=new Vue();

    //tom组件
    Vue.component("tom-com",{
        data(){
            return {
                num:0
            }
        },
        template:`
        <div>
            <h3>tom={{num}}</h3>
            <button type="button" @click="changjerr">改Jerry</button>
        </div>
        `,
        methods: {
            changjerr(){
                //jerry的挂载监听的name  2:需要传的值 
                hub.$emit("jerry-event",2)
            }
        },
        //挂载完成 都监听自己的
        mounted(){
            //tom-event名字自定义
            hub.$on("tom-event",(value)=>{
                this.num+=value;
            })
        }
    })

    //jerry
    Vue.component("jerry-com",{
        data(){
            return {
                num:0
            }
        },
        template:`
        <div>
            <h3>jerry={{num}}</h3>
            <button type="button" @click="changtom">改Tom</button>
        </div>
        `,
        methods: {
            changtom(){
                hub.$emit("tom-event",3)
            }
        },
        mounted(){
            hub.$on("jerry-event",(value)=>{
                this.num+=value;
            })
        }
    })

    var app=new Vue({
        el:'#app',
        data: {

        }
    });

Vue.component('alter-box',{
        data(){
            return {

            }
        },
        template:`<div id="d1">
            <h1>错误消息</h1>
            <slot >默认消息</slot>
            </div>`,
    })
    var app=new Vue({
        el:"#app",
        data:{

        }
    });

Vue.component("base-layout",{
        data(){
            return {

            }
        },
        //name自定义名字 
        template:`<div>
            <header>
                <slot name="header"></slot>
            </header>
            <main>
                <slot name="main"></slot>
            </main>
            <footer>
                <slot name="footer"></slot>
            </footer>
        </div>`,

    })

    var app=new Vue({
        el:'#app',
        data:{

        }
    });

<script>
    /**
     * 作用域插槽实际上就是 子组件变量传父组件
     * 传值：v-slot="自定义名字"  {{自定义名字.slot传的属性name.属性}}
     */
    //作用域插槽：子传父
    Vue.component("son-com",{
        data(){
            return {
                heros:{
                    name:"李白",
                    nickname:"剑仙"
                }
            }
        },
        template:`<div>
        <h1>作用域插槽</h1>
        <slot :user="heros"></slot>
        </div>`,
    })
    var app=new Vue({
        el:"#app",
        data: {
        }
    });
</script>

<script>
    Vue.component("my-list",{
        data(){
            return {
            }
        },
        props:['title', 'items'],
        template:`<div class="my-list">
        <div class="title">{{title}}</div>
        <div class="list">
          <div class="list-item" v-for="item in items">
            <slot :item="item"></slot>
          </div>
        </div>
        </div>`,
    })
    var app=new Vue({
        el:"#app",
        data: {
            shapes:[
                {name:'正方形',sides:4},
                {name:'三角形',sides:3},
                {name:'六边形',sides:6}
            ],
            color:[
                {name:'黄色',hex:'#FD403F'},
                {name:'绿色',hex:'#229954'},
                {name:'粉色',hex:'#9B59B6'}
            ],
            heros:[
                {name:'temo',img:'11.webp',sex:'男'},
                {name:'德玛',img:'12.webp',sex:'男'},
                {name:'女警',img:'22.webp',sex:'女'}
            ]
        }
    });
</script>

npm i vue-router@3.0.2 然后拷贝js