实例解析Vue.js下载方式及基本概念


Posted in Javascript onMay 11, 2018

vue.js是什么?

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。

说明及下载

Vue.js使用文档已经写的很完备和详细了,通过以下地址可以查看: https://cn.vuejs.org/v2/guide/

vue.js如果当成一个库来使用,可以通过下面地址下载: https://cn.vuejs.org/v2/guide/installation.html

Vue.js基本概念

我们下载了vue.js后,需要在页面上通过script标签引入vue.js,开发中可以使用开发版本vue.js,产品上线要换成vue.min.js。

script type="text/javascript" src="js/vue.min.js"></script>

Vue代码实例(创建)

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="app">{{ message }}</div>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
  var vm=new Vue({
    //el属性对应一个标签 当el对象创建后,这个标签内的区域就被Vue对象接管,
    //接下来就可用Vue来做一些为所欲为的事情啦
    el:'#app',
    data : {message:'好湿呀'}
  });
  </script>

数据与方法

当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。还可以在Vue实例中定义方法,通过方法来改变实例中data对象中的数据,数据改变了,视图中的数据也改变。

Vue实例代码(方法)

window.onload = function(){
var vm = new Vue({
  el:'#app',
  data:{message:'hello world!'},
  methods:{
    fnChangeMsg:function(){
      this.message = 'hello Vue.js!';
    }
  }
});
}
<div id="app">
<p>{{ message }}</p>
<button @click="fnChangeMsg">改变数据和视图</button>
</div>

Vus.js模板语法

模板语法指的是如何将数据放入html中

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,例如:

{{ msg }}

插入的值当中还可以写表达式:

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url" rel="external nofollow" >链接文字

指令

指令 (Directives) 是带有“v-”前缀的特殊属性。指令属性的值预期是单个JavaScript表达式,指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。常见的指令有v-bind、v-if、v-on。

<-- 根据ok的布尔值来插入/移除 p元素 -->
<p v-if="ok">是否显示这一段
<-- 监听按钮的click事件来执行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按钮

Vue.js 特点

  • 简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
  • 数据驱动: 自动追踪依赖的模板表达式和计算属性。
  • 组件化: 用解耦、可复用的组件来构造界面。
  • 轻量: ~24kb min+gzip,无依赖。
  • 快速: 精确有效的异步批量 DOM 更新。
  • 模块友好: 通过 NPM 或 Bower 安装,无缝融入你的工作流。

总结

以上所述是小编给大家介绍的Vue.js下载方式及基本概念,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
node.js中的path.resolve方法使用说明
Dec 08 Javascript
封装属于自己的JS组件
Jan 27 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 #Javascript
基于ionic实现下拉刷新功能
May 10 #Javascript
详解各版本React路由的跳转的方法
May 10 #Javascript
React路由管理之React Router总结
May 10 #Javascript
React从react-router路由上做登陆验证控制的方法
May 10 #Javascript
详解Angular路由之路由守卫
May 10 #Javascript
JavaScript实现一个简易的计算器实例代码
May 10 #Javascript
You might like
php5中类的学习
2008/03/28 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
PHP简单实现图片格式转换(jpg转png,gif转png等)
2019/10/30 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
2014/10/29 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
Python入门必须知道的11个知识点
2018/03/21 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
绘画设计学生的个人自我评价
2013/09/20 职场文书
学习十八大报告感言
2014/02/28 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server
golang elasticsearch Client的使用详解
2021/05/05 Golang
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python