#博学谷IT学习技术支持#
目录
一.vue的脚手架vue/cli
二.vue/cli 目录和代码分析
三.vue/cli的项目架构
四.vue/cli 自定义配置
5.Vue指令
5.0_vue基础-插值表达式
5.1_vue基础-MVVM设计模式
5.2_vue指令-v-bind
5.3_vue指令-v-on
5.4_vue指令-v-on事件对象
5.5_vue指令-v-on修饰符
5.6_vue指令-v-on按键修饰符
5.7_vue指令 v-model
一.vue的脚手架vue/cli
1.vue/cli安装
全局安装命令
使用vue -V查看vue脚手架版本
2.vue/cli 创建项目启动服务
创建项目
进入脚手架项目下, 启动内置的热更新本地服务器
2.@vue/cli 目录和代码分析
3.vue/cli的项目架构
4.vue/cli 自定义配置
src并列处新建vue.config.js
5.Vue指令
5.0_vue基础-插值表达式
总结: dom中插值表达式赋值, vue的变量必须在data里声明
3.1_vue基础-MVVM设计模式
设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。
演示: 在上个代码基础上, 在devtool工具改变M层的变量, 观察V层(视图的自动同步)
等下面学了v-model再观察V改变M的效果
1. 在vue中，不推荐直接手动操作DOM！！！
2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！(思想转变)
总结: vue源码内采用MVVM设计模式思想, 大大减少了DOM操作, 挺高开发效率
3.2_vue指令-v-bind
vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头
每个指令, 都有独立的作用
总结: 把vue变量的值, 赋予给dom属性上, 影响标签显示效果
3.3_vue指令-v-on
语法
v-on:事件名="要执行的==少量代码=="
v-on:事件名="methods中的函数"
v-on:事件名="methods中的函数(实参)"
简写: @事件名="methods中的函数"
总结: 常用@事件名, 给dom标签绑定事件, 以及=右侧事件处理函数
3.4_vue指令-v-on事件对象
3.5_vue指令-v-on修饰符
总结: 修饰符给事件扩展额外功能
3.6_vue指令-v-on按键修饰符
总结: 多使用事件修饰符, 可以提高开发效率, 少去自己判断过程
3.8_vue指令 v-model
语法: v-model="vue数据变量"
双向数据绑定
数据变化 -> 视图自动同步
视图变化 -> 数据自动同步
总结: 本阶段v-model只能用在表单元素上, 以后学组件后讲v-model高级用法
