105

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

 6 years ago
source link: http://www.cnblogs.com/GuliGugaLiz/p/7609103.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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页面

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

hello.html

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

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

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

①v-bind（简写为 ：）

bind.html

②v-on（简写为   @  ）  +  v-for

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

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

v-text+v-html.html

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

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

lifeCycle.html

4.vue组件定义

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

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

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

components.html

5.过滤器

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

我们在html中调用过滤器

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

代码在这里

filter.html

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

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

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

②。在html代码中使用它

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

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK