vue基础

vue是一个渐进式框架

渐进式：提供了最基本的功能，主要的功能需要自己添加。

                  弱主张，一个轻量级的框架

                  是一个数据驱动的MVVM框架

                  M：（model）处理数据的模型层

                  V：（view）数据的视图层

                  VM：（）视图模型  当数据变化时把数据变化渲染到视图上

 

zepto是一个逐渐增强的框架

 

vue的环境搭建

npm init -y     初始化包

vue init webpack    创建项目

npm run dev    启动项目

cnpm i vue-jsonp --save    跨域包

cnpm i axios --save    请求数据

cnpm i vuex --save    仓库

cnpm i node-sass sass-loader --save    sass包

 

 

方法

$mount()  ===  el:"#**"

    将vue实例挂载到某个元素上，不能是body和html

 

 

数据

放在data中，data是一个对象

 

模板

{{差值表达式}}中显示变量

放置差值表达式的html叫模板（template）

优先显示实例中的template，template中没有，才会找挂载到实例中的模板

 

提高性能

先做内存里的对象（虚拟DOMD）变化，然后在把变化的部分映射到真实DOM上（diff算法：对比变化的部分）

内存中的DOM和真实的DOM结构事一样的

 

常用指令  以v-开头

1、差值表达式中可以调用函数

2、v-bind（单项绑定） 简写成“：”

    v-bind:属性名=“变量”

    把变量绑定到节点属性上，不识别标签，数据变化视图会跟着变化，反之不会

3、v-html（单项绑定）

    v-html="变量"

    绑定html标签到节点上，可以识别标签，数据变化视图会跟着变化，反之不会

4、v-model(双向绑定)

    v-model=“变量”

    model起主导作用，会自动忽略v相关的数据/值，

        数据变化视图会跟着变化，视图变了数据也会变

5、v-if

        值为ture时，元素存在（渲染）；值为false时，元素不存在（不渲染）

6、v-show

        值为ture时，显示(display:block)；值为false时，隐藏（display:none）

7、v-for

        v-for="item in arr"    （循环数组）

        v-for="（value，key,index）in 对象"    （遍历对象）

        循环

8、v-on    简写成“@”

        v-on：事件名字=“事件处理函数”

        绑定事件

 

绑定样式

1、绑定style

    v-bind：style="{'css属性'：'属性值'}"

2、绑定类名（对象）

    v-bind:class=“{‘类名’：flag}”

3、绑定类名（数组）

    v-bind:class=“["类名1"，”类名2]...”

 

v-model的修饰符

1、v-model.number   

    自动绑定numder型数据

2、v-model.lazy

        光标离开后视图改变

3、v-model.trim

        修剪前后字符串的空格