8-23vue增强

Vue增强-day02
一、课程介绍
Vue事件(掌握)
vue计算属性&watch(掌握)
vue组件(掌握)
vue路由(掌握)
webpack(掌握)
vue-cli-脚手架

vue指令

v-model:双向绑定(只能绑定表单元素:input,select,textarea)
注:多选的绑定值应该是一个数组

<div id="app">
            用户名:<input type="text" v-model="name"/>{{name}}<br/>
            喜好:<input type="checkbox" value="1" v-model="hobbys">功夫
            喜好:<input type="checkbox" value="2" v-model="hobbys">电影
            喜好:<input type="checkbox" value="3" v-model="hobbys">慈善
            {{hobbys}}<br/>
            性别:<input type="radio" value="1" v-model="sexnum">男
            性别:<input type="radio" value="2" v-model="sexnum">女
                {{sexnum}}<br/>
            城市:<select v-model="citynum">
                    <option value="1">广汉</option>
                    <option value="2">绵阳</option>
                    <option value="3">成都</option>

                </select>
                {{citynum}}<br/>
             简历:<textarea v-model="intronum">
    </textarea>
            {{intronum}}<br/>
    </div>

    <script>
        new Vue({
            /*挂载可以使用id,class,标签建议使用id进行挂载*/
            el:"#app",
            /*数据*/
            data:{
                name:"星爷",
                hobbys:[],
                sexnum:1,
                citynum:2,
                intronum:"没事多运动,对自己身体好,不要整天胡思乱想,专心做自己的事"
            }


        })




    </script>

v-show:是否显示或者隐藏相应的元素

 <div id="app">
        <input type="button" onclick="shower()" value="showa"/>

        <img src="img/1.jpg" v-show="isShow">
        <img src="img/2.jpg" v-show="isShow">
        <img src="img/3.jpg" v-show="isShow">
        <img src="img/4.jpg" v-show="isShow">
        <img src="img/5.jpg" v-show="isShow">
    </div>

    <script>
        var v = new Vue({
            
            el:"#app",
            data:{
              isShow:false
            }
            
        })
        function shower() {
            v.isShow=!v.isShow

        }
        
    </script>

v-if(v-else-if,v-else):判断

<div id="app">
        <!--if判断,不满足条件不显示-->
        <div v-if="age>70">
            长命百岁,寿比南山
        </div>
        <div v-else-if="age>20&&age<70">
            乘年轻,多做想做的事,为所欲为
        </div>
        <div v-else>
            多读书,
        </div>
    </div>


    <script>
        var v = new Vue({

            el:"#app",
            data:{
                age:23

            }

        })


    </script>

v-on:事件名称=“方法”:事件的绑定
建议使用简写形式: @click="ai"

<div id="app">
    <!--事件简写方式-->
    <input @click="aiwo()" type="button" value="爱我吧">
    <hr>
    <input @click="buaiwo('你')" type="button" value="不爱我">
    <button @click="age++">{{age}}</button>
    <button @click="age++">{{age}}</button>
</div>

<script>
    var v = new Vue({
        el:"#app",
        date:{
            age:20
        },
        methods:{
            aiwo(){
                alert("爱我就大声说出来")
            },
            buaiwo(msg){
                console.debug(msg+"不爱请别伤害")
            }

        }



    })


</script>

vue两个小功能(计算属性，属性监听) -> 掌握

计算属性

 <div id="app">
          {{formatDate}}
       </div>

        <script>

            var v =new Vue({
                el:"#app",
                data:{
                    bronDate:1566526686736
                },
                //计算属性
                computed:{
                    //这里看起来是一个方法，但是使用是当做属性来使用
                    formatDate(){
                        let date = new Date(this.bronDate);
                        return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
                    }
                }

            })
        </script>

属性监听 watch

<div id="app">
        <input type="text" v-model="msg">
    </div>
    <script>
        var  v = new Vue({
            el:"#app",
            data:{
                msg:"彪哥"
            },
            watch:{
                msg(newval,oldval){
                    console.debug(newval,oldval)
                }
            }

        })

    </script>

