vue基础复习

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-onv-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);
      })
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值