一: Vue2 核心语法

1. el 和 data

el : 用于配置Vue的生效位置

data : 用于声明响应模式数据

<body>
    <div id="app">
        <p>{{ title }}</p>
        <p>{{ content }}</p>
    </div>
    <script src="../vue.min.js""></script>
    <script>
        // 1.响应式数据与插值表达式
        const vm = new Vue({
            // el 用于配置Vue的生效位置
            el:'#app',
			// data 用于声明响应模式数据
            data () {
                return {
                    title: '这是标题内容',
                    content: '这是内容文本'
                }
            }
        })
    </script>
</body>

2. 插值表达式

<!-- 插值表达式 -->
<p>{{ title }}</p>
<p>{{ content }}</p>
<p>{{ 1 + 2 + 3 }}</p>
<p>{{ 10 > 5 ? "对" :"错"}}</p>

可以在控制台通过定义的Vue实例加属性方式获取数据或者修改数据

3. methods

用于封装逻辑代码

<body>
    <div id="app">
        <!-- 调用函数 -->
        <p>{{ ouput() }}</p>
    </div>
    <script src="../vue.min.js""></script>
    <script>
        // 1.响应式数据与插值表达式
        const vm = new Vue({
            // el:用于配置Vue的生效位置
            el:'#app',
            data () {
                return {
                    title: '这是标题内容',
                    content: 'Sakura'
                }
            },
            //methods 封装逻辑代码
            methods: {
                ouput() {
                    return "你好," + this.content + ",赶紧把Vue学完"
                }
            }
        })
    </script>
</body>

4. compoted 计算属性

methods里的函数调用三次会执行三次

而compoted 中的函数调用三次只会执行一次

<body>
    <div id="app">
        <!-- 调用函数 -->
        <p>{{ ouput() }}</p>
        <p>{{ ouput() }}</p>
        <p>{{ ouput() }}</p>
        
        <!-- 计算属性 -->
        <p>{{ ouputC }}</p>
        <p>{{ ouputC }}</p>
        <p>{{ ouputC }}</p>

    </div>
    <script src="../vue.min.js""></script>
    <script>
        // 1.响应式数据与插值表达式
        const vm = new Vue({
            // el:用于配置Vue的生效位置
            el:'#app',
            data () {
                return {
                    title: '这是标题内容',
                    content: 'Sakura'
                }
            },
            //methods 封装逻辑代码
            methods: {
                ouput() {
                    console.log("methods中的output执行了")
                    return "你好," + this.content + ",赶紧把Vue学完"
                }
            },
            //computed 计算属性:具有缓存性
            computed: {
                ouputC() {
                    console.log("computed中的outputC执行了")
                    return "你好," + this.content + ",赶紧把Vue学完"
                }
            }
        })
    </script>
</body>

5. watch 侦听器

监听没有数据有没有变化

<body>
    <div id="app">
        <!-- 插值表达式 -->
        <p>{{ title }}</p>
        <p>{{ content }}</p>
        <p>{{ 1 + 2 + 3 }}</p>
        <p>{{ 10 > 5 ? "对" :"错"}}</p>



    </div>
    <script src="../vue.min.js""></script>
    <script>
        // 1.响应式数据与插值表达式
        const vm = new Vue({
            // el:用于配置Vue的生效位置
            el:'#app',
            data () {
                return {
                    title: '这是标题内容',
                    content: 'Sakura'
                }
            },
			// watch 侦听器
            watch: {
                title (newvalue,oldvalue){
					// 拿到新旧数据进行操作
                    console.log(newvalue,oldvalue);
                }
            }
        })
    </script>
</body>

6. 指令

v-text 和 v-html

这两个标签都会覆盖标签原始内容

