脚手架下载 vue指令 v-指令 v-model v-for v-on v-bind v-show/v-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语法-插值表达式

语法：{{表达式}}

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
  </div>
</template>

<script>
export default {
  data() { // 格式固定, 定义vue数据之处
    return {  // key相当于变量名
      msg: "hello, vue",
      obj: {
        name: "小vue",
        age: 5
      }
    }
  }
}
</script>

vue基础-MVVM设计模式

同步视图和数据

下载拓展插件

vue指令

1.vue指令 v-bind

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

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

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

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

语法

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

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

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

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

<template>
  <div>
    <!-- v-on:事件名="Vue的变量" -->
    <p>商品的输入:{{count}}</p>
    <button v-on:click="count++">+1</button>
    <button v-on:mouseenter="add">+2</button>
    <button v-on:mouseener="addN(+10)">+N</button>
  </div>
</template>

<script>
export default {
  // methods 是对象的属性 与data() 是兄弟关系
data(){
  return{
   count:0
  }
},
methods: {
  add(){
    this.count+=2
  },
  addN(val){
    this.count+=val
  }
},
}
</script>

<style>

</style>

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

语法:

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

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

<template>
  <div>
    <a @click="one" href="http://www.baidu.com">阻止百度</a>
    <hr>
    <a @click="two(10, $event)" href="http://www.baidu.com">阻止去百度</a>
  </div>
</template>

<script>
export default {
  methods: {
    one(e){
      e.preventDefault()
    },
    two(num, e){
      e.preventDefault()
    }
  }
}
</script>

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

语法:

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

.stop - 阻止事件冒泡

.prevent - 阻止默认行为

<template>
  <div @click="fatherFn">
    <!-- 获取事件对象1.调用函数时 没有传递参数 只需要在定义函数处准备一个 形参 -->
    <button @click="fn">按钮</button>
    <!-- 2.调用函数时 传递给实际参数 需要使用固定的实际参数 $event -->
    <button @click.stop="fnn(10,$event)">获取事件对象</button>
    <a :href="url" @click="one">百度</a>
    <br>
    <!-- 只想阻止默认行为 -->
    <!-- 阻止默认行为和冒泡 -->
    <!-- 
     v-on修饰符 
     v-on:事件名.修饰符
      语法 @事件名.修饰符
     .stop 阻止冒泡
     .prevent  阻止默认行为
     -->
    <a :href="url" @click.prevent.stop>百度</a>
  </div>
</template>

<script>
export default {
  data(){
  return{
    url:'http://www.baidu.com'
  }
  },
methods: {
  fn(e){
    console.log(e)
  },
  fnn(val,e){
    console.log(val,e)
  },
  fatherFn(){
console.log('father触发了')
  }
}
}
</script>

<style>

</style>

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

给键盘事件, 绑定修饰符

语法:

@keyup.enter - 监测回车按键

@keyup.esc - 监测返回按键

<template>
  <div>
    <input type="text" @keydown.enter="enterFn">
    <hr>
    <input type="text" @keydown.esc="escFn">
  </div>
</template>

<script>
export default {
 methods: {
   enterFn(){
     console.log("enter回车按键了");
   },
   escFn(){
     console.log("esc按键了");
   }
 }
}
</script>

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

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

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

v-model可以实现双向绑定

数据改变影响视图

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

<template>

  <div>
    用户名<input type="text" v-model="uname">
  </div>
</template>

<script>
export default {
  data(){
    return{
      uname:'张三'
    }
  }
}
</script>

<style>

</style>

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

(重要)

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

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

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

<!-- v-model 绑定在CheckBox身上变量的值是非数组则得到checked属性的值 true/false

// 特别注意: v-model, 在input[checkbox]的多选框状态
// 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
// 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值

