Vue.js核心概念与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_59459898/article/details/123819683

01 vue 和 element 的绑定

一个初始的html中，引用vue的cdn,创建一个vue实例

首先需要在vue实例中是使用el来绑定div元素

这样才能实现以后的数据双向绑定

知识点

el 就是 element 既元素，表示要绑定的元素

{{}}数据绑定表达式之所以叫表达式是因为里面还可以进行加减拼接计算等js的表达式

<div id="app">
    <p>{{Array}}</p>
</div>

<script>
new Vue({
    el: "#app",
    data: {
        Array: "重新复习Vue"
    }
})
</script>

02 v-bind 数据绑定和 v-on 事件绑定

在vue中使用v-bind绑定数据,使用v-on绑定事件

知识点

v-bind 可以直接使用 ==:==来代替

v-on 可直接使用==@==来代替

v-bind绑定的数据不用=={{}}==

v-on 绑定的事件也不用==( )==

<body>
    <div id="app">
        <img v-bind:src="url">
        <button v-on:click="say">点击</button>
    </div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            url: "img/1.png"
        },
        methods: {
            say() {
                alert("hello word!")
            }
        },
    })
</script>

03 methods中的 this指向

methods中 this 指向vue实例,所以可以直接访问到data里的属性

这里就可以修改url的值进行图片地址的修改

<body>
    <div id="app">
        <img :src="url">
        <button @click="change">点击</button>
    </div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            url: "img/1.png"
        },
        methods: {
            change() {
                this.url = "img/b.png"
            }
        },
    })
</script>

##04 创建vue 脚手架项目

当你有安装过node环境后,可以使用npm node自带的包管理工具,下载vue/cli 也就是vue的脚手架,使用它可以帮助我们快速搭建一个vue项目

npm install @vue/cli -g(全局安装) 
vue create 项目名字  创建vue3项目
npm run serve vue3项目启动命令

默认配置文件

node_modules  依赖
public        静态文件
src           主文件
package.json  记录依赖 和 部分命令配置

另外知识

vue中采用es6的规范使用import 和export

而后台node中采用 common.js 的规范使用 require 和 exports

main.js

Vue.config.productionTip = false  //配置开发选项  友好的错误提示  改为true 则无报错 一般上线时会改为true

new Vue ({
	render:h=>(app),
}).$mount("#app")

这个 mount 的意思是挂载到 public 中的index.html 中 div 的id ,它是cli底层文件自动配置的

render:h=>(app) 
其实就是
render(h){
    return h(app)
}
详细一点
render(createElement){
	return createElement(app)
}

其实就是把src中 app.vue单文件组件渲染到mount中的#app中
从而在html文件中加载 app.vue单文件组件

在单文件组件中 我们的data也跟之前引入vuejs不一样
cli之后我们是在node环境中
所以要使用 
data(){
    return {
        array:"复习vue"
    }
}

05 v-if 和 v-show

知识点

v-if 和 v-show自带数据绑定不用再加 :

v-if 和 v-show 的区别

v-if 完全消失 docment 节点元素都没有了

而 v-show 只是不展示代码里还是有的

 <div id="app">
        <h1 v-if="true">小米</h1>
        <h1 v-show="isLogin">小红</h1>
    </div>
</body>
<script>
    new Vue({
        el: "#app ",
        data() {
            return {
                isLogin: false
            }
        }
    })
</script>

06 v-for

v-for 可以遍历数组，同样不用==：==绑定

v-for 可以用 in 遍历也可以用 of 遍历

V-for循环遍历数组时推荐使用of，语法格式为(item，index)

item:迭代时不同的数组元素的值
index:当前元素的索引

for循环遍历对象时推荐使用in，语法格式为(item,name,index)

item:迭代时对象的键名键值
name:迭代时对象的键名
index:当前元素的索引

记得绑定 ==🔑==值保证唯一性使之不用缓存

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in array" :key="index">
                {{item}}
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el: "#app ",
        data() {
            return {
                array: ["张三", "李四", "王五", "赵六"]
            }
        }
    })
</script>

07组件引入

通过下面代码既可知注册一个vue组件导出后可在另一个vue实例中复用