<body>
    <div id="app">
		<!-- 不能解析html内容 -->
        <p v-text="htmlContext">123</p>
		<!-- 可以解析html内容 -->
        <p v-html="htmlContext">123</p>

    </div>
    <script src="../vue.min.js""></script>
    <script>
        // 1.响应式数据与插值表达式
        const vm = new Vue({
            // el:用于配置Vue的生效位置
            el:'#app',
            data () {
                return {
                    title: '这是标题内容',
                    content: 'Sakura',
                    htmlContext:"<span>行内标签</span>"
                }
            },
		)}
    </script>
</body>

v-for

<body>
    <div id="app">
        <p v-for="item in 5">Sakura</p>
              <p v-for="(item,index) in arr">数组遍历:{{ item }}  {{ index }} </p>

    </div>
    <script src="../vue.min.js""></script>
    <script>
        // 1.响应式数据与插值表达式
        const vm = new Vue({
            // el:用于配置Vue的生效位置
            el:'#app',
            data () {
                return {
                    title: '这是标题内容',
                    content: 'Sakura',
                    htmlContext:"<span>行内标签</span>",
                    arr: [10,45,461,562,451]
                }
            },
        })
    </script>
</body>

v-if 和 v-show

v-if 为 false 时销毁元素

v-show 为 false 时候隐藏元素

<body>
    <div id="app">
        <p v-if="bool">Sakura</p>
        <p v-show="bool">Sakura</p>
    </div>
    <script src="../vue.min.js""></script>
    <script>
        // 1.响应式数据与插值表达式
        const vm = new Vue({
            // el:用于配置Vue的生效位置
            el:'#app',
            data () {
                return {
                    bool:false
                }
            }
        })
    </script>
</body>

可以看到v-if的元素被销毁了

v-bind

<body>
    <div id="app">
        <p v-bind:title="title">姓名</p>
        <p :title="title">姓名</p>
    </div>
    <script src="../vue.min.js""></script>
    <script>
        // 1.响应式数据与插值表达式
        const vm = new Vue({
            // el:用于配置Vue的生效位置
            el:'#app',
            data () {
                return {
                    title:"Sakura"
                }
            }
        })
    </script>
</body>

事件指令 @click

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 事件指令:两种写法 -->
        <button v-on:click="output">按钮</button>
        <button @click="output">按钮</button>
    </div>
    <script src="../vue.min.js""></script>
    <script>
        // 1.响应式数据与插值表达式
        const vm = new Vue({
            // el:用于配置Vue的生效位置
            el:'#app',
            data () {
                return {
                    title:"Sakura"
                }
            },
            methods:{
                output () {
                    console.log("执行了");
                    return "你好,"+this.title+",赶紧学vue"
                }
            }
        })
    </script>
</body>
</html>

表单指令 v-model

双向数据绑定

只需要一个输入框，就可以让用户干预响应数据的内容

<body>
    <div id="app">
        <!-- 事件指令:两种写法 -->
        <input type="text" v-model="inputvalue">
        <p v-text="inputvalue"></p>
    </div>
    <script src="../vue.min.js""></script>
    <script>
        // 1.响应式数据与插值表达式
        const vm = new Vue({
            // el:用于配置Vue的生效位置
            el:'#app',
            data () {
                return {
                    title:"Sakura",
                    inputvalue:"表单数据"
                }
            },
            methods:{
                output () {
                    console.log("执行了");
                    return "你好,"+this.title+",赶紧学vue"
                }
            }
        })
        
    </script>
</body>

v-for

<body>
    <div id="app">
        <p v-for="item in 5">Sakura</p>
         <p v-for="(item,index) in arr">数组遍历:{{ item }}  {{ index }} </p>
    </div>
    <script src="../vue.min.js""></script>
    <script>
        // 1.响应式数据与插值表达式
        const vm = new Vue({
            // el:用于配置Vue的生效位置
            el:'#app',
            data () {
                return {
                    title: '这是标题内容',
                    content: 'Sakura',
                    htmlContext:"<span>行内标签</span>",
                    arr: [10,45,461,562,451]
                }
            },
        })
    </script>
</body>

