实例解析Vue.js下载方式及基本概念
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下载方式及基本概念，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家介绍了vue中百度地图定位及附近搜索功能使用步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
BetterScroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件，BetterScroll 是使用纯 JavaScript 实现的，这意味着它是无依赖的。本文基于better-scroll 实现歌词联动功能，感兴趣的朋友跟随小编一起看看吧2020-05-05
等比例缩放可以在不同的分辨率下都能够一屏展示,不会有滚动条的问题,也不会有适配问题,下面这篇文章主要给大家介绍了关于vue项目网页自适应等比例放大缩小的相关资料,需要的朋友可以参考下2022-11-11
这篇文章将利用Vue3和Canvas编写一个童年经典游戏—坦克大战，文中的示例代码讲解详细，感兴趣的小伙伴快来跟随小编一起学习一下吧2022-03-03
这篇文章主要介绍了Element Collapse 折叠面板的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
自带气泡提示的vue校验插件（vue-verify-pop）
这篇文章主要为大家详细介绍了自带气泡提示的vue校验插件，vue-verify-pop的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
这篇文章主要介绍了vuex中getters的基本用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了Vue3.2中setup语法糖的具体使用方法，文中的示例代码讲解详细，对我们深入了解Vue有一定的帮助，需要的可以参考一下2023-05-05
本篇文章主要介绍了Vue+Flask实现简单的登录验证跳转的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了Vue中filter使用及根据id删除数组元素方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论