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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
Jquery 数组操作大全个人总结
Nov 13 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
js中less常用的方法小结
Aug 09 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
深入Node TCP模块的理解
Mar 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
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
基于php编程规范(详解)
2017/08/17 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
JavaScript插入动态样式实现代码
2012/02/22 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
easyui combotree加载静态数据问题(选不上)解决方法
2016/12/26 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
Vue实现购物车实例代码两则
2020/05/30 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
Python学生信息管理系统修改版
2018/03/13 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
python计算导数并绘图的实例
2020/02/29 Python
python编写实现抽奖器
2020/09/10 Python
铁路个人事迹材料
2014/01/30 职场文书
门前三包责任书
2014/04/15 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python