初识vue和怎么开发vue还有各种概念，脚手架快速搭建项目和运行的流程，vue的单文件，v-bind，v-on,v-model,v-for,还有各种修饰符加练习

vue的一些概念

简单来说，vue是一个javascrpt渐进式框架

vue是一个mvvm框架

m: model 数据

v: view 视图

vm: ViewModel 视图模型 vue已经处理

双向数据绑定： v变了m会自动变 m变了，v会自动变

数据驱动思想：vue不推荐操作DOM，直接操作数据

什么是渐进式呢？

渐进式就是逐渐使用，集成更多的功能

什么是库和框架呢？

库是方法的集合，和框架是一套拥有自己的规则的语法

什么是脚手架？

辅助我们进行项目开发的一个工具

使用脚手架有什么好处呢？

0配置开箱即用，简单方便，里面大部分配置都已经配置好了的，除了自己的一些特殊要自己配

怎么开发vue呢？

传统的开发，通过html引入vue

现在都是webpack工程化下开发（webpack本身是, node的一个第三方模块包, 用于打包代码）

1.安装脚手架

1.第一步安装全局包：npm install -g @vue/cli (-g就是全局的意思，也可以放后面)

2.查看是否成功：vue -V （V要大写）

3.创建项目：vue create 项目名 （项目名可以自己起，但是不能有特殊符号，不能大写，不能中文）

4.运行项目（1.）切换到项目的根目录 cd+项目名字

​ （2.）npm run serve 初始化服务器

2.脚手架的项目结构和特点还有运行流程

vue的使用

1.vue的单文件

三大元素：

1.template-对应html（有一个限制，它下面只能有一个根标签）

2.script-对应Javascript（好处：Javascript作用域是独立）

3.style=对应样式（style作用域配合scoped属性可以独立，不然就是全局）

2.插值表达式

作用：把我们的表达式内容插入到指定的位置

语法：{{ 表达式 }} 表达式的变量声明在data方法返回对象里

表达式里面可以写（变量，数字，对象，方法调用，字符串，加减乘除，属性等）

代码演示如下

<template>
  <div>
   <h1>{{msg}}</h1>
   <h2>{{obj.name}}</h2>
   <h3>{{obj.age>18?'成年':'未成年'}}</h3>
  </div>
</template>
<script>
export default {
  data(){
    return{
      msg:"瞅啥",
       obj:{
      name:'铁蛋',
      age:18,
    }
    }
  }
}
</script>

<style scoped>

</style>

3.v-bind

作用：给标签绑定属性

语法，:属性名="变量" 变量声明在data方法返回对象里

它的简写是属性后面加冒号(:)实现简写

代码演示如下

<template>
  <div>
    <!-- 传统写法属性前面加v-bind:属性 -->
    <!-- baiduUrl：vue的变量 -->
  <p><a v-bind:href="baiduUrl">百度</a></p> 
  <!-- 简写：直接：属性实现简写 -->
  <p><img :src="imgUrl" alt=""></p>
  </div>
</template>
<script>
export default {
  data(){
    return{
      
    baiduUrl:"https://www.baidu.com/", //百度地址
    imgUrl:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" //图片地址
    }
   
  }
}
</script>

<style scoped>

</style>

4.v-on

作用：绑定各种事件

语法，@事件名="方法(参数)" 方法声明在methods对象（就是和data同级的下面）

它的简写是事件后面加@实现简写

代码演示如下

<template>
 <div>
   <h1>计数：{{count}}</h1>
   <!-- 常规写法v-on: -->
  <p><button v-on:click="count=count+1">+1</button></p>
  <p><button v-on:click="addFive">+5</button></p>
  <p><button v-on:click="addFn(50)">+50</button></p> 
  <!-- 简写直接@ -->
  <p><button @click="addFnn(100)">+100</button></p>   
 </div>
</template>
<script>
export default {
  data(){
    return{
      count:0,
    }
  },
  methods:{
    addFive(){
     this.count +=5
    },
    addFn(num){
 this.count +=num
    },
    addFnn(num){
 this.count +=num
    },
  },
}
</script>

<style scoped>

</style>

4-1.v-on获取事件对象

@事件名="方法" (比如阻止默认行为和事件委托的event)

@事件名="方法(参数1, $event)" （如果方法不止一个参数的话就要加一个$event表示事件对像，$event是固定写法不能更改）

代码演示如下

<template>
  <div>
<h1>{{count}}</h1>
<p><button v-on:click="addFn(50,$event)">+50</button></p> 
  </div>
</template>

<script>
export default {
  data() {
    return {
count:0,
    };
  },
  created() {

  },
  mounted() {

  },
  methods: {
 addFn(num,e){
 this.count +=num,
 e.preventDefault()
    },
  }
};
</script>
<style scoped lang="less">
</style>

4-2.v-on的修饰符

语法：@事件名.修饰符="方法(参数)"

1..stop：阻止事件冒泡

2..prevent：阻止事件默认行为

3..once：只运行一次

5.按键修饰符

语法： @keyup.对应的按键

简单来说就是按下对应的按键才触发，代码演示如下

 <template>
 <div>
    <!-- 按下指定键才触发，例如回车 -->
    <p>姓名：<input type="text" @keyup.enter="log"></p>
    <!-- 按下指定键才触发，例如esc键 -->
  <p>密码<input type="text" @keyup.esc="login"></p>
 </div>
