实例解析Vue.js下载方式及基本概念
vue.js是什么?
vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。
说明及下载
vue.js使用文档已经写的很完备和详细了,通过以下地址可以查看:
vue.js如果当成一个库来使用,可以通过下面地址下载:
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下载方式及基本概念,希望对大家有所帮助
上一篇: 难道你硬了?
下一篇: 游泳减肥呼吸最重要 控制呼吸能加快燃脂