1 使用 v-html 指令用于输出 html 代码
<div v-html="message"></div>
2HTML 属性中的值应使用 v-bind 指令
<div v-bind:class="{'class1': class1}"> new vue({ el: '#app', data:{ class1: false } });
text-danger 类背景颜色覆盖了 active 类的背景色:
- new Vue({
- el: '#app',
- data: {
- isActive: true,
- hasError: true
- }
- })
也可以直接绑定数据里的一个对象:
<div v-bind:class="classObject"></div>
- new Vue({
- el: '#app',
- data: {
- classObject: {
- active: true,
- 'text-danger': true
- }
- }
- })
2.1 vue.js style(内联样式) 可以在 v-bind:style 直接设置样式:
<div v-bind:style="{ color: activeColor, fontSize: fontSize +'px'}"> 菜鸟教程 </div>
也可以直接绑定到一个样式对象, 让模板更清晰: 菜鸟教程
- new Vue({
- el: '#app',
- data: {
- styleObject: {
- color: 'green',
- fontSize: '30px'
- }
- }
- })
v-bind:style 可以使用数组将多个样式对象应用到一个元素上 <div v-bind:style="[baseStyles, overridingStyles]"> 菜鸟教程 </div>
- new Vue({
- el: '#app',
- data: {
- baseStyles: {
- color: 'green',
- fontSize: '30px'
- },
- overridingStyles: {
- 'font-weight': 'bold'
- }
- }
- })
3v-on 指令, 它用于监听 DOM 事件
<a v-on:click="doSomething">
4Vue.js 允许你自定义过滤器, 被用作一些常见的文本格式化由 "管道符" 指示, 格式如下:
{{ message | capitalize }}
过滤器可以串联:{{ message | filterA | filterB }}
过滤器是 /"target="_blank">JavaScript 函数, 因此可以接受参数:{{ message | filterA('arg1', arg2) }}
5(Component) 组件可以扩展 HTML 元素, 封装可重用的代码
注册一个全局组语法格式如下:
Vue.component(tagName, options)
tagName 为组件名, options 为配置选项注册后, 我们可以使用以下方式来调用组件:
- // 注册
- Vue.component('runoob', {
- template: '自定义组件!'
- })
- // 创建根实例
- new Vue({
- el: '#app'
- })
局部组件
- var Child = {
- template: '自定义组件!'
- }
- // 创建根实例
- new Vue({
- el: '#app',
- components: {
- // 将只在父模板可用
- 'runoob': Child
- }
- })
6prop 是父组件用来传递数据的一个自定义属性父组件的数据需要通过 props 把数据传给子组件, 子组件需要显式地用 props 选项声明 "prop": 下面的 message 就是 prop'
- // 注册
- Vue.component('child', {
- // 声明 props
- props: ['message'],
- // 同样也可以在 vm 实例中像 this.message 这样使用
- template: '{{ message }}'
- })
- // 创建根实例
- new Vue({
- el: '#app'
- })
来源: http://www.2cto.com/kf/201703/608954.html