5分钟入门Vue

Vue基础语法

Vue是什么？

组件化开发模式，基于数据驱动

官网：https://cn.vuejs.org

创建第一个Vue实例

el:vue实例与挂载点绑定

data:存放数据

挂载点，模板与实例

挂载点：页面的某个dom元素与vue实例中el属性绑定的称为挂载点 vue实例只作用于挂载点下。

模板：挂载点下的html标签称为模板。可以将模板放到vue实例中。

vue实例： 将数据作用到挂载点的模板中。

Vue实例中的数据，事件和方法

vue实例中的数据显示到挂载点方法

插值表达式{{key}}

<h1>{{number}}</h1>

vue指令：

<h1 v-text=”number”></h1>

<h1 v-html=”number”></h1>

事件： 点击hello,变成world

v-on:click=”方法名”,简写@click=”方法名”

vue中的事件都会在methods中定义。

Vue中属性绑定和双向数据绑定

属性绑定：v-bind

‘v-bind:’ 可以简写为 ‘:’

v-bind:title=”title”,title为vue实例中data的title

总结：使用模板指令后，指令等号后的表达式为js表达式，不再是简单的字符串；

双向绑定

单向绑定：数据决定页面的显示内容，当时页面无法决定数据的内容。

比如：input内容变化并没有导致vue实例中的数据变化；

双向绑定： v-model

Vue中的计算属性和侦听器

计算属性：computed

一个属性值通过其他若干属性值计算而来，在计算过程中如果依赖的属性值没有变化它会使用之前计算的缓存值作为结果。

侦听器：

需求：当数据每改变一次都加1.

当页面中firstname或lastname发生变化，值加1

也可以侦听计算属性

v-if,v-show与v-for指令

需求：点击toggle按钮，控制文本的显示与隐藏

v-if

true:显示

false:隐藏，直接接元素从dom中移除

v-show

true:显示

false:隐藏，为元素添加display:none属性

v-for

:key–提升渲染效率，其值要求唯一