v-if 和 v-show

v-if 为 false 时销毁元素

v-show 为 false 时候隐藏元素

<body>
    <div id="app">
        <p v-if="bool">Sakura</p>
        <p v-show="bool">Sakura</p>
    </div>
    <script src="../vue.min.js""></script>
    <script>
        // 1.响应式数据与插值表达式
        const vm = new Vue({
            // el:用于配置Vue的生效位置
            el:'#app',
            data () {
                return {
                    bool:false
                }
            }
        })
    </script>
</body>

7. 修饰符

有时间修饰符，按键修饰符

<body>
    <div id="app">
        <!-- 事件指令:两种写法 -->
        <input type="text" v-model="inputvalue">
        <p v-text="inputvalue"></p>
        <!-- trim去除空格 -->
        <!-- 会将数据去除空格返回给inputvalue -->
        <input type="text" v-model.trim="inputvalue">
    </div>
    <script src="../vue.min.js""></script>
    <script>
        // 1.响应式数据与插值表达式
        const vm = new Vue({
            // el:用于配置Vue的生效位置
            el:'#app',
            data () {
                return {
                    title:"Sakura",
                    inputvalue:"表单数据"
                }
            },
            methods:{
                output () {
                    console.log("执行了");
                    return "你好,"+this.title+",赶紧学vue"
                }
            }
        })
        
    </script>
</body>

二: vue cli 脚手架

1. 项目创建

安装 Vue

# 表示安装在全局的位置
npm i @vue/cli -g

# 查看vue版本
vue --version

创建项目

# 分别是vue3,vue2和手动功能选择
vue create my_vue_project

# 图形化界面的初始化:会开启一个网页
vue ui

2. 目录结构

package.json

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }

serve可以启动一个本地的静态资源服务器，让项目跑起来，npm run serve

build 将代码打包，npm run build ，位置在 dist 目录下，但是不可以直接运行，需要以服务器的方式运行，所以需要安装一个 npm 工具 serve ，npm i serve -g serve 可以快速启动一个静态资源服务器来进行执行目录下的代码运行

serve dist 即可启动服务器

node_modules 当前项目安装的所有包都保存在这个位置
public：静态资源，不参与编译的资源
src：需要参与编译的资源
components：用于保存所有自定义组件的功能
App.vue：根组件
main.js：Vue 应用的一个入口文件
vue.config.js：Vue 项目的配置文件

3. 组件化开发

在 vue 中存在.vue后缀的文件，这种文件被称为单文件组件

一个组件可以封装一个功能的结构，样式，逻辑这三个部分，对应到文件中就是template script style

4. 如何使用组件

App.vue

首先通过import 方式进行引入组件，然后在components 中定义组件名称，例如项目默认引入的 HelloWorld 组件

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

5. 组件通信

父组件 App.vue 向子组件传值

通过 props 进行处理

在 App.vue 的 HelloWorld标签中传 count

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld 
    msg="Welcome to Your Vue.js App"
    count="10"
    />
  </div>
</template>

子组件中通过props 获取父组件中传递的数据

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>count的值为: {{ count }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  // 父组件向子组件传值使用 props
  //1.父传子
  props: {
    // 简写方式
    msg: String,
    // 对象方式
    count: {
      type:[String,Number],
      // 数据的默认值
      // default: 100,
      // required表示数据必须传过来,父组件没传过来就会报错
      required: true
    }
  }
}
</script>

如果父组件传值了，展示接收到对应的值

如果父组件没有传值，展示设置的默认值

require: true
如果父组件没有传值，可以看到控制台报错了

另外父组件传值也可以通过响应式数据设置

App.vue 的 scripe 标签中

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return{
      parentCount:114514
    }
  }
}
</script>

App.vue 的 tempate 标签

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld 
    msg="Welcome to Your Vue.js App"
    :count="parentCount"
    />
  </div>
</template>

子组件 HelloWorld.vue 向父组件传值

