这里有新鲜出炉的 vue.js 教程, 程序狗速度看过来!
vue.js 轻量级 JavaScript 框架
Vue.js 是构建 web 界面的 JavaScript 库, 提供数据驱动的组件, 还有简单灵活的 API, 使得 MVVM 更简单
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架这篇文章主要介绍了 Vue.js 用法详解, 需要的朋友可以参考下
vue.js 教程
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架
Vue 只关注视图层, 采用自底向上增量开发的设计
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
Vue 学习起来非常简单, 本教程基于 Vue 2.1.8 版本测试
前 言
前段时间为了一个数据查询的项目自学了 Vue, 感觉这款框架还是很不错的, 今天就整理整理这个框架如何使用, 希望对正在学这个框架的小伙伴有所帮助~
首先, 我们先来了解一下 Vue:
Vue.js 是一套构建用户界面 (user interface) 的渐进式框架与其他重量级框架不同的是, Vue 从根本上采用最小成本渐进增量 (incrementally adoptable) 的设计 Vue 的核心库只专注于视图层, 并且很容易与其他第三方库或现有项目集成另一方面, 当与单文件组件和 Vue 生态系统支持的库结合使用时, Vue 也完全能够为复杂的单页应用程序提供有力驱动所以, Vue 其实还是很强大的
1.Vue.js 的安装与模版语法
Vue 的使用非常简单, 直接下载 Vue.js 或者 Vue.min.js 导入就可以使用
1-1 模板语法
Vue.js 使用了基于 html 的模版语法, 允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统
结合响应系统, 在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上
1. html 模版
html 模版: 基于 DOM 的模版, 模版都是可解析的有效的 HTML
插值:
文本: 使用 Mustache 语法(大括号){{ value }}; 作用: 替换实例上的属性值, 当值改变时, 插值内容会被自动更新也可使用 v-text="value" 代替
<p>{{ value }}<p> 等价于 <p v-text="value"></p>
原生的 html: 双大括号输出的文本, 不会解析 html 标签也就是说当实例的 data 为 html 标签时, 不能解析而是直接输出出来此时如想要解析, 可使用 v-html="value" 代替
- new Vue({
- data:{
- value: `<span > 我是一个 span 标签</span>`
- }
- });
<p>{{ value }}<p> 页面展示 => <span > 我是一个 span 标签</span>
<p v-html="value"><p> 页面展示 => 我是一个 span 标签
需要注意的是, 有时候因为一些网络延迟等原因, 用户会在也买年中先看到{{ xxx }}, 然后才有数据我们若想避免此效果, 可用 v-text="xxxx" 代替
属性: 使用 v-bind 进行绑定, 可以响应变化
<h2 :class="{red:show}">
标题</h2> => 注意此处的 show 为 data 内的一个布尔值数据, 若真则添加 red 的 class, 若假则移除 red 的 class,
使用 javascript 表达式: 可以写简单的表达式(可以简单的三目运算, 但是不可以写 if 语句), 以后会有计算属性
- { 1+2 }
- { true? "yes":"no" }
2. 字符串模版
template 字符串
tempalte => 选项对象的属性
模版将会替换挂载的元素挂载元素的内容都会被忽略, 根节点只有一个, 将 html 结构写在一对 script 标签中, 设置 type="x-template"
- <body>
- <div id="box">
- </div>
- </body>
- <script src="vue.js"></script>
- <script type="text/javascript">
- document.addEventListener('DOMContentLoaded',function () {
- var str = '<h2>hello pink!</h2>'
- var vm = new Vue({
- el: '#box',
- template: str
- });
- },false);
- </script>
说明权重比较高, 直接代替挂载点, 把原来的 html 替换后显示
- // 代码片段这个就是利用 script 标签对内定义模版, 局限性: 不能跨文件使用, 一个页面中可以使用
- <body>
- <div id="box">
- </div>
- </body>
- <script src="vue.js"></script>
- <script type="x-template" id="str">
- <p > 我是一个 p 标签</p>
- </script>
- <script type="text/javascript">
- document.addEventListener('DOMContentLoaded',function () {
- var vm = new Vue({
- el: '#box',
- template: '#str'
- });
- },false);
- </script>
Vue 实例, 每一个应用都是通过 Vue 这个构造函数创建根实例 (root instance) 启动 New Vue(选项对象)需要传入选项对象, 对象包含挂在元素, 数据, 模板方法等
el: 挂载元素选择器 --- String|HtmlElement
data: 代理数据 --- Object|Function
methods: 定义方法 --- Object
Vue 代理 data 数据, 每个 vue 实例都会代理其 data 对象里所有的属性, 这些被代理的属性是响应的新添加的属性不具备响应功能, 改变后不会更新视图
Vue 实例自身属性和方法, 暴露自身的属性和方法, 以 $ 开头的, 例如:$el$data
- var vm = new Vue({
- el: '#app',
- data: {
- message: 'hello,Datura!!!'
- },
- methods: {
- test (){
- alert(1);
- }
- },
- compontents:{
- // 这里存放组件
- }
- });
- /* vm 就是 new 出来的实例 */
- console.log(vm.$data);// 也就是数据 data, 后面还有很多挂载在 vm(new 出来的)实例上的属性
- // 代码片段放在 template 标签里, 并给一个 id 名
- <body>
- <template id="tem">
- <p > 我是 template</p>
- </template>
- <div id="box">
- </div>
- </body>
- <script src="vue.js"></script>
- <script type="text/javascript">
- document.addEventListener('DOMContentLoaded',function () {
- var vm = new Vue({
- el: '#box',
- template: '#tem'
- });
- },false);
- </script>
3. 模版 render 函数
render 函数很接近编辑器
render => 选项对象属性
数据对象属性
class: {}, => 绑定 class, 和 v-bind:class 一样的 API
style: {}, => 绑定样式, 和 v-bind:style 一样的 API
attrs: {}, => 添加行间属性
domProps: {}, => DOM 元素属性
on: {}, => 绑定事件
nativeOn: {}, => 监听原生事件
directives: {}, => 自定义指令
scopedSlots: {}, => slot 作用域
slot: {}, => 定义 slot 名称 和组件有关系, 插曹
key: "key", => 给元素添加唯一标识
ref: "ref", => 引用信息
2Vue.js 的条件循环语句
2-1 条件语句
v-if : 根据值的真假, 切换元素会被销毁重建; => 在 dom 中已消失
v-show : 根据值的真假, 切换元素的 display 属性;
v-else : 条件都不符合时渲染;
v-else-if : 多条件判断, 为真则渲染;
一 V-if
条件判断使用 v-if 指令:
- <div id="app">
- <p v-if="seen">现在你看到我了</p>
- <template v-if="ok">
- <p > 哈哈哈, 打字辛苦啊!!!</p>
- </template>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- seen: true,
- ok: true
- }
- })
- </script>
这里, v-if 指令将根据表达式 seen 的值 (true 或 false ) 来决定是否插入 p 元素
二 v-else
可以用 v-else 指令给 v-if 添加一个 "else" 块:
随机生成一个数字, 判断是否大于 0.5, 然后输出对应信息:
- <div id="app">
- <div v-if="Math.random() > 0.5">
- Sorry
- </div>
- <div v-else>
- Not sorry
- </div>
- </div>
- <script>
- new Vue({
- el: '#app'
- })
- </script>
三 v-show
我们也可以使用 v-show 指令来根据条件展示元素:
- <div id="app">
- <h1 v-show="ok">Hello!</h1>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- ok: true
- }
- })
- </script>
四 v-else-if
v-else-if 在 2.1.0 新增, 顾名思义, 用作 v-if 的 else-if 块可以链式的多次使用:
判断 type 变量的值:
- <div id="app">
- <div v-if="type ==='A'">
- A
- </div>
- <div v-else-if="type ==='B'">
- B
- </div>
- <div v-else-if="type ==='C'">
- C
- </div>
- <div v-else>
- Not A/B/C
- </div>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- type: 'C'
- }
- })
- </script>
[v-showv-if 的使用与比较]
v-show : 根据值的真假, 切换元素的 display 属性;
v-show 的元素会始终渲染并保持在 DOM 中
v-show 并不支持 template 语法
v-if 是真实的条件渲染, 因为他会确保条件块在切换当中适当的销毁与重建条件块内的事件监听器和子组件
v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗
如果需要频繁切换使用 v-show 更好, 如果在运行时条件不大可能改变, 使用 v-if 比较好
2-2 循环语句 v-for
语法: v-for="x in items"
x 是索引; items 是数组, 这样进行遍历
v-for 循环是不断创建新的标签, 标签里的内容, 我们决定, 一般都是放在数组里, 然后遍历显示出来也可以放对象 , 遍历对象
当 v-if 与 v-for 一起使用时, v-for 具有比 v-if 更高的优先级
- <body>
- <div id="app">
- <ul>
- <li v-for="(val,key) in fruitsArr">{{ val }} => {{ key }}</li> // 循环出来的列表项
- </ul>
- </div>
- </body>
- <script src="../vue.js"></script>
- <script type="text/javascript">
- document.addEventListener('DOMContentLoaded',function () {
- var vm = new Vue({
- el: '#app',
- data:{
- fruitsArr:['apple','banana','orage','pear'] // 数据源
- }
- });
- },false);
- </script>
总结
以上所述是小编给大家介绍的 Vue.js 用法详解, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/18/0221/360826.html