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 相关文章推荐
JavaScript 中的事件教程
Apr 05 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
jQuery 联动日历实现代码
May 31 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
jQuery插件dataTables添加序号列的方法
Jul 06 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
React中Ref 的使用方法详解
Apr 28 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
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
php实现单链表的实例代码
2013/03/22 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
JavaScript DOM 添加事件
2009/02/14 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
js实现分割上传大文件
2016/03/09 Javascript
jQuery中使用animate自定义动画的方法
2016/05/29 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
Angularjs实现上传图片预览功能
2017/09/01 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
33个Python爬虫项目实战(推荐)
2019/07/08 Python
简单了解python列表和元组的区别
2020/05/14 Python
python实现数字炸弹游戏程序
2020/07/17 Python
python批量修改交换机密码的示例
2020/09/22 Python
python3实现飞机大战
2020/11/29 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
建筑工程技术应届生求职信
2013/11/17 职场文书
写给老师的表扬信
2014/01/21 职场文书
考核工作实施方案
2014/03/30 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
计算机系本科生求职信
2014/05/31 职场文书
商超业务员岗位职责
2015/02/13 职场文书
赢在中国观后感
2015/06/02 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书
创业计划书之面包店
2019/09/17 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
一篇文章弄懂Python中的内建函数
2021/08/07 Python