子组件定义一个事件child-count-add ，由父组件进行监听，父组件主要发现执行了这个时间，就会接收这个值
子组件调用this.$emit("child-count-add",this.childCount) 来触发事件

子组件

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      childCount:0
    }
  },
  methods:{
    add(){
      this.childCount++
      // 子组件定义一个事件
      // 只要每次触发这个事件,就把参数传过去
      this.$emit("child-count-add",this.childCount)

    }
  }
}
</script>

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="add">按钮</button>
    <p>子组件中的数据childCount: {{ childCount }}</p>
  </div>
</template>

父组件

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>从子元素传过来的childData:{{ childData }}</h1>

    <HelloWorld 
    msg="Welcome to Your Vue.js App"
    @child-count-add="handler"
    />
  </div>
  <!-- 通过 @+事件名称 监控定义事件 -->
</template>

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return{
      parentCount:114514,
      childData:0
    }
  },
  methods:{
    handler (childCount){
      this.childData =childCount
    }
  }
}
</script>

6. 组件插槽

默认插槽

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>从子元素传过来的childData:{{ childData }}</h1>

    <HelloWorld 
    msg="Welcome to Your Vue.js App"
    @child-count-add="handler"
    >HelloWordld0</HelloWorld>

    <HelloWorld >HelloWorld1</HelloWorld>
    <HelloWorld >HelloWorld2</HelloWorld>
    <HelloWorld >HelloWorld3</HelloWorld>

  </div>
</template>

<template>
  <div class="hello">
    <slot>默认内容</slot>
    <h1>{{ msg }}</h1>
    <button @click="add">按钮</button>
    <p>子组件中的数据childCount: {{ childCount }}</p>
  </div>
</template>

具名插槽

<template>
  <div class="hello">
    <!-- <slot>默认内容</slot> -->
    <slot name="footer" >具名插槽的默认内容</slot>

    <h1>{{ msg }}</h1>
    <button @click="add">按钮</button>
    <p>子组件中的数据childCount: {{ childCount }}</p>
  </div>
</template>

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>从子元素传过来的childData:{{ childData }}</h1>

    <HelloWorld 
    msg="Welcome to Your Vue.js App"
    @child-count-add="handler"
    >HelloWordld0
    <template v-slot:footer>
      第一个footer
    </template>
    </HelloWorld>

    <HelloWorld >HelloWorld1</HelloWorld>
    <HelloWorld >HelloWorld2</HelloWorld>
    <HelloWorld >HelloWorld3</HelloWorld>

  </div>
</template>

通过插槽传值

首先要在子组件中绑定数据到slot

<template>
  <div class="hello">
    <!-- <slot>默认内容</slot> -->
    <slot name="footer" :childCount="childCount" >具名插槽的默认内容</slot>

    <h1>{{ msg }}</h1>
    <button @click="add">按钮</button>
    <p>子组件中的数据childCount: {{ childCount }}</p>
  </div>
</template>

传过来的是一个对象，用 dataObj 接收

通过dataObj.childCount 获取对那

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>从子元素传过来的childData:{{ childData }}</h1>

    <HelloWorld 
    msg="Welcome to Your Vue.js App"
    @child-count-add="handler"
    >HelloWordld0
    <template #footer="dataObj">
      第一个footer {{ dataObj.childCount }}
    </template>
    </HelloWorld>
  </div>
</template>

目录CONTENT

Vue快速入门

一: Vue2 核心语法

1. el 和 data

2. 插值表达式

3. methods

4. compoted 计算属性

5. watch 侦听器

6. 指令

v-text 和 v-html

v-for

v-if 和 v-show

v-bind

事件指令 @click

表单指令 v-model

v-for

v-if 和 v-show

7. 修饰符

二: vue cli 脚手架

1. 项目创建

2. 目录结构

3. 组件化开发

4. 如何使用组件

5. 组件通信

6. 组件插槽

默认插槽

具名插槽

评论区