实例解析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 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
Vue表单实例代码
Sep 05 Javascript
简单理解vue中Props属性
Oct 27 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
es6数值的扩展方法
Mar 11 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 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
抓取YAHOO股票报价的类
2009/05/15 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
插件:检测javascript的内存泄漏
2007/03/04 Javascript
简单的js表单验证函数
2013/10/28 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
javascript中return,return true,return false三者的用法及区别
2015/11/17 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
vue-router跳转页面的方法
2017/02/09 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
Python中列表、字典、元组、集合数据结构整理
2014/11/20 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
adidas泰国官网:adidas TH
2020/07/11 全球购物
产品生产计划书
2014/05/07 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
保护地球的标语
2014/06/17 职场文书
个人委托函范文
2015/01/29 职场文书
欢送领导祝酒词
2015/08/12 职场文书
导游词之襄阳古城
2019/09/27 职场文书