</template>
<script>
export default {
methods:{
  log(){console.log(55);},
  login(){console.log(444);},
}
}
</script>
<style scoped>
</style>

6.练习案例-逆转世界

用到了三种关键方法

1.字符串拆分成数组：string.split(参数)

2.数组倒转方法：array.reverse() 会修改原始数组

3.数组拼接字符串：array.join(参数)

代码演示如下

<template>
  <div>
    <!-- 第一步，先静后动，先实现静态效果 -->
    <!-- 静态效果：标题和按钮 -->
    <h1>{{ message }}</h1>
    <!-- 第二步，绑定事件 -->
    <button @click="reverseWorld">逆转世界</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, World",
    };
  },
  methods: {
    reverseWorld() {
      // 字符串的split方法，把字符串拆分成数组
      const array = this.message.split("");
      // 数组倒转
      array.reverse();
      // 拼接并更新message
      this.message = array.join("");
    },
  },
};
</script>

<style>
</style>

7.v-model

作用：表单value和Vue变量双向绑定

语法：v-model="Vue变量" 变量声明在data方法返回对象

在在表单中使用的场景

1.下拉框：select：v-model绑定的选中的option的value

2.复选框：checkbox：（1.） 变量非数组-v-model绑定的checked属性，布尔值

（2）变量为数组-v-model绑定的是选中的项的value

3.单选：radio：v-model绑定选中项的value

4.文本域：textarea：v-model绑定的是用户输入的value

代码演示如下

<template>
  <div>
    <p>
         <!-- 下拉框的v-model写在select里面，value值写在option里面 -->
      来自于：<select v-model="city">
        <option value="湛江">湛江</option>
        <option value="茂名">茂名</option>
        <option value="韶关">韶关</option>
      </select>
    </p>
    <p>
      <!-- checkbox多选的时候，要把v-model绑定的变量声明为数组 -->
      爱好：<input type="checkbox" value="敲代码" v-model="hobby" /> 敲代码
      <input type="checkbox" value="音乐" v-model="hobby" /> 音乐
      <input type="checkbox" value="嘻哈" v-model="hobby" /> 嘻哈
    </p>

    <p>
        <!-- 单选的是以checked为依据 -->
      性别：<input type="radio" value="男" v-model="gender"> 男 <input type="radio" value="女" v-model="gender"> 女
    </p>

    <!-- 单选的时候v-model变量声明为非数组，绑定的是checked属性 -->
    <!-- <p>
      <input type="checkbox" v-model="agree" > 是否同意用户协议
    </p> -->
    <p>
      自我介绍：<textarea v-model="intro"></textarea>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      city: "茂名",
      hobby: ["敲代码"],
      agree: false,
      gender: "",
      intro: "",
    };
  },
};
</script>

<style>
</style>

8-1.v-model的修饰符

语法：v-model.修饰符="变量"

1.number：转换数字赋值给变量

2..trim：去除首尾空白符赋值给变量

3..lazy：input失去焦点才更新变量

代码演示如下

<template>
  <div>
    <!-- v-model修饰符，语法：v-model.修饰符="变量" -->
    <!-- .number作用是转换为数字类型赋值给变量 -->
    <p>年龄：<input type="number" v-model.number="age" /></p>

    <!-- .trim去除首尾的空白符 -->
    <p>用户名：<input type="text" v-model.trim="username" /></p>

    <!-- .lazy，对于input而言，失去焦点才去更新变量 -->
    <p>搜索：<input type="text" v-model.lazy="search" /></p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      age: 18,
      username: "",
      search: "",
    };
  },
};
</script>

<style>
</style>

9.v-for

作用：遍历数据

语法:(1)v-for="值变量 in 数据" :key="唯一的标记" (key:对象的键，唯一可以是id，实在没有就用索引，不会重复就行)

(2)v-for="(值变量, 索引变量) in 数据"

遍历或者循环的对象可以是：

1.数组

2.对象

3.字符串 -每个字符

4.数字 从1到当前数字

代码演示如下

<template>
  <div>
    <ul>
      <!-- v-for作用：循环列表 -->
      <!-- 语法：v-for="值变量 in 数据" -->
      <li v-for="item in list">{{item}}</li>
    </ul>

    <ul>
      <!-- v-for作用：循环列表 -->
      <!-- 语法：v-for="值变量 in 数据" -->
      <li v-for="(item, index) in list">
        <h1>{{index + 1}}</h1>
        <h2>{{item}}</h2>
      </li>
    </ul>

    <h3>遍历对象</h3>
    <ul>
      <!-- 遍历对象，item是对象的属性值 -->
      <li v-for="item in obj">{{item}}</li>
    </ul>
    <ul>
      <!-- 第二个参数是对象的key -->
      <li v-for="(item, key) in obj">{{key}}: {{item}}</li>
    </ul>

    <h3>字符串遍历</h3>
    <ul>
      <!-- 字符串遍历，是单独遍历每一个字符 -->
      <li v-for="item in message">{{item}}</li>
    </ul>

    <h3>数字的遍历</h3>
    <ul>
      <!-- v-for遍历数字：从1开始到当前数字 -->
      <li v-for="item in 10">{{item}}</li>
    </ul>
    <h3>{{item}}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["杰豪", "万少", "老王"],
      obj: {
        name: "老王",
        age: 18,
      },
      message: "75好棒",
      number: 6,
    };
  },
  methods: {},
};
</script>

<style>
</style>