Vue入门2

1.计算属性

computed:{ 定义方法，该方法必须有返回值}

<div id="app">
<!--计算属性-->
    <div>{{birth1}}</div>
</div>
//计算属性的方法必须有返回值<script>
<!--初始化一个vue实例-->
    const app =new Vue({
        el: "#app",
        data: {
       
            birthday:1529032123201,
      
        }，
        //计算属性的方法必须有返回值
        computed:{
            birth1: function () {
                const date=new Date(this.birthday);
                return date.getFullYear()+"年"+date.getMonth()+"月"+date.getDay();
            }
        }

    })
</script>

2.监听：watch

<div id="#app">
 <input type="text" v-model="search">
</div>
<script>
<!--初始化一个vue实例-->
    const app =new Vue({
        el: "#app",
        data: {
            search:""
        },
        watch:{
            search(newVal,oldVal){
                console.log(newVal,oldVal);
            }
        }
    })
</script>

3.组件

3.1.全局组件

<div id="app">
     <counter></counter>
</div>

<script>
   //子组件

    //counter 为组件名
    Vue.component("counter",{
       //template 模板
        template: "<button @click='num++'>点我加一，{{num}}</button>",
        data(){
            return {
                num:0
            }
        }
    })

  //父组件

new Vue({ 
    el: "#app",
 }) </script>

3.2.局部组件

<div id="app">
    <hello1></hello1>
</div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
 //局部组件，子组件，名为hello
      const hello={
          template: "<div>打个招呼，我是{{name}}</div>",
          data(){
              return {
                  name: "刘德华"
              }
          },
      }
//父组件
     new Vue({
         el: "#app",
        
         components:{
           //使用子组件： 键值对形式：  组件名 ： 子组件名
             hello1:hello
         }
     })
</script>

3.3.父子传递

1) 父向子传递数据（num）

父组件在调用子组件（counter）时自定义属性（num1）（属性名任意，属性值为要传递的数据(num)，动态），子组件通过props接收父组件的数据

2)子向父传递方法（incr()）

父组件在调用子组件（counter）时自定义事件（@incr1）

（事件名任意，里面的方法名未要传递的方法名），

再在子组件里定义点击事件方法（subIncr）,

  在subIncr方法中调用父传来的方法：this.$emit("事件名incr1")

<body>
<div id="app">
     
     <!--调用子组件，自定义属性，属性名任意，属性值为要传递的数据
         自定义事件，方法 
       -->
     <counter :num1="num" @incr1="incr()"></counter>
</div>
</body>

<script>
   //父向子传递
   //父组件使用子组件时，自定义属性或者事件（属性名和事件名任意，属性值为要传递的数据），子组件通过props接收父组件的数据

    Vue.component("counter",{
        // template: "<button @click='num1++'>点我加一，{{num1}}</button><br>" +
            template: "<button @click='subIncr'>点我加一，{{num1}}</button>",

        //props:["num1"]
        props:{
            num1:{
                type:Number,
                default:0,
            }
        },
        methods:{
            subIncr(){
                this.$emit("incr1");  //子调用父组件方法this.$emit(父组件事件名)
            }
        }
    })


     new Vue({
         el: "#app",
         data:{
             num:0
         },
         methods:{
             incr(){
                 this.num++
             }
         }
     })
</script>

3.4.路由:vue-router

1）安装：使用npm安装 npm install vue-router --save

2) 引入<script src="../node_modules/vue-router/dist/vue-router.js"></script>

<div id="app">
    <span><router-link to="/login">登陆</router-link></span>
    <span><router-link to="/register">注册</router-link></span>
    <hr>
<!--    锚点，组件渲染的地方-->
      <router-view></router-view>
<!--    <login-form></login-form>-->
<!--    <register-form></register-form>-->
</div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>
<script src="js/login.js"></script>
<script src="js/register.js"></script>
<script>

    const router=new VueRouter({
        routes:[
            {
                path: "/login", //路由路径，通常以”/“开头
                component: loginForm
            },
            {
                path: "/register",
                component:registerForm
            }
        ]
    })
    new Vue({
        el:"#app",
        // components:{
        //     loginForm,
        //     registerForm
        // },
        router
    })
</script>




//子组件 loginForm
const loginForm={
    //组件内的template只能有一个根标签
    template:`         
      <div>
        <h1>登陆页</h1>
        用户名: <input type="text"><br>
        密&emsp;码: <input type="password"><br> 
        <input type="button" value="登陆">
      </div>
    `
}

//子组件 register
const registerForm={
    template:`
      <div>
        <h1>注册页</h1>
        用&ensp;户&ensp;名: <input type="text"><br>
        密&emsp;&emsp;码: <input type="password"> <br>
        确认密码: <input type="password"> <br>
        <input type="button" value="注册">
      </div>
    `
}