1. Vue是什么?

Vue是一个渐进式 JavaScript 框架

2. 什么是渐进式?

渐进式就是按需, 逐渐集成功能

3.什么是库和框架?

库是方法和属性的集合
框架拥有自己语法规则  

4.脚手架

 全局安装@vue/cli模块包
 yarn global add @vue/cli
 npm install -g @vue/cli

vue里面文件和文件夹的含义

5.脚手架注意事项:template里只能有一个根标签

6.Vue语法-插值表达式

语法: {{ 表达式 }}

7.Vue指令-v-bind属性绑定

8.Vue指令-v-on事件绑定

<template>
 <div>
<p>商品的输入：{{ count }}</p>
<!-- 给按钮绑定事件 v-on -->
<!-- v-on:事件名="Vue的变量" -->
<!-- 在 html 标签里面 访问 Vue 里面的变量不需要加 this 关键字  -->
<button v-on:click="count++">+1</button>
<!-- v-on:事件名="methods里面的函数" -->
<button v-on:mouseenter="add">+2</button>
<!-- v-on:事件名="methods里面的函数" -->
<button v-on:mouseenter="addN(10)">+N</button>
<!-- v-on: 可以简写为 @事件名='函数' -->
<button @click="subFn(1)">-1</button>
 </div>
</template>
<script>
    // methods 是对象的属性 与 data() 是兄弟关系
   // methods 是一个对象
  export default {
  data() {
      return {
       count: 0,
     };
   },
 methods: {
add() {
  // console.log(1)
  // 注意：在函数里面想要访问 Vue 中变量 必须加 this.变量名
  this.count += 2;
},
addN(val) {
  // console.log(val)
  this.count += val;
},
subFn(val) {
  this.count -= val;
  },
 },
};
</script>

 <style>
</style>

案例:点击说笑话

 <template>
  <div>
<p>{{ word }}</p>
<button @click="fn">点击说笑话</button>
 </div>
</template>

<script>
 // 需求：点击说笑话
 // 1. 从 md 笔记里面 copy 结构
 // 2. 需要给 button 按钮 绑定事件 @click="fn"
 // 3. 需要在 data 平级处 定义 methods 的对象
 // 4. 需要在 methods里面 定义 fn 的函数
 // 5. 在函数里面 使用 parseInt(Math.random() * 数组的长度) 可以根据索引 从数组里面 取出一个元素
// 6. 将取出的数据 赋值给 word 变量就可以了
// 7. 注意：在函数里面 访问变量 一定要加 this 关键字

 export default {
     data() {
           return {
                  word: "这里是一条笑话",
             jokeArr: [
    "我去相亲网站去了, 那你找到对象了吗? 不! 我找到了他们网站的一个Bug",
    "讲述一下车怎么翻沟里了。我坐在副驾说沟！沟!沟! 朋友说：欧嘞，欧嘞。欧嘞 结果车就翻里了。",
    "几位大哥开车去钓鱼，车陷草里了，然后几个大神说把草烧了就出来了，然后就放火烧了，结果就烧没了。",
   ],
    };
   },
 methods: {
fn() {
  const index = parseInt(Math.random() * this.jokeArr.length);
  // console.log(index)
  this.word = this.jokeArr[index];
  },
   },
  };
 </script>
 

9.Vue指令-v-on事件对象

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

<template>
 <div>
<!-- 获取事件对象 1. 调用函数时 没有传递参数 只需要在 定义函数处 准备一个 形参 -->
<button @click="fn">按钮</button>
<!-- 2. 调用函数 时 传递给 实际参数 需要使用固定的实际参数 $event -->
<button @click="fnn(10, $event)">获取事件对象</button>
 </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);
     },
   },
  };
 </script>
 <style>
 </style>

10.Vue指令-v-on修饰符

  <template>
  <div @click="fclick">
