1.MVVM设计模式

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

MVVM，一种软件架构模式，决定了写代码的思想和层次
- M： model数据模型 (data里定义)
- V： view视图（页面标签）
- VM： ViewModel视图模型 (vue.js源码)
MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM
- V （修改视图） -> M（数据自动同步）
- M（修改数据） -> V （视图自动同步）

1. 在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！ (思想转变)

2.插值语法

语法: {{ 表达式 }}

<template>
  <div>
    <!-- {{ vue里面的变量 }} 插值表达式 -->
    <!-- 插值 : 往标签里面写入内容 -->
    <!-- 表达式 可以计算得到的一个结果 -->
    <h1>{{msg}}</h1>
    <h1>{{age>1000?'爬金山':'写代码'}}</h1>
    <h1>{{obj.uname}}</h1>
  </div>
</template>

<script>
export default {
  data() {  // 格式固定, 定义vue数据之处
    return {
    // 属性名 : 属性值
      msg:'hello',
      age:10086,
    // 对象名 : {}
      obj:{
        uname:'万叶'
      }
    };
  },
};
</script>

<style lang="less" scoped>

</style>

2.vue指令

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

每个指令, 都有独立的作用

2.1-Vue指令-v-bind动态属性

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

<template>
  <div>
  <a v-bind:href="url">百度</a>
  <img :src="imgSrc" alt="">
  </div>
</template>

<script>
export default {
  data() {
    return {
      url:'http://www.baidu.com',
      imgSrc:'https://tse3-mm.cn.bing.net/th/id/OIP-C.HjosbACdv3MQ-Id_Eg8uXgHaJW?w=182&h=230&c=7&r=0&o=5&dpr=1.25&pid=1.7'
      }
  },
};
</script>

<style lang="less" scoped>

</style>

2.2-Vue指令-v-on事件绑定

语法
- v-on:事件名="methods中的函数"
- v-on:事件名="methods中的函数(实参)"
- v-on:事件名="对adta里面的变量操作"
简写: @事件名="methods中的函数"

<template>
  <div>
   <p>商品的输入:{{ count }}</p>
   <!-- 给按钮绑定事件 v-on -->
   <!-- v-on:时间名="vue的变量" -->
   <button v-on:click="count++">+1</button>
   <!-- v-on:时间名="methods里面的函数" -->
   <button v-on:clickk="add">+2</button>
   <!-- v-on:事件名="methods中的函数(实参)"  -->
   <button v-on:click="addN(10)">+N</button>
  <!-- 简写: @事件名="methods中的函数" -->
  <button @click="count--">-1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
     count:0
      }
  },
  // methods 是对象的属性 与 data() 是兄弟关系
  // methods 是一个对象
  methods: {
    add(){
      // 注意:要想访问变量,前面必须加this.变量名
      this.count+=2
    },
    addN(value){
       this.count+=value
    }
  },
};
</script>

<style lang="less" scoped>

</style>

注意: thsi会平铺里面的属性和方法,指向的是vue创建的实例对象

2.3 -Vue指令-v-on的事件对象

事件对象有两种情况:

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

<template>
  <div>
    <!-- 获取事件对象 -->
    <!-- 调用函数时,没有传递参数时只需要在函数准备一个形参 -->
   <button @click="fu">按钮</button>
   <!-- 调用函数时传递了参数需要用固定的语法去接收事件对象  @event -->
   <button @click="fun(10,$event)">获取事件对象</button>
  </div>
</template>

<script>
export default {
    methods: {
    fu(e) {
      console.log(e);
    },
     fun(value,e) {
      console.log(value);
      console.log(e);
    }
  },
};
</script>

<style lang="less" scoped>

</style>

2.4-Vue指令-v-on的修饰符

语法:

@事件名.修饰符="methods里函数"
- .stop - 阻止事件冒泡
- .prevent - 阻止默认行为

<template>
  <div>
   <a  @click="fu" href="url">百度</a><br>
   <!-- 阻止冒泡 -->
   <a  @click.stop="fu" href="url">百度</a><br>
   <!-- 阻止默认跳转 -->
   <a  @click.prevent="fu" href="url">百度</a><br>
   <!-- 阻止冒泡和默认跳转 -->
   <a  @click.prevent.stop href="url">百度</a><br>
  </div>
</template>

<script>
export default {
  data(){
return{
  url:'http://www.baidu.com'
}
  },
    methods: {
    fu(e) {
    e.preventDefault();
    },
  },
};
</script>