//第一个组件
<template id="temp"> 
  <div>
    {{array}}
  </div>
</template>

<script>
  export default{
    name:"bpp",
    data() {
      return {
        array:"组件注册"
      }
    }
  }
</script>

<template>
  <div id="app">
    <bpp></bpp>
  </div>
</template>

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

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

08 组件数据传递

1.父传子——通过props传值

实际上父传子就是通过在父级组件使用中传自定义属性，子级通过关键字props 来接收使用

知识点

注意是键值对传值父级传一个自定义属性属性值为data数据子级接收的和使用的都是属性名的值

注意 props 的格式是一个数组数组里是传过来的属性名

注意 props是一个单独的模块不在data 里也不在方法里

注意父传子的属性名前要加 : v-bind

//子组件 child
<template>
    <div>
        <p>{{data}}</p>
    </div>
</template>
<script>
export default {
    name:"child",
    props: ['data'],
}
</script>

//父组件
<template>
  <div id="app">
    <child :data="childdata"></child>
  </div>
</template>

<script>
import child from "./components/chid.vue"
export default {
  name: 'App',
  components: {
    child
  },
  data() {
    return {
      childdata:"abcdefg"
    }
  }
}
</script>

2.子传父——通过 this.$emit传值

原理是子集可以通过 this.$emit 访问到父级的自定义方法，并传值。

父级通过自己的自定义方法获得子级传来的值并储存到data中

知识点

父级通过自定义事件传值需要在div中的子组件上定义一个自定义事件，并把事件的值写为一个普通事件

子级通过调用this.$emit方法时记得方法名为父级的自定义事件名并且记得加==“”==号

//子组件
<template>
  <div>
    <button @click="setchild" >点击获取父组件值</button>
  </div>
</template>
<script>
export default {
  name: "child",
  data() {
    return {
      childdata: "child data",
    };
  },
  methods: {
    setchild() {
      this.$emit("myevent", this.childdata);
    },
  },
};
</script>

//父组件
<template>
  <div id="app">
    <child  @myevent="getchild"></child>
    <p>{{getchilds}}</p>
  </div>
</template>

<script>
import child from "./components/chid.vue"
export default {
  name: 'App',
  components: {
    child
  },
  data() {
    return {
      getchilds:''
    }
  },
  methods: {
    getchild(data){
      this.getchilds = data
      console.log(data)
    }
  },
}
</script>

09 计算属性和监听器

1.计算属性 computed

计算属性就是一些数据处理放在computed中

直接当做普通属性调用不加括号

任何data中数据变化立即重新计算

计算属性会缓存

<template>
  <div>
    <p>姓名:{{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fristname: "张",
      lastname: "三",
    };
  },
  computed: {
    name() {
      return this.fristname + lastname;
    },
  },
};
</script>

2.监听器 watch

监听器中的方法为data中的变量名，括号中的返回值为变量名修改后的值

一般当一个值引起多个值改变的时候用监听器

多个值引起一个值改变时用computed

<template>
  <div>
    <p>单价:{{ armb }}</p>
    <div>
      <button @click="change(1)">-</button>
      <p>数量:{{ age }}</p>
      <button @click="change(2)">+</button>
    </div>
    <P>总价:{{ all }}</P>
  </div>
</template>

<script>
export default {
  data() {
    return {
      armb: 20,
      age: 0,
      all: 0,
    };
  },
  methods: {
    change(m) {
      console.log(m);
      if (m == 2) {
        this.age++;
      } else {
        this.age--;
      }
    },
  },
  watch: {
    age(age) {
      this.all = this.armb * age;
    },
  },
};
</script>

10 生命周期

在创建每一个==.vue==文件也就是每一个vue实例时，都会加载一些函数。这些函数就是vue的生命周期，下面这张图描绘了vue的生命周期。

常用的周期函数

created() 初始化完成时

mounted() 模板创建完成时

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IgOzdNyn-1648533234530)(D:\杂杂碎碎\桌面\webp)]

11 插槽

1.插槽的基本使用

创建一个父子组件，在子组件中写==，父组件使用子组件时，slot位置写的东西就会替换，简单来说，插槽就是起到一个占坑==的作用。

//home.vue父组件
<test>
     Hello Word
