首页 > 程序开发 > web前端 > HTML/CSS >

Vue.js基础知识

2017-03-10

Vue js基础知识,1、使用 v-html 指令用于输出 html 代码。

Vue.js基础知识

1、使用 v-html 指令用于输出 html 代码

<div v-html="message"></div>

2、HTML 属性中的值应使用 v-bind 指令

<div v-bind:class="{&#39;class1&#39;: class1}"> new Vue({ el: &#39;#app&#39;, data:{ class1: false } });

text-danger 类背景颜色覆盖了 active 类的背景色:
<div class="static" v-bind:class="{ active: isActive, &#39;text-danger&#39;: hasError }"></div>

new Vue({
el: &#39;#app&#39;,
data: {
isActive: true,
hasError: true
}
})

也可以直接绑定数据里的一个对象:

<div v-bind:class="classObject"></div>

new Vue({
el: &#39;#app&#39;,
data: {
classObject: {
active: true,
&#39;text-danger&#39;: true
}
}
})

2.1 Vue.js style(内联样式) 可以在 v-bind:style 直接设置样式:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }">菜鸟教程</div>

也可以直接绑定到一个样式对象,让模板更清晰:<div v-bind:style="styleObject">菜鸟教程</div>

new Vue({
el: &#39;#app&#39;,
data: {
styleObject: {
color: &#39;green&#39;,
fontSize: &#39;30px&#39;
}
}
})

v-bind:style 可以使用数组将多个样式对象应用到一个元素上 <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>

new Vue({
el: &#39;#app&#39;,
data: {
baseStyles: {
color: &#39;green&#39;,
fontSize: &#39;30px&#39;
},
overridingStyles: {
&#39;font-weight&#39;: &#39;bold&#39;
}
}
})

3、v-on 指令,它用于监听 DOM 事件

<a v-on:click="doSomething">

4、Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。由"管道符"指示, 格式如下:

<!-- 在两个大括号中 --> {{ message | capitalize }}
<!-- 在 v-bind 指令中 --> <div v-bind:id="rawId | formatId"></div>

过滤器可以串联:{{ message | filterA | filterB }}
过滤器是 Java/" target="_blank">JavaScript 函数,因此可以接受参数:{{ message | filterA(&#39;arg1&#39;, arg2) }}

5、组件(Component) 组件可以扩展 HTML 元素,封装可重用的代码。

注册一个全局组语法格式如下:
Vue.component(tagName, options)
tagName 为组件名,options 为配置选项。注册后,我们可以使用以下方式来调用组件:
<tagName></tagName>

// 注册
Vue.component(&#39;runoob&#39;, {
template: &#39;<h1>自定义组件!</h1>&#39;
})
// 创建根实例
new Vue({
el: &#39;#app&#39;
})

局部组件

var Child = {
template: &#39;<h1>自定义组件!</h1>&#39;
}

// 创建根实例
new Vue({
el: &#39;#app&#39;,
components: {
// <runoob> 将只在父模板可用
&#39;runoob&#39;: Child
}
})

6、prop 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop":&lsquo;下面的message就是prop&#39;

<div id="app">
<child message="hello!"></child>
</div>
<script>
// 注册
Vue.component(&#39;child&#39;, {
// 声明 props
props: [&#39;message&#39;],
// 同样也可以在 vm 实例中像 “this.message” 这样使用
template: &#39;<span>{{ message }}</span>&#39;
})
// 创建根实例
new Vue({
el: &#39;#app&#39;
})
</script>

相关文章
最新文章
热点推荐