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]> 绑定多个属性用数组方法

巴特西

vue入门笔记

最新文章

热门文章