Vue.js简易安装和快速入门(第二课)


Posted in Javascript onOctober 17, 2017

上一节我们介绍了Vue.js框架,这一节,我们可以来试着动手写点小代码了。

1 简易安装

要使用Vue.js,我们得先把它安装到我们的项目中,说明了简易安装,我们讲解的肯定是最简单的方法,先不管那些高大上的费时间的安装方法,直接引入一个js文件,先把代码敲代码再说。 

<head>
    <meta charset="UTF-8">
    <title>简易安装 Vue.js</title>
    <script src="vue.js"></script>
</head>

官网提供了Vue.js源码下载的地方:https://cdn.jsdelivr.net/vue/2.1.3/vue.js 

如果你不想下载到本地,要可以直接用CDN的方式,引入网上资源,一样可以:

<script src="https://xx/vue.js"></script>

这样,我们就成功地用最简单的方法把Vue.js引入到我们的项目中了。至于那些高大上的npm,Bower等花式安装方法,我们后期再看它。 

2 数据驱动视图

引入之后,我们就可以把它用起来。听说它最牛逼的地方是数据驱动视图,解放DOM操作,让你不再做又复杂又耗性能的DOM操作。那么,我们就看看它是怎么玩的! 

假设,我们现在要把js对象中的某个变量的值渲染在页面上,传统的做法,就是先用getElementById获取到DOM节点对象,再innerHTML设置它的内容。 

现在,在Vue.js中,你需要这样做:

<div id="app">
  公众号:{{ name }}
 </div>
 <script>
   let vm = new Vue({
     el:"#app",
     data:{
       name:"web前端教程",
     }
   });
 </script>

我们通过new Vue( )创建一个实例vm,参数是一个json对象,属性el提供一个在页面上存在的DOM 元素(id='app'),表明这个实例是关联指定的DOM节点。 

在DOM节点上,我们就可以使用双大括号{{  }}的语法来渲染Vue实例对象data中已经存在的属性值,如上面案例中的name属性的值“web前端教程”就会被渲染到页面中,替换{{ name }} 显示效果为:“web前端教程”。

Vue.js简易安装和快速入门(第二课)

在此过程中,我们并没有写过操作DOM节点的代码,而且,上一节我们讲过,MVVM模式中的viewModel充当着监控者的角色,假如它监控到model数据发生了变化,便会通知view视图进行更新,这个过程并不需要你去参与。

Vue.js简易安装和快速入门(第二课)

(复习mvvm)

我们来试试看,我们把name中的值改成:“hello word”,再不添加任何代码的情况下,页面视图是否会自动更新。 

看下面的gif动图,我们通过chrome浏览器演示一下:

Vue.js简易安装和快速入门(第二课)

(慢点,等gif图加载完)

如上图所示,一旦name的值被改变了,页面上立马跟着发生了变化,而不需要你再写innerHTML去更新视图了。

这就是Vue.js的数据驱动视图。

3 双向绑定

更方便的是,Vue.js还提供了方便的语法指令,实现视图和数据的双向绑定,也就是说,不但数据变化了可以驱动视图,用户在页面上做了一些操作,也很方便地实现更新model层的数据。 

例子:监听用户在页面输入框输入的内容,然后将其实时更新在页面上。 

在Vue中我们使用v-model指令就可以轻松实现。(v-model是什么东西,先不用管,后面会有章节详细介绍)。 

<div id="app">
   <input v-model="number">
   <p>数字:{{ number }}</p>
 </div>
 <script>
   let vm = new Vue({
     el:"#app",
     data:{
       number:"",
     }
   });
 </script>

 效果如下面的动图:

Vue.js简易安装和快速入门(第二课)

(慢点,等gif图加载完)

案例中,我们不需要写代码去监听input控件的内容变化,用户输入的内容,会实时地更新vm实例中的data属性number的值,一旦number更新了,视图也会跟着更新了。因为这一切,都由Vue.js帮你完成了。

4 组件

上面的我们演示了Vu.jse的数据驱动,别忘了,上一节我们提到Vue.js还有一个重要的核心,就是:组件化。 

组件化就是把页面中特定的区块独立抽出来,并封装成一个可方便复用的组件。

例子:假设,页面上有多个一样的卡片:

Vue.js简易安装和快速入门(第二课)

传统的办法,我们可以要写三份同样的HTML布局:

<div id="app">
  <!--第1个卡片-->
  <div class="card">
    <img src="logo.png" alt="">
    <h2>web前端教程</h2>
    <p>这里是描述,很长的描述</p>
    <button>我是按钮</button>
  </div>
  
  <!--第2个卡片-->
  <div class="card">
    <img src="logo.png" alt="">
    <h2>web前端教程</h2>
    <p>这里是描述,很长的描述</p>
    <button>我是按钮</button>
  </div>
  
  <!--第3个卡片-->
  <div class="card">
    <img src="logo.png" alt="">
    <h2>web前端教程</h2>
    <p>这里是描述,很长的描述</p>
    <button>我是按钮</button>
  </div>
 </div>

如果我们把每个卡片看作一个可复用的区域的话,那么它就可以封装成一个组件。

在Vue.js中,我们试着把卡片封装成一个组件。

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

 <script>
  //注册一个名叫card的组件
 Vue.component('card',{
    template:`<div>
      <img src="logo.png" alt="">
      <h2>web前端教程</h2>
      <p>这里是描述,很长的描述</p>
      <button>我是按钮</button>
    </div>`
  });

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

我们用Vue.component(tagName, options)注册了一个名字叫card的组件,这样,在需要复用这个组件的地方,我们只需要使用<card></card>就可以了。实际开发中,组件比这个复杂得多,越复杂,封装后的便利性越高。

可能你会说,组件里面的显示的内容不可能全都一样。放心,Vue为组件提供了props属性来接受传递进来的参数,后面我们会有专门的章节来介绍组件的详细用法。

5 本节小结

看到这里,你已经了解了Vue.js的数据驱动和组件化两大核心了,你已经入门了。后面的章节都是围绕这两个核心点来展开讲解。

来源:公众号:web前端教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery获取复选框被选中的值
Apr 10 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
JavaScript之Object类型介绍
Apr 01 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
vue.js实现含搜索的多种复选框(附源码)
Mar 23 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
vue实现分页栏效果
Jun 28 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 #Javascript
node使用Koa2搭建web项目的方法
Oct 17 #Javascript
Node 自动化部署的方法
Oct 17 #Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 #Javascript
jquery实现图片跟随鼠标的实例
Oct 17 #jQuery
vue获取input输入值的问题解决办法
Oct 17 #Javascript
node.js 用socket实现聊天的示例代码
Oct 17 #Javascript
You might like
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
python 默认参数问题的陷阱
2016/02/29 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
Django 反向生成url实例详解
2019/07/30 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
python字符串的index和find的区别详解
2020/06/20 Python
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
线程同步的方法
2016/11/23 面试题
杠杆的科学教学反思
2014/01/10 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
质量标语大全
2014/06/12 职场文书
创文明城市标语
2014/06/16 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
2016新年致辞
2015/08/01 职场文书