<style lang="less" scoped>

</style>

2.5-Vue指令-v-on按键修饰符

语法:

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

<template>
  <div>
    <input type="text" @keydown.enter="fu">
    <input type="text" @keydown.esc="fun">
  </div>
</template>

<script>
export default {
  methods: {
    fu(){
      console.log('按下了回车');
    },
    fun(){
      console.log('按下了返回');
    }
  },
};
</script>

<style lang="scss" scoped>

</style>

2.6-Vue指令-v-model双向绑定

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

<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>
    爱好:
    <input type="checkbox" v-model="hobby" value="玩游戏">玩游戏 
    <input type="checkbox" v-model="hobby" value="看电影">看电影 
    <input type="checkbox" v-model="hobby" value="吃东西">吃东西 
    <br>
    性别:<input type="radio" name="gender" v-model="gender" value="男"> 男
    性别:<input type="radio" name="gender" v-model="gender" value="女"> 女
    <br>
    <textarea v-model="info"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city:'1',
      hobby:[],
      gender:'男',
      info:''
    };
  },
};
</script>

总结:

v-model写在select上，value写在option上, Vue变量关联value属性的值
v-model用在复选框时: 非数组 - 关联的是checked属性 , 数组 - 关联的是value属性
Vue变量初始值会影响表单的默认状态

2.7-Vue指令-v-model修饰符

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

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

<template>
  <div>
<input v-model.number="numData" type="text"/> <br>
<input v-model.trim="data" type="text" /> <br>
<input v-model.lazy="str" type="text" /> <br>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numData:0,
      data:'',
      str:''
    }
  }
}
</script>

2.8-Vue指令-v-html和v-text

语法:
- v-html="vue数据变量"

<template>
  <div>
    <p v-text="text"></p>
    <p v-html="html"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text:'能修改内容',
      html:'<i>能解析标签</i>'
    };
  }
};
</script>

注意:
- v-html是替换全部的内容,插值语法只能替换其中的一部分
- v-html会覆盖插值语法

2.9-Vue指令-v-if

语法:

v-if="vue变量"

<template>
  <div>
    <h1 v-if="isIf">显示隐藏</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isIf:true
    };
  },
};
</script>

v-if 根据条件决定这个元素是否渲染在DOm树上面

2.10-v-if和v-if-else和v-else的组合使用

语法:

单分支: v-if="布尔值"
双分支: v-else
多分支: v-else-if="布尔值"

<template>
  <div>
    <p v-if="num>=90">给你买劳斯莱斯</p>
    <p v-else-if="num>=80">给你买法拉利</p>
    <p v-else-if="num>=60">给你买奥迪</p>
    <p v-else>打你一顿</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num:80
    };
  },
};
</script>

注意点:

v-if需要表达式,v-else不需要表达式
限制前面兄弟元素必须要有v-if或者v-else-if,否则报错

2.11-Vue指令-v-show

语法:

v-show="vue变量"

<template>
  <div>
    <h1 v-show="isShow">显示隐藏</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow:true
    };
  },
};
</script>

v-show一定不会元素渲染在DOM树上面,只是让这个元素是否显示或者隐藏

v-show和v-if区别:

v-show是用css方式显示/隐藏标签
v-if直接从DOM树上添加/移除
需要频繁隐藏显示的时候用v-show,不需要频繁显示隐藏用v-if

2.12-Vue指令-v-for

语法

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

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

同级标签的key值不能重复

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
     {{index}} --   {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list:['万叶','公子','钟离']
    };
  },
};
</script>

<style lang="scss" scoped>
</style>

2.13-Vue指令绑定class属性

语法:

:class="{ 类名 : 布尔值 }"

<template>
  <div>
    <p :class="{ pink : 10>5 }">hello</p>
    <p :class="{ pink : bool }">hello</p>
  </div>
</template>

<script>
export default {
  name: 'VueCommentApp',

  data() {
    return {
      bool:true
    };
  },
};
</script>

<style lang="less" scoped>
.pink{
  color:pink;
}
</style>

2.13-Vue指令绑定style

语法:

:style="{ css属性名 : vue的变量 }"

<template>
  <div>
    <p :style="{ color : bool }">hello</p>
    <p :style="{ color : 'pink' }">hello</p>
  </div>
</template>

<script>
export default {
  name: 'VueCommentApp',

  data() {
    return {
      bool:pink
    };
  },
};
</script>

vue的基础语法和几个常用指令