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

用法：

data:{

msg:'hello,Liz'

}

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

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

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~

Vue.js的从入门到放弃进击录（一）的更多相关文章

Vue.js的从入门到放弃进击录（二）
哇塞,昨晚更新的篇(一)这么多阅读量,看来入坑的人越来越多啦~熬了一个礼拜夜,今天终于生病惹~国庆要肥家咯·所以把篇(二)也更完.希望各位入坑的小伙伴能少跳几个坑呗.如果有什么不对的地方也欢迎讨论指正 ...
《vue.js2.0从入门到放弃》学习之路
原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...
Vue (一) --- vue.js的快速入门使用
=-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...
Vue.js2.0从入门到放弃---入门实例
最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用 ...
转-Vue.js2.0从入门到放弃---入门实例（一）
http://blog.csdn.net/u013182762/article/details/53021374 标签: Vue.jsVue.js 2.0Vue.js入门实例Vue.js 2.0教程 ...
vue.js慢速入门（1）
0.MVVM 什么是MVVM?就是Model-View-ViewModel. ViewModel是Vue.js的核心,它是一个Vue实例. 不太懂也没关系,慢慢就懂了. 1.基础示例代码: < ...
vue.js学习之入门实例
之前一直看过vue.js官网api,但是很少实践,这里抽出时间谢了个入门级的demo,记录下一些知识点,防止后续踩坑,牵扯到的的知识点:vue.vue-cli.vue-router.webpack等. ...
vue.js慢速入门（2）
4.组件使用基础什么是组件?组件可以理解为可重用的自定义HTML. 可以使用一堆组件来构造大型应用,任意类型的应用界面都可以抽象为一个组件树: 可以把组件代码按照template.style.scr ...
vue.js自定义指令入门
Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...

随机推荐

jquery的2.0.3版本源码系列(2):21行-94行定义了一些变量和函数 jQuery=function(){}
2.1.bug通过索引查询这里的#13335是bug的索引,如何查询呢? 第一步,浏览器地址栏输入"https://bugs.jquery.com/". 第二步,在网页的搜索框里 ...
JavaScript 30 - 1 学习笔记
学习JavaScirpt30的笔记! ...虽然英语不是很好,但是跟着来还是学到了一些东西. 1-------> JavaScirpt Drum Kit 功能是这样的 ,敲击键盘上面的按钮, ...
adb 安装apk 报错：Failure [INSTALL_FAILED_CPU_ABI_INCOMPATIBLE]
这是因为系统里缺少了 Google Play 市场等各种谷歌服务应用,其实是因为版权问题,从 2.0 版本开始 Genymotion 提供的虚拟设备都已经移除了 Google Apps 以及 AR ...
网络协议TFTP
TFTP(Trivial File Transfer Protocol,简单文件传输协议)是TCP/IP协议族中的一个用来在客户端与服务器之间进行简单文件传输的协议.和使用TCP的文件传输协议(FTP ...
lucene&solr-day1
全文检索课程 Lucene&Solr(1) 1. 计划第一天:Lucene的基础知识 1.案例分析:什么是全文检索,如何实现全文检索 2.Lucene实现全文检索的流程 a) ...
node.js的fs核心模块读写文件操作 -----由浅入深
node.js 里fs模块常用的功能实现文件的读写目录的操作 - 同步和异步共存 ,有异步不用同步 - fs.readFile 都不能读取比运行内存大的文件,如果文件偏大也不会使用readFil ...
java_eclipse添加DID实现自动提示
便捷无错开发对于xml 配置没有自动提示是多么恼火就不用说了,eclipse本身很多都是默认关闭了的,如果开发者不知道的话,就不知道怎么去设置,下面介绍几种自动提示设置的方法: XML:获得提示更好 ...
Spring详解（五）------AspectJ 实现AOP
上一篇博客我们引出了 AOP 的概念,以及 AOP 的具体实现方式.但是为什么要这样实现?以及提出的切入点表达式到底该怎么理解? 这篇博客我们通过对 AspectJ 框架的介绍来详细了解. 1.什么是 ...
基于Vue全家桶制作的的高仿美团APP
鸣谢:该项目核心部分参考了慕课网精英讲师ustbhuangyi的课程,其余部分高仿美团APP构建. 前端菜鸟项目,大佬们轻喷~ 美团外卖APP
C# IComparable 和 IComparer 区别
理解很重要: 开始对这两个接口的区别一直是很模糊,看到很多书后,终于知道了区别,形成了个人的理解: 关于 IComparable 比喻一个类person实现了 IComparable,那么它就要重写C ...

Vue.js的从入门到放弃进击录（一）

Vue.js的从入门到放弃进击录（一）的更多相关文章

随机推荐

热门专题