<!-- 获取事件对象 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);
},
one(e) {
  e.preventDefault();
},
fclick() {
  console.log("我是爸爸身上的事件");
},
 },
 };
 </script>
 <style>
 </style>

11.Vue指令-v-on按键修饰符

 .enter – 匹配回车键
 .esc – 匹配取消键

 <template>
  <div>
<!-- 按键修饰符 -->
<!-- 语法 @事件名.enter 回车  -->
<!-- 语法 @事件名.esc 取消  -->
<!-- 语法 @keydown.97 -->
<input type="text" @keydown.enter="fn" />
<input type="text" @keydown.esc="fn" />
<input type="text" @keydown.65="fn" />
 </div>
</template>

<script>
  export default {
               methods: {
      fn() {
      console.log("按下回车了");
    },
   },
  };
</script>
<style>
</style>

12.案例:翻转字母

  <template>
  <div>
      <p>{{ msg }}</p>
      <button @click="fn">翻转字母</button>
  </div>
</template>
<script>
 export default {
      data() {
            return {
             msg: "value",
         };
       },
 methods: {
     fn() {
  //将字符串分割成数组,赋值给变量arr
  const arr = this.msg.split("");
  //将元素进行翻转
  const str = arr.reverse();
  //将数组拼接成字符串join('')
  this.msg = this.msg.split("").reverse().join("");
  },
 },
};
</script>
<style>
</style>

浏览器检测效果时注意事项

13.Vue指令-v-model双向绑定

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

v-model暂时只能用在表单标签上

v-model有什么作用?

把Vue的数据变量, 和表单的value属性, 双向绑定在一起

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

<script>
 // 数据改变影响视图,视图上面的内容变化了同步给vue中的变量
export default {
         data() {
      return {
           uname: "张三",
      };
    },
  };
</script>
<style>
</style>

1. 下拉表单v-model写在哪里?
v-model写在select上, value写在option上, Vue变量关联value属性的值

2. v-model用在复选框时, 需要注意什么?
 非数组 – 关联的是checked属性的值       数组 – 关联的是value属性

3. Vue变量初始值会不会影响表单的默认状态?
会影响, 因为双向绑定, 互相影响

v-model绑定案例

14.Vue指令-v-model修饰符

 语法: v-model.修饰符="Vue数据变量"

下面三种是修饰符

.number 以parseFloat转成数字类型

.trim 去除首尾空白字符

.lazy 在change时触发而非input时

v-model修饰符案例:

 <template>
 <div>
<!-- v-model 修饰符  -->
<!-- v-model.number="Vue的变量" -->
<input type="text" v-model.number="num" /> <br />
<!-- v-model.trim 去除字符串左右的空格 -->
<input type="text" v-model.trim="user" /> <br />
<input type="text" v-model.lazy="str" />
</div>
</template>

 <script>
      export default {
      data() {
      return {
            num: 0,
            user: "",
            str: "",
         };
        },
       };
 </script>
 <style>
 </style>

15.Vue指令-v-text和v-html

相同点:都可以设置标签显示的内容
区别:  1.v-text把值当成普通字符串       2.v-html把值当成标签进行解析

16.Vue指令-v-show和v-if

 语法:
     v-show="Vue变量"
     v-if="Vue变量"
 原理:
      v-show 用的display:none隐藏 (频繁切换使用)
      v-if 直接从DOM树上移除  
      
 Vue如何控制标签显示/隐藏?
 v-show或v-if, 变量赋予true/false, 显示/隐藏

v-show和v-if区别:

相同点:都是控制元素显示与隐藏

不同点:

v-show是css样式, display:none或者display:block

v-if是元素的创建与销毁

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

 <template>
 <div>