组件 -> 掌握

全局组件/局部组件
注意点:1.tempate里面的东西有且只有一个外部标签 2.驼峰命名 myTag -> my-tag
全局组件

 <div id="app1">
        <mytag></mytag>
    </div>
    <div id="app2">
        <mytag></mytag>
    </div>
    <script>
        /*模板中有一个要求:有且只有一个外部标签
        *          myTag(驼峰命名) 使用的时候得用-（my-tag）*/
        Vue.component("mytag",{
            template:"<div><h1><h1><h1>我是一个中国人</h1></h1></h1><h2><h1>香港是中国的</h1></h2></div>"
        })

        new Vue({
            el:"#app1"

        })
        new Vue({
            el:"#app2"
        })

    </script>

局部组件

<div id="app1">
    <mytag></mytag>
</div>
<div id="app2">
    <mytag></mytag>
</div>
<script>
    /*模板中有一个要求:有且只有一个外部标签
    *          myTag(驼峰命名) 使用的时候得用-（my-tag）*/


    new Vue({
        el:"#app1",
        components:{
            mytag: {
                template: "<h1><h1>为所欲为</h1></h1>"
            }

        }
    })

    new Vue({
        el:"#app2"
    })

</script>

组件template

 <div id="app">
        <mytag></mytag>
    </div>
    <template id="myTemp">
        <form method="post">
            用户名:<input type="text"><br/>
            密码:<input type="password"><br/>
            <input type="submit" value="提交">

        </form>

    </template>
    <script>

        //定义一个常量
        const componentConfig={
            template:"#myTemp"
        }

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

组件script

 <div id="app">
        <mytag></mytag>
    </div>
    <script id="myTemp" type="text/template">
        <form method="post">
            用户名:<input type="text"><br/>
            密码:<input type="password"><br/>
            <input type="submit" value="提交">

        </form>

    </script>
    <script>
        //定义一个常量
        const componentConfig={
            template:"#myTemp"
        }

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

路由入门

<div id="app">
        <p>
            <!--router-link相当于a标签-->
            <router-link to="/music" >美女</router-link>
            <router-link to="/singer" >少女</router-link>
            <router-link to="/friend" >靓女</router-link>

        </p>
        <!--路由出口-->
        <router-view></router-view>
    </div>
    <script>

        new Vue({
            el:"#app",
            router:new VueRouter({
                routes:[
                    { path: '/music', component: { template: '<div>音乐好听<img src="img/2.jpg"></div>' } },
                    { path: '/singer', component: { template: '<div>歌手漂亮<img src="img/3.jpg"></div>' } },
                    { path: '/friend', component: { template: '<div>朋友一生一起走<img src="img/4.jpg"></div>' } }
                ]

            })

        })

    </script>

路由-拆分

  <div id="app">
        <p>
            <!--router-link相当于a标签-->
            <router-link to="/music" >美女</router-link>
            <router-link to="/singer" >少女</router-link>
            <router-link to="/friend" >靓女</router-link>

        </p>
        <!--路由出口-->
        <router-view></router-view>
    </div>
    <script>
        /*定义组件*/
        const music ={template: '<div>音乐好听<img src="img/2.jpg"></div>'}
        const singer ={template: '<div>歌手漂亮<img src="img/3.jpg"></div>'}
        const friend ={template: '<div>朋友一生一起走<img src="img/4.jpg"></div>'}

        const routes = [
            { path: '/music', component: music },
            { path: '/singer', component: singer },
            { path: '/friend', component: friend }
        ];
        const router =new VueRouter({
            routes
        })

        new Vue({
            el:"#app",
            router

        })

    </script>

脚手架

npm install -g vue-cli ：下载全局的脚手架(我们可以使用)
进入到你当前的项目:
vue init webpack : 初始化(项目中有很多文件)
npm run dev : 运行(可以访问)