vue 基础

目录

1.vue 介绍

2.@ vue-cli脚手架

3. 项目入口, 以及代码执行顺序和引入关系

4. vue文件

5. vue 指令

5.1 插值表达式  又叫: (声明式渲染/文本插值)

5.2  MVVM设计模式  

      5.3    v-bind 

      5.4 v-on   <标签绑定事件 >

            v-on 事件对象 

            v-on修饰符

           v-on按键修饰符

    5.5  v-model 指令

           v-model修饰符

---

1.vue 介绍

1.1 什么是vue

vue是一个渐进式的javascript框架
    渐进式
    框架(拥有自己的规则和元素)和库(封装的属性或方法)

1.2 Vue学习的方式

传统的开发  通过html页面引入vue
 webpack工程化下开发 

2.@ vue-cli脚手架

2.1  配置环境

    安装               sudo  yarn global add @vue/cli   

                        或:  npm install -g @vue/cli
    创建项目         vue create 项目名字(禁止中文)

    选择模板:         (第一次需要设置)
    启动项目         vue  serve 

                           (打开目录下终端  command + .  打开浏览器地址 ,,可以自定义配置:  /* 覆                                 盖 webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
})
    目录结构：      src文件夹下App.vue

2.2  eslint 

在 vue.config.js 文件夹 设置

3. 项目入口, 以及代码执行顺序和引入关系

4. vue文件

template
        必须，提供组件的结构 html
        注意：必须要一个根元素 div
 script
        书写js代码 逻辑
  style
        处理样式，默认支持css
        通过lang="less|scss" 可以使用less或者sass
            需要安装依赖包

5. vue 指令

5.1 插值表达式  又叫: (声明式渲染/文本插值)

    语法: {{ 表达式 }}

5.2  MVVM设计模式  

   设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。

• M： model数据模型 (data里定义)

• V： view视图 （html页面）

• VM： ViewModel视图模型 (vue.js源码)

      5.3    v-bind 

<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

      5.4 v-on   <标签绑定事件 >

语法:
* * v-on:事件名="要执行的==少量代码=="
  * v-on:事件名="methods中的函数"
  * v-on:事件名="methods中的函数(实参)" 
* 简写: @事件名="methods中的函数"

            v-on 事件对象 

语法:

* 无传参, 通过形参直接接收
* 传参, 通过$event指代事件对象传给事件处理函数

            v-on修饰符

语法:

* @事件名.修饰符="methods里函数"
  * .stop - 阻止事件冒泡
  * .prevent - 阻止默认行为
  * .once - 程序运行期间, 只触发一次事件处理函数

           v-on按键修饰符

语法:

* @keyup.enter  -  监测回车按键
* @keyup.esc     -   监测返回按键

    5.5  v-model 指令

* 语法: v-model="vue数据变量"
* 双向数据绑定
  * 数据变化 -> 视图自动同步
  * 视图变化 -> 数据自动同步

遇到复选框, v-model的变量值
      非数组 - 关联的是复选框的checked属性
      数组   - 关联的是复选框的value属性

           v-model修饰符

语法:

* v-model.修饰符="vue数据变量"
  * .number   以parseFloat转成数字类型
  * .trim          去除首尾空白字符
  * .lazy           在change时触发而非inupt时