实例解析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 相关文章推荐
Javascript开发包大全整理
Dec 22 Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
JavaScript中this详解
Sep 01 Javascript
浅析JS运动
Dec 28 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
vue.js语法及常用指令
Oct 29 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
vuex存取值和映射函数使用说明
Jul 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
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
ThinkPHP实现图片上传操作的方法详解
2017/05/08 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
Python函数学习笔记
2008/10/07 Python
Python最基本的输入输出详解
2015/04/25 Python
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
Python语言的变量认识及操作方法
2018/02/11 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
python空元组在all中返回结果详解
2020/12/15 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
四种会话跟踪技术
2015/05/20 面试题
中专毕业个人的自荐信格式
2013/09/21 职场文书
物流专业求职计划书
2014/01/10 职场文书
个性发展自我评价
2014/02/11 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
学雷锋的心得体会
2014/09/04 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技