Vue
1、Vue的介绍
Vue是构建用户界面（UI）JS库
1.1特点
- 体积小 打包之后只有20k
- 效率高 存在虚拟DOM，性能非常强
- 双向数据绑定 Vue数据跟页面DOM数据不分你我
- 生态丰富 基于Vue有很多插件跟UI库
1.2Vue的历史
发布草案：2013年
1.0版本发布：2015年10月
2.0版本发布：2016年10月 – 稳定版本2.6
3.0版本发布： 2020年
2、Vue的引入
2.1 本地引入
CDN引入:
下载到本地：
2.2脚手架的安装
vue的脚手架的作用：帮助我们快速构建Vue的基本项目目录
npm i @vue/cli -g 或 npm i -g @vue/cli
或
yarn add global @vue/cli
检查是否安装成功：
vue --version // @vue/cli 5.0.8
yarn环境变量配置
yarn global bin 查看yarn的安装地址 ******
我的电脑 -->右键属性 -->高级系统配置 -->环境变量 -->配置path ******
2.3 创建Vue项目
vue create 项目名 -- vue create demo-test -- vue create demo
创建过程中有一堆选项：
注意：如果你想从头在来
C:\Users\你的电脑名字 删除vuerc文件就可以了
创建项目时的问题：
1、没有安装node.js => 安装node.js
2、没有配置yarn环境变量 => 配置系统变量 见：yarn环境变量配置
3、vue不能识别 没有安装vue脚手架
3.0 项目目录介绍
3.1 一级目录
内容详解：
3.2 二级目录
main：是整个项目的入口文件
App：是项目的根组件
4.0 组件
4.1 组件化开发
概念：前端大型项目可以理解为拼积木，把大型项目拆分为一堆小的组件，使用这些组件组合成一个完整的项目，这就是组件化开发（相当于拼积木）
-
可重用
-
可组合
-
易维护
4.2 单文件组件
一个**.vue**文件就是一个单文件组件
结构 — html
交互 — js
样式 — css
<template> // 写html的地方
<div class="title"> // 可以理解成加强版html 还可以写很多vue提供的api 比如 v-for v-if v-model
<h1>我是单页面文件</h1>
</div>
// 每个组件只能有一个根文件
</template>
// JS内容
<script>1
// 暴露出去一个组件类实例对象 new 组件类()
export default { // 可以在里面写上Vue的配置选项 内置的 直接用就可以
// 数据
data(){
return {
// 数据
}
},
// 方法们
methods:{
}
}
</script>
/* CSS内容 */
<style lang="less" scoped>
// lang="less"
// 阻止样式仅在当前组件内部有效
</style>
注意：
推荐插件：
Vetur 颜色插件
Vue vscode snippets 快捷键插件
path 路径提示插件
5.0 Mustach胡须表达式
语法：胡须表达式
{{ 表达式 }} `${ 表达式 }`
var a = 10
表达式：
1.只能是一句代码，并且返回唯一的结果
2.只能存在赋值表达式右侧
举例：
{{ a }} 可以
{{ num1+num2+num3 }} 可以
{{ str.slice(0.5) }} 可以
{{ if(true){return 100} }} 不可以
{{ true?'1':'2' }} 可以
{{ arr.map(i=>i*10).join('-') }} 可以
{{ for(let i =0 ;i<10;i++){ console.log(i) } }} 不可以
6.0 指令
作用：帮助我们操作DOM,渲染页面，不需要我们去操作
vue的指令是以v-xx开头的自定义属性
<标签 id="id" class='className' age="100" v-if="xx" v-for="xxx"> </标签>
v-text 和 v-html
帮助我们渲染页面
v-text : 底层实现是textContent,渲染页面节点，不能识别标签
v-html: 底层实现是innerHTML ,渲染页面节点，可以识别标签
语法：
<标签 v-text="表达式"></标签>
<标签 v-html="表达式"></标签>
v-if 和 v-show
帮助我们根据条件渲染页面
v-show : 通过属性display的属性切换，来控制页面显示隐藏
v-if: 通过删除页面节点或重新渲染，来控制页面显示隐藏
语法：
<标签 v-show="表达式"></标签>
<标签 v-if="表达式"></标签>
v-if 和 v-else-if 和 v-else
帮助我们根据条件渲染页面，如果前面的条件已经满足，就不会执行后面的判断
跟我们JS中的if…else if 一样的使用
语法：
<标签 v-if="表达式"></标签>
<标签 v-else-if="表达式"></标签>
<标签 v-else="表达式"></标签>
v-for
帮助我们循环渲染列表数据
语法：
<标签 v-for="值 in 数组">{{ 值 }}</标签>
<标签 v-for="(值,索引) in 数组">{{ 值 }} {{ 索引 }}</标签>
<标签 v-for="键值 in 对象">{{ 键值 }}</标签>
<标签 v-for="(键值,键名) in 对象">{{ 键值 }}</标签>
<标签 v-for="(键值,键名,索引) in 对象">{{ 键值 }}</标签>
v-model
帮助我们操作表单数据，让data里的数据与表单的数据双向绑定，不分你我，表单之王
v-model作用：获取表单里的数据，修改表单里的数据
<h1>白马会所VIP录入系统</h1>
<div>
姓名：<input type="text" v-model="vip.name"/>
</div>
<div>
性别：
<input type="radio" value="男" v-model="vip.sex"/>男
<input type="radio" value="女" v-model="vip.sex"/>女
<input type="radio" value="未知" v-model="vip.sex"/>未知
</div>
<div>
技能：
<select v-model="vip.skill">
<option value="唱歌">唱歌</option>
<option value="喝酒">喝酒</option>
<option value="跳舞">跳舞</option>
</select>
</div>
<div>
爱好：
<input type="checkbox" value="打麻将" v-model="vip.hobs"/> 打麻将
<input type="checkbox" value="打游戏" v-model="vip.hobs"/> 打游戏
<input type="checkbox" value="打扑克" v-model="vip.hobs"/> 打扑克
</div>
<div>
介绍：<br/>
<textarea rows="10" v-model="vip.desc"></textarea>
</div>
<button @click="fn">提交</button>
<script>
export default {
// 数据
data(){
return {
vip:{
name:'',
sex:'',
skill:'',
hobs:[],
desc:''
}
}
},
// 方法们
methods:{
fn(){
// console.log(this.vip)
this.vip = {
name:'张三',
sex:'男',
skill:'跳舞',
hobs:['打扑克','打麻将'],
desc:'这是一段信息'
}
}
}
}
</script>
7.0 事件
在页面绑定事件 ,简写：@
v-on:事件类型="表达式"
v-on:事件类型="函数名"
v-on:事件类型="函数名(实参1，实参2,...)"
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
