实例解析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 相关文章推荐
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
javascript类型系统 Window对象学习笔记
Jan 07 Javascript
javascript返回顶部的按钮实现方法
Jan 09 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 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
sphinx增量索引的一个问题
2011/06/14 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
Python中操作符重载用法分析
2016/04/29 Python
virtualenv实现多个版本Python共存
2017/08/21 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
python算的上脚本语言吗
2020/06/22 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
怎样客观的做好自我评价
2013/12/28 职场文书
和平主题的演讲稿
2014/01/12 职场文书
写自荐信三大法宝
2014/01/24 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
主题教育活动总结
2014/05/05 职场文书
干部考察材料范文
2014/12/24 职场文书
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js