绑定事件指令 v-on

<div id="app">
    {{num}}
    <button v-on:click="num++">点击一</button>
    <button @click="num++">点击二</button>
    <button @click="countSum()">点击三</button>
    <button @click="countSum">点击四</button>
    <button @click="say('今天天气好冷')">点击五</button>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{
            countSum(){
                this.num = this.num + 1
            },
            say(msg){
                console.log(msg);
            }
        }
    })
</script>

计算属性

<div id="app">
    {{new Date(birthday).getFullYear() +"年"+new Date(birthday).getMonth()+"月"}}
    {{birth1}}
    {{getBirth1()}}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            birthday:1529032123201
        },
        methods:{
            getBirth1(){
                return  new Date(this.birthday).getFullYear() +"年"+new Date(this.birthday).getMonth()+"月"  ;
            }
        },
        computed:{
            birth1(){
                return  new Date(this.birthday).getFullYear() +"年"+new Date(this.birthday).getMonth()+"月"  ;
            }
        }
    })
</script>

watch

<div id="app">
    <input type="text" v-model="msg"/>
</div>
<script>
    new Vue({
        el: "#app",
        data:{
            msg:''
        },
        watch:{
            msg(newVar,oldVar){
                console.log(newVar,oldVar)
            }
        }
    })

Vue 组件

全局组件

<div id="app1">
  <componet1></componet1>
  <componet2></componet2>
</div>
<div id="app2">
  <componet1></componet1>
  <componet2></componet2>
</div>
<script>
  new Vue({
    el:"#app1"
  });
  new Vue({
    el:"#app2"
  });
  //全局组件
  Vue.component("componet1",{
    template:"<h1>符合国际法</h1>"
  });

  var componet2={
    template:"<h1>工会经费就</h1>"
  };
  Vue.component("componet2",componet2);
</script>

局部组件

<div id="app1">
  <componet1></componet1>
  <componet2></componet2>
</div>
<div id="app2">
  <componet1></componet1>
</div>
<script>
  new Vue({
    el:"#app1",
    components:{
      "componet1":{
        template:"<h2>和港口集团</h2>"
      },
      "componet2":{
        template:"<h2>规划面积挺好</h2>"
      }
    }
  });
  new Vue({
    el:"#app2"
  })
</script>

模板里面的数据必须函数

<div id="app1">
  <componet1></componet1>
  {{name}}
</div>
<template id="mytemplate">
  <form>
    {{name}}<input type="text" />
  </form>
</template>
</body>
<script>

  new Vue({
    el:"#app1",
    data:{
      "name":"用户名"
    },
    components:{
      "componet1":{
        template:"#mytemplate",
        data:function(){
          return {
            "name":"用户名2"
          }
        }
      }
    }
  });
</script>

路由

<div id="app">
  <router-link to="/">首页</router-link>
  <router-link to="/a">还是客服号码</router-link>
  <router-link to="/b">核动力航母</router-link>
  <!--路由出口-->
  <router-view></router-view>
</div>
</body>
<script>
  var index = Vue.component("index",{
    template:"<h1>首页</h1>"
  });
  var a1 = Vue.component("a",{
    template:"<h1>岁的法国昆明</h1>"
  });
  var b1 = Vue.component("b",{
    template:"<h1>发生的和你们说了</h1>"
  });
  //创建一个路由
  var routes1 =  new VueRouter({
    routes:[{
      path:"/",
      component:index
    },{
      path:"/a",
      component:a1
    },{
      path:"/b",
      component:b1
    }]
  });
  new Vue({
    el:"#app",
    router:routes1
  })
</script>

Vue的脚手架

• 安装脚手架

npm install -g vue-cli

• 执行

vue init webpack
询问创建项目 yes
​       询问vue-router yes
​       ... no

• 运行命令

    npm run dev

image.png

image.png