</test>

//test.vue子组件
<a href="#">
	 <slot></slot>
</a>

注意

父级模板里的所有内容都是在父级作用域中编译的；

子模板里的所有内容都是在子作用域中编译的；

也就是说在父组件中要替换插槽的内容可以使用父组件的数据方法

默认内容

可以在子组件的插槽中加入默认的内容，如果父组件中没有写插槽内容，则显示默认的内容

###2.具名插槽

当我们一个组件中需要多个插槽时，这个时候我们就需要给每个插槽加上他们自己的名字以区别，如果一个插槽不加name的话，那它的name默认为default。

当使用具名插槽时，需要父组件使用====,并在上面使用

v-slot来绑定子组件的插槽名。

完整的写法为====

//子组件
<div>
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

//父组件
<div>
   <template v-slot:header>
    <h1>Here might be a page title</h1>
   </template>
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
  <template v-slot:footer>
    <p>Here some contact info</p>
  </template>
</div>

3.作用域插槽

在父组件中可以直接使用父组件的数据，但当我们需要在插槽中使用子组件的数据时，我们

可以在子组件的插槽中绑定一个属性，值为子组件的数据。在父组件中组件名中使用

v-slot:name=“传参”，使用传参.子组件数据就可以使用子组件的值了。

//子组件
//test.vue
<div>
	<!-- 设置默认值：{{user.lastName}}获取 Jun -->
	<!-- 如果home.vue中给这个插槽值的话，则不显示 Jun -->
	<!-- 设置一个 usertext 然后把user绑到设置的 usertext 上 -->
	<slot v-bind:usertext="user">{{user.lastName}}</slot>
</div>

//定义内容
data(){
  return{
	user:{
	  firstName:"Fan",
	  lastName:"Jun"
	}
  }
}

//父组件
//home.vue
<div>
  <test v-slot:default="slotProps">
    {{slotProps.usertext.firstName}}
  </test>
</div>

当插槽只有一个时，我们也可以忽略插槽的名字直接使用

//父组件
//home.vue
<div>
  <test v-slot="slotProps">//这里	
    {{slotProps.usertext.firstName}}
  </test>
</div>

4 v-slot 语法糖

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header

原来写法

<div>
   <template v-slot:header>
    <h1>Here might be a page title</h1>
   </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here some contact info</p>
  </template>
</div>

语法糖写法

<div>
   <template #header>
    <h1>Here might be a page title</h1>
   </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here some contact info</p>
  </template>
</div>

12 表单双向绑定 v-model

在表单上使用v-model="数据"可以使表单和数据进行双向绑定。不深入学习的话也只有这些内容。

下面是v-model配合一些方法使用

<div id="app">
        <!-- 1、lazy:可以不用实施刷新，等到按回车在刷新 -->
        <input type="text" v-model.lazy='a'>
        <h2>{{a}}</h2>
        <!-- 2、number：由于输入框不管输入什么都会自动改为字符串，
        所以就想变成数字就加一个number -->
        <input type="text" v-model.number='b'>
        <h2>{{b}}-{{typeof b}}</h2>
        <!-- 3、trim:就是会去除输入的空格啥的 -->
        <input type="text" v-model.trim='c'>
        <h2>你的名字：{{c}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script>
        const app = new Vue({
            el:'#app',  
            data:{
                a:1,
                b:1,
                c:1
            }
        })
    </script>

13 Router 路由

先用命令行安装router npm install router vue-router --save
在index.js里面配置

//router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes=[

]
const router =new VueRouter({
    routes,
    mode:'history'//链接没有#的模式
}）

export default router

// main.js
router import router from './router'
new Vue({
	router //这里加入router
)

14 axios 网络请求

安装 axios npm install --save axios vue-axios

use使用

vue-axios是按照vue插件的方式去写的。那么结合vue-axios，就可以去使用vue.use方法了
首先在主入口文件main.js中引用

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

getNewsList(){
      this.axios.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })
}

原型挂载使用

import axios from 'axios'
Vue.prototype.$axios= axios

this.$axios.get('api/getNewsList').then((response)=>{
        this.newsList=response.data.data;
      }).catch((response)=>{
        console.log(response);
      })