• 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
            修剪前后字符串的空格
  • 相关阅读:
    题解 P2810 【Catch the theives】
    2020.11.27 考试题解
    2020.11.25 考试题解
    题解 SP16254 【RMID2
    2020.11.24 考试题解
    2020.11.23 考试题解
    CSP-2020 T3 函数调用
    二维树状数组学习笔记
    题解 P4910 【帕秋莉的手环】
    Python实现向指定IP的目标机器拷贝文件
  • 原文地址:https://www.cnblogs.com/tis100204/p/10309901.html
Copyright © 2020-2023  润新知