vue前期准备以及常用指令

使用less语法，项目中下载模块

npm i less@3.0.4    less-loader@5.0.0 -D

更改淘宝镜像 

 $ npm config set registry  https://registry.npm.taobao.org/  #设置淘宝镜像地址

查看镜像
 

$ npm config get registry  #查看镜像地址

全局安装命令

yarn global add @vue/cli
npm install -g @vue/cli

查看vue 脚手架版本 

vue --version
vue -v

创建项目

vue create （+文件名）

启动内置热更新本地    
 

cd （+文件名）         npm run serve  或者 yarn serve

        VUE常用指令
    1.v-bind    
        1.）目标    ：    给标签属性设置vue中data变量的值
        2.）语法    ：    v-bind ：属性名=‘vue变量’
        3.）简写    ：    属性名=‘vue变量’
    2.v-on
        1.）目标    ：    给标签绑定事件
        2.）语法    ：    v-on:事件名="要执行的==少量代码=="
        3.）简写    ：    @事件名 ="methodes中的函数"
    3.v-on 事件对象
        1.）目标    ：    vue事件处理函数中，拿到事件对象
        2.）语法    ：    a.）无传参，通过形参直接接收    b.）传参，通过$event只待时间对象传给事件处理函数
    4.v-on修饰符
        1.）目的    ：    在事件后面，修饰符名 - 给事件添加功能
        2.）语法    ：    @事件名.修饰符="methods里函数"
            a.)：    .stop    阻止事件冒泡
            b.):    .prevent    阻止默认行为
            c.):    .once    程序运行期间只触发一次事件处理函数
    5.v-one按键修饰符
        1.目标    ：    给键盘事件添加修饰符，增强能力
        2.语法    ：    @keyup.enter     检测回车按键
                @keyup.esc    检测返回按键
    6.v-model
        1.目标    ：    吧value 属性和vue数据变量 双向绑定带一起
        2.语法    ：    v-model="vue数据变量"
        3.双向数据绑定
            a.)数据变化——>视图自动同步
            b.)视图变化——>数据自动同步
    7.v-model
        1.语法    v-model.修饰符="vue数据变量"
            a.)  .number    以parseFloat转成数字类型
            b.)  .trim        取出首尾空白字符
            c.)  .lazy        在失去焦点时触发更改而非input时
    8.v-text 和v-html
        1.目的    ：    更新DOM对象的innerText/innerHTML
        2.语法    ：    a.)v-text="vue数据变量"    b.)v-html="vue数据变量"
        3.注意    ：    会覆盖表达式
    9.v-show和v-if
        1.目标    ：    控制标签的隐藏或出现
        2.语法    ：    a.)v-show="vue变量"     b.)v-if="vue变量"、
        3.高级    ：    v-else-if
    10.v-for
        1.目标    ：    列表渲染所在标签结构 按照数据数量循环生成
        2.语法    ：    a.)v-for="(值，索引)in目标结构"         b.)v-for="值in目标结构"
        3.目标结构  可以遍历数组 对象 数字