<template>
  <div>
  来自于:<select v-model="city">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">广州</option>
    <option value="5">广东</option>
  </select><br>
  <!-- v-model 绑定在checkbox身上 变量的值是一个字符串 获取的复选框的 checked属性 -->
  <!-- v-model 绑定在CheckBox身上 变量的值 是数组 则得到value属性 -->
  <!-- v-model 绑定在CheckBox身上  变量的值  是非数组 则得到checked属性的值 true/false -->
  爱好 <input type="checkbox" value="吃饭" v-model="hobby" >吃饭
       <input type="checkbox" value="睡觉" v-model="hobby" >睡觉
       <input type="checkbox" value="玩游戏" v-model="hobby" >玩游戏
       <br>
  性别 <input type="radio" value="男" name="gender" v-model="gender">男     
       <input type="radio" value="女" name="gender" v-model="gender">女
       <br>
  个人介绍 
      <textarea  v-model="info"></textarea>
  </div>
</template>

<script>
export default {
 data(){
   return{
     city:'1',
     hobby:['吃饭','睡觉'],
    // hobby:'',
     //当变量的值是非数组时 得到的checked属性布尔值
     gender:'男',
     info:''
   }
 }
  }

</script>

<style>

</style>

7.vue指令 v-model修饰符

语法:

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

.number 以parseFloat转成数字类型
.trim 去除首尾空白字符
.lazy 在change时触发而非inupt时

<template>
  <div>
    <!-- v-model修饰符 -->
    <!-- v-model.number 隐式转换 转为数字类型 -->
    <input type="text" v-model.number="num">
    <!-- v-model.trim 去除字符串左右的空格 -->
    <input type="text" v-model.trim="user">
    <input type="text" v-model.lazy='str'>
  </div>
</template>

<script>
export default {
data(){
  return{
    num:'0',
    user:'',
    str:''

  }
}
}
</script>

<style>

</style>

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

v-html可以解析标签

v-text不能解析标签

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

<template>
  <div>
    <!-- v-html 解析html标签-->
  <p v-html="html"></p>
  <!-- v-text 不能解析html标签 -->
  <p v-text="html"></p>
  <!-- vue 官方 建议 少用 v-html -->
  <!-- v-text 与v-html 会覆盖插值表达式 -->
  <p v-html="html">{{msg}}</p>
  </div>
</template>

<script>
export default {
data(){
  return{
    html:'<strong>hello</strong>',
    msg:'hello'
  }
}
}
</script>

<style>

</style>

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

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

v-show="vue变量"

v-if="vue变量"

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

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

<template>
  <div>
   <!-- 元素显示隐藏 v-show和v-if -->
   <!-- v-show 让元素显示或者隐藏 vue 变量的值 如果是true就代表显示 为false 就是隐藏 通过css 的display 属性 显示或者隐藏 -->
   <h1 v-show="isShow">是否显示</h1>
<!-- v-if 也可以让元素显示或者隐藏 如果变量的值为false就会将会这个元素 直接从dom树上面移除 -->
   <div v-if="isShow">我是一个大盒子</div>
   <div v-if="age >18">去上网</div>
   <div v-else>回家写代码</div>
  </div>
</template>

<script>
export default {
data(){
  return{
    isShow:false,
    age:19
  }
}

}
</script>

<style>

</style>

10.vue指令 v-for

用数据循环生成标签

语法

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

<template>
  <div>
     <!-- item 代表数组的 元素  -->
      <!-- index 代表数组的 下标 -->
<li v-for="(item,index) in list" :key="index">
  {{item}}---{{index}}
</li>
<!-- <li v-for="item in list"> 
  {{item}}
</li>  -->

<!-- 说明 :key 一定要加 有id 绑定对象的id属性 -->
<!-- 说明 :可以 一定要加 有索引 绑定数组的下标 -->
<!-- 想循环谁,就把v-for写到谁身上 -->
<li v-for="item in list" :key="item.id" >
{{item.name}}
</li>
  </div>
</template>

<script>
export default {
 data(){
   return{
     list:[
       {id: 1, name:'马超'},
       {id: 2, name:'张飞'},
       {id: 3, name:'关羽'},
       {id: 4, name:'虞姬'}
     ]
   }
 }
}
</script>

<style>

</style>

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

yarn工具命令

图解

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

vue语法-插值表达式

vue基础-MVVM设计模式

同步视图和数据

vue指令

1.vue指令 v-bind

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

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

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

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

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

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

(重要)

7.vue指令 v-model修饰符

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

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

悦读

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