zoukankan      html  css  js  c++  java
  • Vue.js的从入门到放弃进击录(一)

    感谢我们项目组给机会,让我学了Vue.js,打开新世界大门。。。哈哈哈,也没有那么夸张,不过学下来确实觉得入门还是蛮容易的。我大概前前后后学了有一个月的样子,一开始只是比较急着可以写东西出来,后来因为分配到九月份的分享,项目组也买了vue相关的书籍,所以又进行了比较深入的一个学习。

    ====================================================嘀 哩哩 哩~========================================================

    按照惯例,我学习过程用到的资料:

    1.vue官网:https://cn.vuejs.org/v2/guide/installation.html   (官网已经很友好了,很有参考价值的)

    2.简书vue的入坑教程:http://blog.csdn.net/sinat_17775997/article/details/77824878   (拉到下面,开始看 入坑系列就可以了)

    3.智能社陈潇冰老师的vue视频:链接:http://pan.baidu.com/s/1sla6lkh 密码:72ep  (老师讲的很基础,还不错。我基本都听完了,对vue有较好理解,不过老师是凭经验讲的,看完最好再看看书,就比较完美)

    4.曾经超火的60分钟入门    http://www.cnblogs.com/keepfool/p/5625583.html   (里面的内容很详细,不够完美的地方是这个教程是基于vue1.x版本的,基础的部分基本2.0也适用,但到过滤器这些部分会有比较大出入,当时我也是学到这里懵逼了弃了~有点可惜)

    ===================================================哒哒哒====分割=======================================================

    学习Vue要准备的环境:

    1.我用的是Sublime Text3 做编辑器 :  链接:http://pan.baidu.com/s/1dFITZnb 密码:bwfy

    2.安装node.js   (这个直接去官网下载安装就可以了,到后面安装脚手架vue-cli要用到的)传送门:http://nodejs.cn/download/

    =======================================================嘀嘀嘀======分割==================================================

    现在我们开始正式一个坑一个坑学习vue

    1.建立第一个vue页面

    准备:①下载vue.js   (进入官网https://cn.vuejs.org/v2/guide/installation.html)选择“开发版本”,点击即可下载到vue.js

    ②打开sublime text3,新建一个html页面。快速建立一个html页面的快捷键(同时按住shift+ctrl+p,然后看到顶部会弹出框,输入   sshtml ,按回车键,这时候虽然没有看到什么变化,然后输入感叹号  ! ,然后按 Tab  键。完成。如果没出来,检查输入感叹号 ! 是不是英文输入法)。

    写代码:第一个vue页面

    效果图:

    代码:(这是一个双向数据绑定的案例)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Vue-Hello</title>
    </head>
    <body>
        <div id="app">
            <p>{{message}}</p>   <!-- 数据显示 -->
            <input v-model = "message">  <!-- 绑定数据 -->
        </div>
    
        <script src="vue.js"></script>    /*引入vue*/
        <script>
        // vue实例
            new Vue({
                el:'#app',
                data:{
                    message:'Hello Vue!'  /*message本体*/
                }
            })
        </script>
    </body>
    </html>
    hello.html

    2.在vue页面上练习一下vue的常用指令吧。

    vue的常用指令有:(简书上截图过来的,更多指令在官网有:https://cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4

    下面我们来挑几个练练吧。

    ①v-bind(简写为 :)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>v-bind</title>
    </head>
    <style>
            .red{
                color: red;
            }
            .blue{
                background: blue;
            }
        </style>
    <body>
        <div id="app" >
         <p :class="json">{{message}}</p>
        </div>
    
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                message:'bind',
                json:{
                            red:true,
                            blue:true
                        }
            }
        });
    </script>
    </body>
    </html>
    bind.html

    ②v-on(简写为   @  )  +  v-for

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>v-on</title>
    </head>
    <body>
        <div id="app">
            <input type="button" value="增加一个bb" v-on:click='add'></input>
            <ul>
            <li v-for='v in arr'>{{v}}</li>
            </ul>
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                arr:['a','b','c']
            },
            methods:{
                add:function(){
                    this.arr.push('bb');
                }
            },
        });
    </script>
    </html>
    on-for.html

    ③v-text、v-html这两个都是渲染数据。这两种方式跟我们直接用{{msg}}又有什么区别呢。

    先来说说{{msg}}跟v-text

    用法:

    <div >{{msg}}</div>

    <div v-text=”msg"></div>

    data:{

      msg:'hello,Liz'

    }

    上面两个写法都能渲染出msg里面的内容,当加载速度比较慢的时候,使用第一种写法你在浏览器上可能会看到{{msg}},然后才看到渲染出来的数据hello,Liz,但是v-text就没这个问题,你直接看到渲染出来的数据hello,Liz。

    v-text跟v-html相比,v-html可以解析html标签,举个栗子

    <div v-text="text"></div>

    <div v-html="text"></div>

    data:{

       text:'<div>hello,liz</div>'

    }

    这时候v-text渲染出来就是<div>hello,liz</div>,但是v-html渲染出来的是hello,liz

    -----------------------------------------------认真看应该明白这三者了吧,下面给代码跑跑看----------------------

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>v-text,v-html</title>
    </head>
    <body>
        <div id="app">
    <!--     这组对比{{msg}}和v-text用法 -->
            <div>{{msg}}</div>
            <div v-text="msg"></div>
    
    <!--     这组对比v-html和v-text用法 -->
            <div v-text="text"></div>
            <div v-html="text"></div>
        </div>
    
        <script src="vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:'hello,Liz',
                    text:'<div>hello,liz</div>'
                }
            });
        </script>
    </body>
    </html>
    v-text+v-html.html

    3.vue的生命周期,钩子函数。左边是官方给的图例(看不清建议去官网看看),右边是对钩子函数的解释。生命周期是蛮重要的,在后面的开发中你要控制你的事件、数据什么时候进行,都要用到。现在先理解一下,以后用的时候比较清晰。

                   

    示例代码理解(运行的时候打开浏览器调试查看它的周期。调试快捷键F12,笔记本按 Fn+F12)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>life-cycle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>
    
        </style>
        <script src="vue.js"></script>
        <script>
    
            window.onload=function(){
                new Vue({
                    el:'#box',
                    data:{
                        msg:'welcome vue2.0'
                    },
                    methods:{
                        update(){
                            this.msg='大家好';
                        },
                        destroy(){
                            this.$destroy();
                        }
                    },
                    beforeCreate(){
                        console.log('组件实例刚刚被创建');
                    },
                    created(){
                        console.log('实例已经创建完成');
                    },
                    beforeMount(){
                        console.log('模板编译之前');
                    },
                    mounted(){
                        console.log('模板编译完成');
                    },
                    beforeUpdate(){
                        console.log('组件更新之前');
                    },
                    updated(){
                        console.log('组件更新完毕');
                    },
                    beforeDestroy(){
                        console.log('组件销毁之前');
                    },
                    destroyed(){
                        console.log('组件销毁之后');
                    }
                });
            };
        </script>
    </head>
    <body>
        <div id="box">
            <input type="button" value="更新数据" @click="update">
            <input type="button" value="销毁组件" @click="destroy">
            {{msg}}
        </div>
    </body>
    </html>
    lifeCycle.html

    4.vue组件定义

    核心部分,先要注册组件。  Vue.component('组件名字',{内容});

    然后在html中使用组件标签。组件标签就是你取的组件名字加上尖括号。    <组件名字></组件名字>

    (这里解释一下,template其实就是我注册组件的时候里面的内容中的template,他们之间的关系通过 id="aaa"来维系。)

    看看代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>component</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>
    
        </style>
        <script src="vue.js"></script>
        <script>
        // 注册
            Vue.component('my-component', {   /*定义组件名称和内容*/
              template:'#aaa'    /*调用id为aaa的模板*/
            });
    
            window.onload=function(){
                    new Vue({
                        el:'#box',
                        data:{
                            msg:'welcome vue2.0'
                        }
                    });
                };
        </script>
    </head>
    <body>
        <template id="aaa">
            <div>
                <h3>我是组件</h3>
            </div>
        </template>
        <div id="box">
            <my-component></my-component>  <!-- 在页面上使用组件标签 -->
            {{msg}}
        </div>
    </body>
    </html>
    components.html

    5.过滤器

    本来在vue1.x的版本中,自带了很多好用的过滤器的,但是尤大大为了框架长久发展,决定删除掉,全部交给开发者去自定义。这里就给一个自定义时间过滤器的实例。

    我们在html中调用过滤器

    然后在script中进行定义过滤器

    代码在这里

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>草稿</title>
    </head>
    <body>
        <div id="app">
            {{a | toDou}}   <!-- 使用过滤器 -->
        </div>
    </body>
    <script src="vue.js"></script>
    <script>
        //自定义过滤- 时间过滤
       Vue.filter('toDou',function(input){
        var oDate = new Date(input);
        return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+''+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
       });
    
        new Vue({
            el:'#app',
            data:{
                a:Date.now()
            },
        });
    </script>
    </html>
    filter.html

    ===这里我们定义了组件,过滤器,小结一下。======

    其实在vue页面中定义你要的组件也好,过滤器也好,都是要通过vue实例调用这个方法的。总的套路就是

    ①。在script中定义:Vue.xxx = ('自定义名字',内容)

    ②。在html代码中使用它

    =================================================滴滴  哒~========================

    到这里,基础部分就暂告一段落了,是不是很简单。下一篇我们来介绍如何用vue-cli来搭建一个工程项目。会有一个比较大的跨度噢~加油啦~biu~

  • 相关阅读:
    hdu 1042 N!
    hdu 1002 A + B Problem II
    c++大数模板
    hdu 1004 Let the Balloon Rise
    hdu 4027 Can you answer these queries?
    poj 2823 Sliding Window
    hdu 3074 Multiply game
    hdu 1394 Minimum Inversion Number
    hdu 5199 Gunner
    九度oj 1521 二叉树的镜像
  • 原文地址:https://www.cnblogs.com/GuliGugaLiz/p/7609103.html
Copyright © 2011-2022 走看看