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
        修剪前后字符串的空格
原文地址:https://www.cnblogs.com/tis100204/p/10309901.html