vue 初级小总结
(1)插值,即渲染文本
文本:数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值
<h1>{{ message }}</h1>
data() {
return { message: 'hello vue'}
}
html : 通过v-html 指令用于输出html代码
<div v-html="messageHtml" ></div>
data() {
return { messageHtml : '<h1>我是要被渲染的html</h1>'}
}
(2)属性,class
html中的属性使用v-bind指令
以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类:
.class2{
background: #444;
color: #eee;
}
<div v-bind:class="{'class2': class1}">
directiva v-bind:class
</div>
(3)表达式: vue完全支持javaScript语法
<div id="app">
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
data: {
ok: true,
message: 'RUNOOB',
id : 1
}
(4)指令:
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子:
<div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> <p>学的不仅是技术,更是梦想!</p> <p>哈哈哈,打字辛苦啊!!!</p> </template> </div> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) </script>
这里, v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
(5)参数:参数在指令后以冒号指明。例如, v-bind 指令被用来响应地更新 HTML 属性:
<div id="app"> <pre><a v-bind:href="url">菜鸟教程</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.runoob.com' } }) </script>
绑定,即bind后面的href参数绑定了url的值
另一个例子是 v-on 指令,它用于监听 DOM 事件:
<a v-on:click="doSomething">
在这里参数是监听的事件名。
修饰符
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指定应该以特殊方式绑定。例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
<form v-on:submit.prevent="onSubmit"></form>
(6)用户输入--input
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定:
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' } }) </script>
eg:
在用户点击按钮后对字符串进行反转操作: <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转字符串</button> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script>
标签内使用{{}},标签上使用"",模板内不需要加this,在导出的js语句中使用this。react中全程使用this绑定上下文,因为react是js渲染,vue使用的是模板字符串,所以在模板中不需要使用this进行绑定上下文。
(6)过滤器
vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。由"管道符"指示, 格式如下:
<!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bind 指令中 --> <div v-bind:id="rawId | formatId"></div>
eg:
<div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>
过滤器可以串联:
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数,因此可以接受参数:
{{ message | filterA('arg1', arg2) }}
这里,message 是第一个参数,字符串 'arg1' 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
缩写
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写:
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on 缩写
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
posted on 2018-06-09 19:40 Diamond_xx 阅读(515) 评论(0) 编辑 收藏 举报
苏安年
188***625@qq.com
给元素绑定href时可以也绑一个target,新窗口打开页面。
new Vue({ el: '#app', data: { url: 'http://www.runoob.com', target:'_blank' } })
尝试一下 »
苏安年
188***625@qq.com
锋
cka***ng@qq.com
参考地址
当我们给一个比如 props 中,或者 data 中被观测的对象添加一个新的属性的时候,不能直接添加,必须使用 Vue.set 方法。
Vue.set 方法用来新增对象的属性。如果要增加属性的对象是响应式的,那该方法可以确保属性被创建后也是响应式的,同时触发视图更新
这里本来 food 对象是没有 count 属性的,我们要给其添加 count 属性就必须使用 Vue.set 方法,而不能写成 this.food.count = 1
Vue.js 条件与循环
条件判断
v-if
条件判断使用 v-if 指令:
v-if 指令
在元素 和 template 中使用 v-if 指令:
在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:
v-if v-else-if
v-show: 不占位置,v-if 不占位置
我们也可以使用 v-show 指令来根据条件展示元素:
循环语句
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表:
模板中使用 v-for:
v-for 迭代对象
v-for 可以通过一个对象的属性来迭代数据:
Vue.js 计算属性
计算属性关键词: computed。
计算属性在处理一些复杂逻辑时是很有用的。
可以看下以下反转字符串的例子:
实例 2 中声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message,在 vm.message 发生改变时,vm.reversedMessage 也会更新
computed vs methods
我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。
可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性
computed setter
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
computed setter
computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter :
从实例运行结果看在运行 vm.site = '菜鸟教程 http://www.runoob.com'; 时,setter 会被调用, vm.name 和 vm.url 也会被对应更新。
Vue.js 监听属性
本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化:
以上代码中我们创建了两个输入框,data 属性中, kilometers 和 meters 初始值都为 0。watch 对象创建了两个方法 kilometers 和 meters。
Vue.js 样式绑定
Vue.js class
class="类名"
:class={"类名" : true}
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。
Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。
class 属性绑定
我们可以为 v-bind:class 设置一个对象,从而动态的切换 class:
以上实例 div class 为:
<div class="active"></div>
我们也可以在对象中传入更多属性用来动态切换多个 class 。
以上实例 div class 为:
<div class="static active text-danger"></div>
我们也可以直接绑定数据里的一个对象:
此外,我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式:
数组语法
我们可以把一个数组传给 v-bind:class ,实例如下:
我们还可以使用三元表达式来切换列表中的 class :
Vue.js style(内联样式)
我们可以在 v-bind:style 直接设置样式:
也可以直接绑定到一个样式对象,让模板更清晰:
v-bind:style 可以使用数组将多个样式对象应用到一个元素上: