Vue基础

最新推荐文章于 2022-10-18 22:41:49 发布

大神，求带

最新推荐文章于 2022-10-18 22:41:49 发布

阅读量207

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_43473279/article/details/115583639

版权

vue 专栏收录该内容

5 篇文章

订阅专栏

1.vue的三个特点

数据双向绑定、组件化、单文件组件

2.vue的基本使用

vue的MVVM的体现：model代表模型，view代表视图（即页面），viewModel代表视图模型（vue实例）

<div id="app">
    <input type="text" v-model="username">
    <p>Hello {{username}}</p> // 显示使用{{}}
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    //创建Vue实例
    const vm = new Vue({ // 配置对象
        el:'#app', // 根element:选择器
        data:{ //数据（Model）
            username:'hello world'
        }
    })
</script>

3.模版语法

1.指令：v-bind强制数据绑定

<body>
  <div id="app">
      <p>{{msg}}</p>
      <p>{{msg.toUpperCase()}}</p> 
      <img src="imgSrc" alt="">
  </div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Word',
            imgSrc: 'http://image.luokangyuan.com/1.jpg'
        }
    })
</script>
</body>

上述代码的img标签是获取不到data定义的imgSrc属性的值，就需要使用指令的强制数据绑定。

<img :src="imgSrc" alt=""> === <img v-bind:src="imgSrc">

2.指令：绑定事件监听

v-on绑定事件监听指令的作用就是绑定指定事件名的回调函数。v-on

<body>
  <div id="app">
      <button v-on:click = 'test1'>test1</button>
      <button v-on:click = 'test2(msg)'>test2</button>
      <button @click = 'test'>test</button>
  </div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Word',
            imgSrc: 'http://image.luokangyuan.com/1.jpg'
        },
        methods: {
            test1() {
                alert(123)
            },
            test2(content) {
                alert(content)
            },
            test() {
                alert(123)
            }
        }
    })
</script>
</body>

4.计算属性和监视

1.在computed属性对象中定义计算属性的方法，在页面中只用{{方法名}}来显示计算的结果。

2.计算属性的get和set

3.监视

通过vm对象$watch()方法或者watch配置来监视一个属性的值是否变化，当属性值发生变化时，通过执行回调函数执行相关的功能。下面代码是使用计算属性完成的功能。

<body>
  <div id="app">
      姓：<input type="text" placeholder="姓氏"  v-model="firstName"><br>
      名：<input type="text" placeholder="名字" v-model="lastName"><br>
      姓名2（单向）：<input type="text" placeholder="姓名2" v-model="fullName2"><br>
  </div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
   var vm =  new Vue({
        el: '#app',
        data: {
            firstName: 'A',
            lastName: 'B',
            fullName2: 'A B'
        },
        watch: {
            // 这个方法就是监视firstName，值发生改变是被调用执行函数
            // 函数可以传入两个参数代表新值和改变之前的值，也可以传一个，也可以不传
            firstName: function(value){ 
                this.fullName2 = value+ ' ' + this.lastName
            }
        }
    })
    vm.$watch('lastName',function(value){
        this.fullName2 = this.firstName + ' ' + value
    })
</script>
</body>

5.class和style绑定

在某些页面，某些元素的样式是动态变化的，class和style绑定就是用来实现动态改变样式效果的技术，其中class绑定中，表达式可以是字符串、可以是对象、也可以是数组。

<p :class="a"></p>
<p :class="{}"></p>
<p :style="{}"></p>

6.条件渲染

在vue中条件渲染使用v-if、v-else、v-show指令。

7. 列表渲染

列表渲染使用v-for指令，可以渲染数组和对象，遍历时需要指定唯一的index或者key，另外做数组删除和更新操作时使用数组的变异方法。

8.生命周期

在这里插入图片描述

9.内置指令

v-model用法
实现双向绑定，输入form的各个值，进行提交。

<template>
  <div class="container">
    <div class="form-box">
      <el-form v-model="form"
               label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-select v-model="form.school"
                     placeholder="请选择">
            <el-option key="1"
                       label="本科"
                       value="1"></el-option>
            <el-option key="2"
                       label="硕士"
                       value="2"></el-option>
            <el-option key="3"
                       label="博士"
                       value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      form: {
        name: '',
        school: '',
      }
    }
  },
  methods: {
    onSumbit () {
      this.$message.success('提交成功！');
    }
  }
}
<script>

在这里插入图片描述

10.vue请求方法 axios

11.vue组件库

12.vue路由

我们在src目录下新建三个文件，分别为page1.vue page2.vue以及router.js


<template>
    <div>
        <h1>page1</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是page1组件"
            }
        }
    }
</script>

<template>
    <div>
        <h1>page2</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是page2组件"
            }
        }
    }
</script>

//引入vue
import Vue from 'vue';
//引入vue-router
import VueRouter from 'vue-router';
//第三方库需要use一下才能用
Vue.use(VueRouter)
//引用page1页面
import page1  from './page1.vue';
//引用page2页面
import page2  from './page2.vue';

//定义routes路由的集合，数组类型
const routes=[
    //单个路由均为对象类型，path代表的是路径，component代表组件
    {path:'/page1',component:page1},
    {path:"/page2",component:page2}
    //默认路由1.可以配置重定向
    {path:'',redirect:"page1"}
    //默认路由2.或者重新写个路径为空的路由
    {path:"",component:page1}
]

//实例化VueRouter并将routes添加进去
const router=new VueRouter({
//ES6简写，等于routes：routes
    routes
});

//抛出这个这个实例对象方便外部读取以及访问
export default router

main.js

import Vue from 'vue'
import App from './App'
//引用router.js
import router from './router.js'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
//一定要注入到vue的实例对象上
  router,
  components: { App },
  template: '<App/>'
})

app.vue

<template>
   <div id="app">
    <img src="./assets/logo.png"/>
//router-link定义页面中点击触发部分　　
      <router-link to="/page1">Page1</router-link>
      <router-link to="/page2">Page2</router-link>
//router-view定义页面中显示部分
    <router-view></router-view>
  </div>
</template>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

路由导航：

1.标签导航：标签导航是通过转义为标签进行跳转，其中router-link标签中的to属性会被转义为a标签中的href属性；

//跳转到名为user路由，并传递参数userId
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

2.编程式导航：我们可以通过this.$router.push()这个方法来实现编程式导航，当然也可以实现参数传递，这种编程式导航一般是用于按钮点击之后跳转。

router.push({ name: 'user', params: { userId: 123 }})

命名路由：

有的时候，通过一个名称来标识一个路由显得更方便一些，所以官方为了方便我们偷懒，又给我们在路由中添加了一个name属性，命名这个属性之后我们访问这个属性就等于直接访问到路由；

普通路由

router.push({ path: '/user/:userId', params: { userId: 123 }})

命名路由

router.push({ name: 'user', params: { userId: 123 }})