好吧, 开始搞vue.js了,
主要是用于自己做个整理.
看了下很像angular.js很久之前用过, 不过现在忘得差不多了, 原理都差不多,应该学起来也挺快.
似乎得好好梳理后才能写, 先做成笔记吧
1: 声明式渲染
// html
<div id="app">
{{message}}
</div>
// js
var myapp = new Vue({
el: "#app",
data: {
message: "这个是声明是渲染"
}
})
可以看到双花括号{{}}中的值可以去js中对应el: id名字正确的构造函数中的data对象中找对应的键值, 并显示在页面上
2: 指令: v-bind:属性(class, style value, src....) / prop()
//html
<div class="item">
<p>v-bind="绑定的变量" 指令</p>
<div id="app2">
<span v-bind:title="message">
这个也是声明是渲染, 只不过使用了V-bind指令绑定了spand的title属性,
</span>
</div>
</div>
//js
let app2 = new Vue({
el: '#app2',
data: {
message: 'test'
}
})
- 用于给一个标签动态添加某个属性,
- 简写, 绑定class可见写为
:class="lala" - 还有多种组合方法:
v-bind:class="imageA"-
:class="{ red: isRed }"(js中isRed 为true,或者false) -
:class="[classA, classB]"(js中classA, classB为键名对应的值是类名) -
:class="[classA, { classB: isB, classC: isC }](上面两种的结合) -
class="static" v-bind:class="{ active: true }"(与已有class共存, <div class="static active"></div>) -
v-bind="{ id: someProp, 'other-attr': otherProp }"(属性的集合) -
:style="{ fontSize: size + 'px' }"(css样式要驼峰命名, size是变量) -
:style="[styleObjectA, styleObjectB]"(styleObjectA 和 styleObjectB是对象中的键名) - (还有其他的, 之后再添加上)
