Vue简明笔记

vue火了很久，以前粗略了解过，没有仔细学。编程就是这样，要是用不上，学的没几天就忘光了。现在终于有项目要用到，才又拾了起来。
一直用jquery，这次项目也是，由于需要频繁的操作及生成、删除dom，陷入了jq的海洋出不来，才想起vue在这方面的优势和便捷。在这里做个粗略的笔记以备忘，希望这次边学边实操，能把vue用的得心应手。

1、模版语法

2、v-指令

2.1 v-if

v-if 注意点

a, 对象都是true
b, 空字符串为false
c, null和undefined都是false
d, 数字0也是false

v-if v-else 用法

<div v-if="0">true显示文字</div>
<div v-else>false显示文字</div>

v-else-if 用法

...
const config = {
        el:'#root',
        data:{
            age:19,           
            test5:(age)=> age>19 ? true : false
        }
    };
new Vue(config)
...
<div v-if="test5(age)">大于19显示</div>
<div v-else-if="age == 19">等于19显示</div>
<div v-else>都不满足显示</div>

2. v-bind指令

// js 代码
    const config = {
        el:'#root',
        data:{
            test:()=>'test',
            my:'tutu',
            mini_prj:{
                name:'tutu',
                age:'3',
                baby:true
            }
        }
    };
    new Vue(config)

用于属性绑定，动态生成组件，看代码

    <input type="text" v-bind:value="test()">
    <input type="text" :value="my">
    <input type="text" :value="(()=>'1234')()">
    <div v-for="n in 5">
        <input type="text" :value="n">
    </div>

v-if v-for v-bind结合小案例

    <div v-for="(v, k) in mini_prj">
        <div v-if="typeof v == 'boolean'">{{k}}:<input type="checkbox" :checked="v"></div>
        <div v-else>{{k}}:<input type="text" :value="v"></div>
    </div>

vue-cli

1，安装

// 先安装nodejs  下载地址：https://nodejs.org/en/
// 安装完成后，运行
npm install -g @vue/cli

// 报错，安装失败
Unexpected end of JSON input while parsing near '...debug":"^4.1.0","deep'

// 清理缓存
npm cache clean --force

// 重新设置镜像
npm install --registry=https://registry.npm.taobao.org

// 重新执行安装
npm install -g @vue/cli
// 安装成功
vue --version
3.7.0

// 初始化一个webpack项目，报错
vue init webpack myprj
  Command vue init requires a global addon to be installed.
  Please run npm install -g @vue/cli-init and try again.
// 根据提示执行
npm install -g @vue/cli-init
// 重新初始化项目
vue init webpack myprj
...
// 全部默认配置后，初始化成功
Project initialization finished!
// 启动项目，执行：
cd myprj
npm run dev

2 注意事项

拿到新的项目文件时，一般不包含node_modules文件，需要在新项目根目录下运行npm install 或 cpm install