vue入门笔记

vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，vue 被设计为可以自底向上逐层应用。vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与以及各种结合使用时，vue 也完全能够为复杂的单页应用提供驱动。

声明实例

new vue({
    el:",  绑定作用域
    data：放数据
    methods:事件函数
    computed:计算属性
    生命周期
    beforecreate:{}
})

methods 和 data中的变量不能重复

指令 

用之前需要先声明 实例
v-text 相当于 innertext
v-html 相当于 innerhtml 注意：内容按普通 html 插入 - 不会作为 vue 模板进行编译 。
v-for 循环

我们用 v-for 指令根据一组数组的选项列表进行渲染。

<p v-for="(item,$index) in arr"></p>
<p v-for="(item,$key,$index) in arr"></p> 
item:属性值 $key:属性名 $index:索引值

v-for 指令需要使用 item in items 形式的特殊语法，arr是源数据数组并且 item 是数组元素迭代的别名。　

 

v-on 绑定 语法糖缩写：@

<button v-on:click="btn" ></button>
<!--缩写-->
<button @click="btn" ></button>

 

v-show 显示/隐藏

根据表达式之真假值，切换元素的 display css 属性。当条件变化时该指令触发过渡效果。

v-show = true/false

v-if/v-if-else/v-else-if判断

 

前一兄弟元素必须有 v-if 或 v-else-if

<div v-if="type === 'a'">
  a
</div>
<div v-else-if="type === 'b'">
  b
</div>
<div v-else-if="type === 'c'">
  c
</div>

v-if和v-show区别

v-if是动态的向dom树内添加或者删除dom元素； 
v-show是通过设置dom元素的display样式属性控制显隐； 
v-if 只会加载真的部分 有缓存 消耗高 适合偶尔的显示隐藏切换
v-show 都会加载 没有缓存 消耗相对低 适合频繁的切换

v-model 双向绑定 和表单配合使用
下拉框 value>text

 

v-bind 属性绑定 动态地绑定一个或多个特性，或一个组件 prop 到表达式。

v-bind:class  语法糖缩写 :class

<p :style=[color,size]> 绑定多个属性用数组方法