重生之再学Vue - @vue/cli脚手架 vue的基本指令

Vue的基本概念

vue是一个渐进性式javascript框架,一套拥有自己规则的语法

1.渐进式:逐步进步,想用什么就用什么,不必全部使用

2.框架与库的区别:

库:封装的属性或方法比如jQuery

框架:拥有自己的语法规则和元素

@vue/cli脚手架

第一步全局安装vue/cli

yarn global add @vue/cli

可以使用vue -V来查看是否安装成功

出现版本号就说明安装成功

第二部创建项目

vue create vuecli-demo

后面为项目明可以自定义但是不能有大写字母, 中文和特殊符号

选择模块和包管理器回车等待安装完成即可进入下一步

 输入提示的代码即可启动内置的webpack本地热更新开发服务器 – 浏览项目页面

 如果为弹出浏览器,手动打开输入替代的域名加端口浏览项目页面

脚手架目录分析

 1.脚手架主要文件的作用

 脚手架自定义配置

首先新建一个与sec文件平级的vue.config.js文件填入配置用yarn serve重启开发服务器

在vue.config.js中配置

modules.exports = {
    devServer: {//自定义服务配置
        port: 3000,//定义端口号
        open:true//自动开启浏览项目页面
    }
}

脚手架eslint

eslint是代码检查工具,违反规定就会报错

如果写代码违反了eslint的规则就会出现报错

 可以手动解决掉错误如下

 脚手架清理欢迎页面

assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)清空App.vue里面的代码

vue的基本指令

在don标签中,直接插入vue数据变量我们加做差值表达式

语法:{{表达式}}

 以v-开头的标签属性,叫做指令

1. v-bind

2. v-on和修饰符

3. v-model和修饰符

4. v-html

5. v-show和v-if以及v-else

6. v-for

v-bind

语法 v-bind:属性名="vue变量"

简写: :属性名="vue变量"     v-bind可以简写为:

v-on 事件绑定

语法

v-on:事件名=“methods中的函数名"

v-on:事件名=“methods中的函数名(实参)"

可以简写为  @事件名=“methods中的函数名"

方法在menthods选项定义

 

 修饰符

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 添加事件侦听器时使用 capture 模式。
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。
• .left - (2.2.0) 只当点击鼠标左键时触发。
• .right - (2.2.0) 只当点击鼠标右键时触发。
• .middle - (2.2.0) 只当点击鼠标中键时触发。
• .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

v-model双向绑定

语法: v-model="Vue数据变量"

双向数据绑定

变量变化 -> 视图自动同步

视图变化 -> 变量自动同步

暂时只能用在表单标签上

修饰符:

.number 以parseFloat转成数字类型

.trim 去除首尾空白字符

.lazy 在change时触发而非input时

 

v-html

语法:

v-html="Vue数据变量"

注意: 会覆盖插值表达式

v-show和v-if

语法:

         v-show="Vue变量"

         v-if="Vue变量"

原理

        v-show 用的display:none隐藏 (频繁切换使用)

        v-if 直接从DOM树上移除

高级

         v-else的使用

 v-show与v-if的区别

v-show 是用 css 方式 , 显示 / 隐藏标签

v-if 是从 DOM 树上 , 添加 / 移除

v-if 可以配合 v-else 使用

v-for

语法:

        v-for="(值变量, 索引变量) in 目标结构"

        v-for="值变量 in 目标结构"

注意:

        v-for的 临时变量名不能 用到v-for 范围外