脚手架下载 vue指令 v-指令 v-model v-for v-on v-bind v-showv-if

yarn工具命令

下载yarn npm i yarn

脚手架好处

开箱即用不需要配置webpack

步骤

1.全局安装yarn global add @vue、cli

下载后查看vue版本号 vue -V

脚手架-创建项目-启动服务

选择淘宝镜像源

1.创建项目 vue create vuecli-demo  回车

2.选择vue2 

3.选择包管理器 yarn或者NPM

4.等待下载脚手架项目

5.切换脚手架项目下 cd  vuecil-demo

yarn  serve  看到绿色就OK了

问题1 如何切换到淘宝镜像源 .c盘用户找到 .vuerc输入

{
  "useTaobaoRegistry": true,
  "packageManager": "npm"
}

图解

 脚手架内置webpack修改配置 修改端口号

vue.config.js输入

devServer:{

    open:true,  //自动打开浏览器

    port:8888,  //配置端口号

    host:'127.0.0.1'//配置ip地址

  }

命令端ctrl+c关闭  npm run serve 重新开启

vue语法-插值表达式

语法：{{表达式}}

 vue基础-MVVM设计模式 同步视图和数据

下载拓展插件

vue指令

1.vue指令 v-bind

语法 ：v-bind：属性名=“vue变量”

简写         ：属性名=“vue变量”

我是a标签

 2.vue指令 v-on事件绑定

语法

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

简写: @事件名="methods中的函数"

methods是对象的属性 与data()是兄弟关系

注意,在函数里面要想访问 vue中的变量 必须加this.变量名(在script里面)

 3.vue指令 v-on事件对象

语法:

无传参, 通过形参直接接收

传参, 通过$event指代事件对象传给事件处理函数

4.vue指令-v-on修饰符（stop prevent）

语法:

@事件名.修饰符="methods里函数"

.stop - 阻止事件冒泡

.prevent - 阻止默认行为

  5.vue指令 v-on按键修饰符

给键盘事件, 绑定修饰符

语法:

@keyup.enter - 监测回车按键

@keyup.esc - 监测返回按键

5.vue指令 v-model双向绑定

在template 标签里面只能有一个根标签

在vue中变量的值 赋值给input 标签 同时需要获取 输入框的值

v-model可以实现双向绑定

数据 改变 影响视图

视图上面内容 变化了 同步给vue中的变量

6.vue指令 v-model双向绑定（数组和非数组）

 (重要)

  下拉框select的v-model 绑定在select上

v-model写在select上，value写在option上, Vue变量关联value属性的值

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

 

  爱好 吃饭 睡觉 玩游戏
性别 男 女
个人介绍

7.vue指令 v-model修饰符

语法:

v-model.修饰符="vue数据变量"

.number 以parseFloat转成数字类型

.trim 去除首尾空白字符

.lazy 在change时触发而非inupt时

8.vue指令 v-html和v-text

v-html可以解析标签

v-text不能解析标签

v-text和v-html会覆盖插值表达式

9.vue指令 v-show和v-if 

v-show和v-if都可以控制元素显示或隐藏

v-show="vue变量"

v-if="vue变量"

v-show通过标签形式display：none

v-if 通过 *** 作dom数，直接从dom树上移除

 10.vue指令 v-for

用数据循环生成标签

语法

v-for="(值变量, 索引变量) in 数组名字"v-for="(item,indx) in arr" :key="index"v-for="值变量 in 目标结构"可以遍历数组 / 对象 / 数字 / 字符串让谁循环就将v-for写到谁身上

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1322521.html