Vue第一天

目录

Vue的基本概念

为什么学习vue？

什么是Vue？

vue是一个MVVM的框架

组件化

VueCli

项目目录

插件

数据定义

指令

v-bind

v-on

v-show

v-if

Vue的基本概念

为什么学习vue？

1、vue高效 2、vue高薪 3、好多企业都是用

什么是Vue？

1、vue的概念： 渐进式的js框架

2、渐进式：逐渐增强，学多少用多少

3、框架
    库：方法的集合（工具箱）
    框架的：完整的解决方案（流水线）--（规则）

vue是一个MVVM的框架

什么是MVVM
        M：数据模型
        V：视图模型
        VM：数据视图模型

组件化

    优点：便于维护，便于复用
    子主题 2

VueCli

1、概念：帮助快速搭建一个vue架子

2、安装：npm i @vue/cli -g

3、创建项目： vue create + 项目名（不能有中文）

4、项目的打开方式：拖拽根目录

项目目录

node_modules依赖包

public
    ico
    index.html: 静态页面浏览器加载的页面

src项目的主目录（重点关注）
    1、App.vue根组件
    2、main.js打包的入口文件
        将根组件App挂载到index.html 中的id为app的标签中

插件

1、volar 安装并禁用

2、eslint

3、vetur

数据定义

1、data(){return{}}

2、差值表达式{{}}(胡子表达式) 用于渲染数据
    1、数据必须在data中定义
    2、不能使用if for
    3、不能使用在标签的属性上

指令

v-bind

绑定标签中的动态属性
    v-bind：属性名=“值”
    ：属性名=“值”

v-on

绑定事件
    写法:
        1、v-on：事件名=“少量代码”
        2、v-on：事件名=“methods中的函数名”
        3、v-on：事件名=“methods中的函数名（实参）”
    简写
        @事件名=“XXX”
    获取事件对象
        没有参数
            在方法中接受一个e
        有参数
            传入一个$event，方法中定义形参接受
    事件修饰符
        阻止默认行为.prevent
        阻止冒泡.stop
    键盘事件
        keyup
            键盘事件修饰符
                .enter
                .esc

v-show

控制元素显示隐藏  布尔值 控制display属性为none

v-if

控制元素显示隐藏的 布尔值 控制元素是否渲染