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 09 Javascript
jquery处理json对象
Nov 03 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
vue项目实现多语言切换的思路
Sep 17 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 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开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
file模式访问网页时iframe高度自适应解决方案
2013/01/16 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
js图片上传的封装代码
2017/08/01 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
vue-cli的eslint相关用法
2017/09/29 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
2018/03/01 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
python判断数字是否是超级素数幂
2018/09/27 Python
python 实现敏感词过滤的方法
2019/01/21 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python实现分数序列求和
2020/02/25 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
2014学雷锋活动心得体会
2014/03/10 职场文书
《穷人》教学反思
2014/04/08 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
公司周年庆典标语
2014/10/07 职场文书
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript