脚手架的准备
渐进式的javacript框架, 一套拥有自己规则的语法
官网地址: cn.vuejs.org/
1.首先全局安装@vue/cli模块包
以下两种方式都行
yarn global add @vue/cli
npm install -g @vue/cli
2.查看vue的命令版本
如果出现版本号就安装成功, 否则失败
vue -V
项目的创建
1. 创建项目
注意: 项目名不能带大写字母, 中文和特殊符号
这里文件名为vuecli-demo
以下都可以上下箭头选择, 回车确定, 弄错了ctrl+c从第1步来
vue create vuecli-demo
2.选择模板
3.选择包管理器
4.耐心等待下载脚手架项目, 需要的依赖包
5. 终端切换脚手架项目下, 启动内置的webpack热更新开发服务器
运行第四步中出现的两行代码
cd vuecil-demo
yarn serve
6.看到地址出现就表示成功,可以在浏览器中输入访问
Vue指令
1. v-bind
给标签属性赋Vue变量
- 语法：
v-bind:属性名="vue变量" - 简写：
:属性名="vue变量"
<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">
2.v-on
绑定事件
- 语法
- v-on:事件名="methods中的函数"
- v-on:事件名="methods中的函数(实参)"
- 简写: @事件名="methods中的函数"
3. v-model
双向绑定
-
语法: v-model="vue数据变量"
-
双向数据绑定
- 数据变化 -> 视图自动同步
- 视图变化 -> 数据自动同步
-
最后演示: 用户名绑定 - Vue内部是MVVM设计模式
4. v-html
给元素设置内容,可以解析HTML标签
-
语法:
- v-html="vue数据变量"
-
注意: 会覆盖插值表达式
5. v-show和v-if
控制标签显示或隐藏
-
语法:
- v-show="vue变量"
- v-if="vue变量"
-
原理
- v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上移除
-
高级
- v-else使用
6. v-for
用数据循环生成标签
-
语法
- v-for="(值变量, 索引变量) in 目标结构"
- v-for="值变量 in 目标结构"
-
目标结构:
- 可以遍历数组 / 对象 / 数字 / 字符串
-
注意:
v-for的临时变量名不能用到v-for范围外
同级标签的key值不能重复