<!-- v-show 让 元素显示或者隐藏 Vue 变量的值 如果是 true 就代表显示  为 false 就是隐藏 通过 css 的 display 属性 显示或者隐藏  -->
<h1 v-show="isShow">是否显示</h1>
<!-- v-if 也可以让元素显示或者隐藏   如果变量的为 false 就会将这个元素 直接从 DOM 树上面移除   -->
<div v-if="isShow">我是一个大盒子</div>
<!-- v-if  还可以配合 v-else v-else-if 来使用 -->
<div v-if="age > 18">去网吧上网</div>
<div v-else>回家写代码</div>
</div>
</template>
<script>
   export default {
         data() {
           return {
                 isShow: false,
                 age: 19,
                 };
               },
              };
   </script>
   <style>
   </style>  
   

案例-折叠面板

// 需求： 折叠面板
// 1. 从　md 复制 结构
// 2. 下包 yarn add less less-loader@5.0.0 -D 或者 npm i less less-loader@5.0.0 -D
// 3. 在 data 里面 定义 变量 isShow: false
// 4. 将 这个变量 设置在  class="container" 通过 v-show="isShow"
// 5. 在 class="btn" span 标签上面  @click="isShow=!isShow"
// 6. 在 span 标签中 使用 插值表达式 使用三元运算符

<template>
    <div id="app">
        <h3>案例：折叠面板</h3>
   <div>
  <div class="title">
    <h4>芙蓉楼送辛渐</h4>
    <!-- 可以让 isShow变量的值 取反 赋值为 isShow -->
    <span class="btn" @click="isShow = !isShow">
      {{ isShow ? "收起" : "展开" }}
    </span>
  </div>
  <div class="container" v-show="isShow">
    <p>寒雨连江夜入吴，</p>
    <p>平明送客楚山孤。</p>
    <p>洛阳亲友如相问，</p>
    <p>一片冰心在玉壶。</p>
  </div>
  </div>
  </div>
</template>

<script>

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

 <style lang="less">
 body {
      background-color: #ccc;
     #app {
width: 400px;
margin: 20px auto;
background-color: #fff;
border: 4px solid blueviolet;
border-radius: 1em;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
padding: 1em 2em 2em;
h3 {
  text-align: center;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 1em;
}
.title h4 {
  line-height: 2;
  margin: 0;
}
.container {
  border: 1px solid #ccc;
  padding: 0 1em;
}
.btn {
  /* 鼠标改成手的形状 */
  cursor: pointer;
  }
 }
}
</style>

17.Vue指令-v-for

语法:
     v-for="(值变量, 索引变量) in 目标结构"
     v-for="值变量 in 目标结构"
注意:
     v-for的临时变量名不能用到v-for范围外
     in的两边必须有空格
     一定要指定key值,有id用id 无id用索引
     
  <template>
   <div>
<ul>
  <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
</ul>
<button @click="fn1">添加</button>
<button @click="fn2">翻转</button>
<button @click="fn3">截取</button>
<button @click="fn4">更新值</button>
 </div>
</template>

<script>
       export default {
        data() {
      return {
           arr: ["老大", "老二", "老三"],
         };
       },
  methods: {
       fn1() {
            this.arr.splice(1, 0, "新来的");
        },
   fn2() {
         this.arr.reverse();
       },
   fn3() {
        this.arr = this.arr.slice(1, 3);
       },
   fn4() {
         this.$set(this.arr, 0, "张三");
       },
      },
    };
  </script>
  <style>
  </style>   
  

v-for更新监测

这些方法会触发数组改变, v-for会监测到并更新页面
push()   pop()   shift()   unshift()   splice()   sort()   reverse()

这些方法不会触发v-for更新
slice()      filter()    concat()

如何修改端口号

1.在vue.conflig.js里面输入以下代码

2.在黑窗口输入npm run serve重启服务器

3.在浏览器页面显示修改的端口号

4.修改成功后在黑窗口也显示修改后的端口号

安装脚手架

 1.创建项目名称及选择淘宝镜像源
 

2.选择vue版本

3.选择包管理工具

eslint关闭报错

MMVVM数据驱动视图