Vue的常用语法
Posted lyfstorm
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue的常用语法相关的知识,希望对你有一定的参考价值。
cdn(在线的网络连接资源):https://www.bootcdn.cn/
1,Vue的简介
Vue (读音 /vju?/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层(指的是前端页面,即MTV中的T—>template模板)。
2,vue&react&angular对比
-
vue是江苏无锡?尤?溪带头发明的前端轻量级的框架。目前 vue的版本是2.6.10
-
react是Facebook公司发明的框架,目前react的版本是 react16
-
angular是谷歌公司发明的框架,目前angular是6.0版本
3,下载&库引入
Vue.js类似于jQuery.js,是一个库,在html文档中直接使用script引入就能使用了.
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
引入之后,将该HTML文档使用浏览器打开,鼠标右键"检查",选择Console,输入Vue,显示页面上定义了一个Vue函数.
>> Vue << ƒ Vue (options) { if (!(this instanceof Vue) ) { warn(‘Vue is a constructor and should be called with the `new` keyword‘); } this._init(options); }
使用的时候需要先新建一个Vue实例,数据(创建Vue实例的参数中找)驱动视图(标签).下面是一个完整的HTML文件的栗子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <!--视图--> <!-- 模板语法插值: {{ }}表示插值语法 --> <h3>{{ msg }}</h3> </div> <!-- 1.引包 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script type="text/javascript"> //实例化Vue let vm = new Vue({ el: ‘#app‘, //绑定根元素,使用标签选择器,这里是ID选择器 //数据 属性 data: { msg:‘alex是个?大SB‘,//声明数据属性 } }) </script> </body> </html>
4,模板语法介绍
<!--模板语法:注意前后都要加空格--> <h1>{{ 变量 }}</h1> <h1>{{ 1+1 }}</h1> <h1>{{ ‘hello‘ }}</h1> <h1>{{ 函数的调用 }}</h1> <h1>{{ {name:‘alex‘} }}</h1> 备注:对象 <h1>{{ 1==1?‘真的‘:‘假的‘ }}</h1> 备注:三元运算
v-text&v-html
v-text类似于双大括号,会将数据解释为普通文本—>只渲染文本
v-html输出HTML 代码—>既渲染文本又渲染标签
<body> <div id="app"> <!--视图--> <!-- 模板语法插值: {{ }}表示插值语法 --> <h3>{{ msg }}</h3> <!--等效于innerText innerHTML text() html()--> <h4 v-text = "name"></h4> <h4 v-html = "name"></h4> </div> <!-- 1.引包 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script type="text/javascript"> let vm = new Vue({ el: ‘#app‘, //绑定根元素,使用标签选择器,这里是ID选择器 //数据 属性 data: { msg:‘alex是个?大SB‘,//声明数据属性 name:‘<span>黄瓜</span>‘, } }) </script> </body>
v-if&v-show
v-if
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。
v-show
的元素始终会被渲染并保留在 DOM 中。v-show
只是简单地切换元素的 CSS 属性 display
。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"content="ie=edge"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: red; margin-bottom: 10px; } </style> </head> <body> <div id="app"> <div class="box" v-if=‘isShow‘></div> <div class="box" v-show=‘isShow‘></div> </div> <!-- 1.引包 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script type="text/javascript"> let vm = new Vue({ el: ‘#app‘, //绑定根元素,使用标签选择器,这里是ID选择器 //数据 属性 data: { isShow:true } }) </script> </body> </html>
页面显示效果如下:
如果将变量isShow改为false。
总结v-if
vs v-show:
v-if
对当前元素创建/销毁;v-show对当前元素显示/隐藏.
v-if
是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show
就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show
v-for遍历数组元素
我们可以用 v-for
指令基于一个数组来渲染一个列表。v-for
指令需要使用 item in items
形式的特殊语法,其中 items
是源数据数组,而 item
则是被迭代的数组元素的别名。
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>
var example1 = new Vue({ el: ‘#example-1‘, data: { items: [ { message: ‘Foo‘ }, { message: ‘Bar‘ } ] } })
结果:
-
Foo
-
在 v-for
块中,我们可以访问所有父作用域的属性。v-for
还支持一个可选的第二个参数,即当前项的索引。
<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>
var example2 = new Vue({ el: ‘#example-2‘, data: { parentMessage: ‘Parent‘, items: [ { message: ‘Foo‘ }, { message: ‘Bar‘ } ] } })
-
Parent - 0 - Foo
-
Parent - 1 - Bar
你也可以用 of
替代 in
作为分隔符,因为它更接近 JavaScript 迭代器的语法:
<div v-for="item of items"></div>
在 v-for 里使用对象
你也可以用 v-for
来遍历一个对象的属性。
<ul id="v-for-object" class="demo"> <li v-for="value in object"> {{ value }} </li> </ul>
new Vue({ el: ‘#v-for-object‘, data: { object: { title: ‘How to do lists in Vue‘, author: ‘Jane Doe‘, publishedAt: ‘2016-04-10‘ } } })
-
How to do lists in Vue
-
Jane Doe
-
2016-04-10
你也可以提供第二个的参数为 property 名称 (也就是键名):
<div v-for="(value, name) in object"> {{ name }}: {{ value }} </div>
title: How to do lists in Vue
author: Jane Doe
publishedAt: 2016-04-10
<div v-for="(value, name, index) in object"> {{ index }}. {{ name }}: {{ value }} </div>
结果: