如何快速上手一个vue框架

安装nvm

下载nvm-setup.zip：

https://github.com/coreybutler/nvm-windows/releases

解压安装nvm：

创建两个文件夹，一个是nvm的安装位置，另一个是node.js的下载位置。不需要配置环境变量和修改setting文件了

检查nvm是否安装成功：

window+r输入：cmd
nvm -v

下载使用node.js:

window+r 输入：cmd
nvm list available    --查看网络可以安装的版本
nvm install           --要下载的node.js 的版本
nvm ls                --查看已经安装好的所有node.js的版本
nvm use node.js 的版本 -- 切换使用node.js的版本
nvm uninstall         --删除不要的版本

检查node和npm：

window+r 输入：cmd
node -v     --查看node的版本
npm -v      --查看npm的版本

创建vue3项目：

第一种方式创建vue3项目：

--在cmd窗口里面：
npm init vue@latest
cd 创建好的项目名字
npm/cnpm i    --下载依赖
npm run dev   --运行项目

第二种方式创建vue3项目：

--在cmd窗口里面
① vue create 项目名字
② 选择vue2或者vue3
③ cd 刚刚创建的项目
④ npm run serve

vs Code快速生成vue代码块：

第一步：

ctrl+shift+p

第二步：

输入：snippets
选择配置用户代码块：

第三步：

输入：vue
选择新建，全局代码片段文件(名字自己起)

第四步：

把下面的复制到里面去

{"Print to console": {"prefix": "vue","body": ["<template>","","</template>","","<script>","export default {","}","</script>","","<style>""","</style>"],}
}

测试：

在新建的 xxx.vue组件里面
输入：vue 回车即可

vue3项目的目录结构：

目录结构解释：

.vscode        --vscode工具的配置文件
node_modules   --Vue项目的运行依赖文件
public         --资源文件（浏览器图标）
src            --源码文件夹
.gitignore     --git忽略文件
index.html     -- HTML文件
package.json   --信息描述文件
README.md      --注释文件
vite.config.js --vue配置文件

删除项目一些原有的页面：

在写项目前，把components里面所有的内容先删除掉：

删除完之后点击app.vue会报错，把所有关于，关于刚才删除的信息引用都删除掉。

删除成这个样子

运行查看项目：

然后运行项目，在浏览器查看删除后的效果：

删除全局css样式：

然后在把一些css样式删除掉，找到main.js:

删除里面的 import './assets/main.css'

在把下面公共资源文件夹下面的，base.css，logo.svg，main.css删掉：

模板语法：

vue使用一种基于HTML的模板语法，使我们能够声明式的将器组件实例的数据呈现到DOM上，所有的vue模板语法层面合法的html，可以被符合规范的浏览器和ltml解析器解析。

文本插值：

最基本的数据绑定形式是文本插值，它使用的是‘’Mustache‘语法（即双大括号）：

响应式数据：

在data中声明的数据，通过{{}}（模板语法绑定的数据）

在App.vue里面写的：

<template><h3>模板语法：</h3><p>{{ msg }}</p>
</template>

<script >
export default {data(){return{msg:'我是模板取值的',hello:'你好世界'}}
}

</script>

浏览器运行效果：

使用JavaScript表达式：

每个绑定仅支持单一表达式，也就是说一段能够被求值的JavaScript代码。一个简单的判断方法是否可以合法的写在 return 后面

有效的：

<template><h3>模板语法：</h3><p>{{ msg }}</p><p>{{ num +1 }}</p><p>{{ flag ? 'yse' : 'no' }}</p><p>{{message.split('').reverse().join('')}}</p>
</template>

<script >
export default {data(){return{msg:'我是模板取值的',num:10,flag:true,message:'大家好'}}
}

</script>

浏览器运行效果：

无效的：

这样写会报错

<!-- <p>{{ var a = 1 }}</p> --><!-- <p>{{ if(flag){return message} }}</p> -->

原始HTML：

双大括号会将数据插值为纯文本，而不是HTML。若想插入HTML，需要使用 v-html 指令：

<template><p>{{url}}</p>
<p v-html="url"></p>
</template>

<script>
data(){return{url:"<a href='http://www.baidu.com>百度</a>'"}
}
</script>

效果：

属性绑定：

双大括号不能在html attribute中使用。想要响应式地绑定一个attribute，因该使用 v-bind 指令。

v-bind

<template><!-- 这个显示不出来 --><div class="{{ msg }}">测试</div> <!-- 这样可以添加上id --><div v-bind:id="addId">测试2</div><!-- 这样可以添加上class --><div v-bind:class="msg">测试3</div>
</template>

<script >
export default {data(){return{msg:'hello world',addId:'addId'}}
}

</script>

v-bind 指令指示，Vue将该元素的 id attribute 与组件 addId 保持一致。如果绑定的值是 null 或者 undefined ，那么该attribute将会从渲染的元素是移除。

简写：

因为 v-bind 非常的常用，我们提供了特定的简写方法。

<div :id="addId" :class="msg"></div>

测试：

<template><!-- 加上null --><div :title="addTitle">测试4</div><!-- 按钮 --><button :disabled="isDisabled">按钮</button>
</template>

<script >
export default {data(){return{addTitle:null,isDisabled:true,}}
}

</script>

效果：

布尔型 Attribute

布尔型 attribute 依据 true/false 值来决定 attribute是否应该存在于，该与元素上，disabled就是最常见的例子。

<template><!-- 按钮 --><button :disabled="isDisabled">按钮</button>
</template>

<script >
export default {data(){return{isDisabled:true,}}
}

</script>

动态绑定多个值：

如果我有想这样一个包含多个attribute的JavaScript对象：

<template><!-- 动态绑定多个值 --><div v-bind="objectAdd">测试</div></template>

<script >
export default {data(){return{objectAdd:{class:'helloClass',id:'helloId'}}}
}

</script>

测试：

条件渲染：

在vue中，提供了条件渲染，类似于

JavaScript中的条件语句。

v-if

v-else

v-else-if

v-show

v-if

v-if:指令用于条件性的渲染一块内容，这块内容只会在指令的表达式返回值为true时，才被渲染：

<template><h3>条件渲染</h3><!-- v-if 和v-else --><div v-if="flag">你能看见我吗？</div><div v-else="flag">那你还是看看我吧</div><!-- v-if-else-if --><div v-if="type === 'A'">A</div><div v-else-if="type === 'B'">B</div><div v-else="type === 'C'">C</div><div v-else>not A/B/C</div>
</template>

<script>export default{data(){return{flag:false,type:"D"}}}
</script>

效果：

v-show

另一个可以用来按条件显示一个元素的指令是 v-show，用法一样

<template><h3>条件渲染</h3>
<!-- v-show -->
<div v-show="flag">你能看见我吗</div>

<div></div>
</template>

<script>export default{data(){return{flag:true,}}}
</script>

效果：

v-if VS v-show 的区别：

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。vf也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为true时才被渲染。

相比之下，v-show简单许多，元素无论初始条件如何，始终会被渲染，只有CSS display属性会被切换。总的来说，v-if 有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要频繁切换，则使用v-show较好；如果在运行时绑定条件很少改变，则 v-if会更合适

列表渲染：

v-for

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据，而item是迭代的别名。

<template><h3>列表渲染</h3><p v-for="item in names">{{ item }}</p>
</template>

<script>
export default{data(){return{names:['道恩','你好','金刚','IT']}}
}
</script>

效果：

复杂数据：

大多数情况下，我们渲染的数据来源于网络请求，也就是json格式：

<template><h3>列表渲染</h3><p v-for="item in names">{{ item }}</p><div v-for="item in result"><p>{{ item.id }}</p><p>{{ item.title }}</p><a :href="item.url"  alt="">链接</a></div>
</template>

<script>
export default{data(){return{names:['道恩','你好','金刚','IT'],result:[{"id":1111,"title":'河南河南，的时刻近乎疯狂的撒JFKv接                                    口是否',"url":'http://www.baidu.com'},{"id":2424,"title":'悲伤的故事大纲公司',"url":'http://www.baidu.com'},{"id":7645,"title":'放松的地方是的夫是德国',"url":'http://www.baidu.com'} ]}}
}
</script>

效果：

v-for 也支持使用可选的第二个参数表示当前的位置索引：

<p v-for="(item,index) in names">{{ item }}:{{ index }}</p>

v-for 也可以使用 of 作为分隔符来替代 in ，这更接近与JavaScript的迭代器语法。

<p v-for="item of names">{{ item }}</p>

v-for 与对象：

<template><h3>列表渲染</h3><p v-for="item of userInfo">{{ item }}</p><p v-for="(value,key,index) of userInfo ">{{value}}--{{ key }}--{{ index }}</p>
</template>

<script>
export default{data(){return{userInfo:{name:'孙道恩',age:18,sex:'男'}}}
}
</script>

效果：

通过key管理状态：

Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue不会随之移动DOM元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

为了给Vue一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute:

<template><h3>key属性添加到v-for中</h3><p v-for="(item,index) of names" :key="index">{{ item }}</p>
</template>

<script>export default{data(){return{names:['孙道恩','IT','大神']}}}

</script>

效果：

提示：

key在这里是一个通过 v-bind 绑定的特殊 attribute
推荐在任何可行的时候为v-for提供一个key attribute
key绑定的值期望是一个基础类型的值，例如字符串或 number 类型

key的来源：

请不要使用index作为key的值，我们要确保每一条数据的唯一索引不会发生变化。

比如在原来的数组数据，前面添加数据，原来的下标为0的，新增完数据后，原来为0的下标就不为0了。

<div v-for="(item,index) of result" :key="item.id"><p>{{ item.title }}</p><a :href="item.url">链接</a></div>

事件处理：

v-on

我们可以使用 v-on 指令（简写为 @ ）来监听事件，并在事件触发时执行对应的JavaScript。

用法： v-on:click="methodName" 或者 @click="methodName"

事件处理器的值可以是：

① 内联事件处理器：事件被触发时执行的内联JavaScript 语句（与onclick 类似）
② 方法事件处理器：一个指向组件上定义的方法的属性名或是路径

内联事件处理器：

内联事件处理器通常使用的简单场景：

<template><h3>内联事件处理器</h3><!-- <button v-on:click="count++">Add</button> --><!-- 简写 --><button @click="count++">Add</button><p>{{ count }}</p>
</template>

<script>export default{data(){return{count:0,}}}
</script>

效果：

方法处理器：

<template><h3>内联事件处理器</h3><!-- <button v-on:click="count++">Add</button> --><!-- 简写 --><button @click="addCount">Add</button><p>{{ count }}</p>
</template>

<script>export default{data(){return{count:0,}},//所有的方法和函数都在这里methods:{addCount(){console.log('被点击了');//读取到data里面的数据方案： this.countthis.count++;}}}
</script>

效果：