Vue基础知识分享

目录

---

Vue基础

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页面应用的Web应用框架。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。Vue.js 最核心的功能有两个，一是响应式的数据绑定系统，二是组件系统 —— [ 维基百科 ]

Vue安装

• 直接<script>引入
• npm安装
• 命令行工具cli

Vue声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。数据和 DOM 已经被建立了关联，所有东西都是响应式的。 —— [ 维基百科 ]

Vue组件化

组件系统是 Vue 的重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
—— [ 维基百科 ]

Vue常用指令

v-bind 数据绑定，响应式更新HTML特性

<template>
    <span v-bind:title="message">
      鼠标悬停几秒钟查看此处动态绑定的提示信息！
    span>
template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: '页面加载于 ' + new Date().toLocaleString(),
    }
  }
}
script>

效果展示

v-model 给DOM双向绑定数据

<template>
    <p>{{ message }}p>
    <input v-model="message">
template>

效果展示

v-on 监听DOM事件

<template>
    <p>{{ message }}p>
    <button v-on:click="reverseMessage">逆转消息button>
template>

<script>
export default {
  name: 'app',
  data () {
    return {
      message: 'This is a new Vue.js Project",
    }
  },
  methods:{
  reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
}
script>

效果展示

点击button按钮逆转绑定的数据内容后，变成如下：

v-if 根据条件渲染div、class etc.

<template>
    <p v-if="seen">现在你看到我了p>
template>

v-show 根据条件展示元素的选项，实现功能类似v-if

<template>
    <p v-show="ok">Hello!p>
template>

效果展示

当seen和ok都true时，审查页面元素时两个<p>标签均可见

如果将seen的值设为false，页面审查元素时会发现，此时v-if根据条件将所对应的<p>标签的内容删除了。

如果将ok的值设为false，页面审查元素时会发现，此时v-show根据条件将所对应的<p>标签的内容隐藏了，并没有将对应的标签进行删除。

总结v-if和v-show的区别，v-if 删除/添加页面的Dom元素，所以v-if 有更高的切换消耗。v-show 控制的隐藏出现，只是将css属性设为了display：none 或block。因此，如果需要频繁切换的需求场景v-show比较合适,反之v-if 较好。

v-for 根据一组数据，进行列表渲染

<template>
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      li>
    ol>

template>

<script>
export default {
  name: 'app',
  data () {
    return {
      todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个项目' }
      ],
    }
  }
}
script>

效果展示

Vue组件化

父组件向子组件传值

• 父组件parent.vue

<template>
  <div id="app">
    <Child message="父组件向子组件传值">Child>
  div>
template>

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

• 子组件child.vue

<template>
  <div>
    <h2>child子组件部分h2>
    <p>{{message}}p>
  div>
template>

<script>
  export default{
    props:["message"],
  }
script>

总结

• 1.子组件在props中创建一个属性，用以接收父组件传过来的值
• 2.父组件中注册子组件
• 3.在父组件标签中添加子组件props中创建的属性
• 4.把需要传给子组件的值赋给该属性

子组件向父组件传值

• 父组件parent.vue

<template>
  <div id="app">
    
    <child :message="parentMsg" v-on:listenToChildEvent="showChildMessage">child>
  div>
template>

<script>
import child from './components/child'
export default {
  name: 'App',
  data() {
    return {
      parentMsg : "父组件的值会变化"
    }
  }
  components :{
    child
  },
  methods: {
    showChildMessage(data){
      alert(data)
    }
  }
}
script>

• 子组件child.vue

<template>
  <div>
    <h2>child子组件部分h2>
    <button v-on:click="sendMsgToParent">向父组件传值button>
  div>
template>

<script>
  export default{
    methods:{
      sendMsgToParent(){
        this.$emit("listenToChildEvent","this message is from child")
      }
    }
  }
script>

总结

• 1.子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
• 2.将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法
• 3.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

在通信中，无论是父传子还是子传父，都需要依靠中间介质进行值传递。父传子的中间介质是props属性，子传父的中间介质是自定义事件。

Vue路由

创建一个单页面应用需要用到Vue的功能。

其中1,2,3,6均由JavaScript实现，4,5由html实现。

• 1.创建组件构造器

<template>
    <div>
        <h1>Homeh1>
        <p>{{msg}}p>
    div>
template>
<script>
  export default{
    data(){
       return {
          msg : "Hello,vue router!"
          }
      }
  }
script>

<template>
    <div>
        <h1>Abouth1>
        <p>This is the tutorial about vue-router.p>
    div>
template>

• 2.创建路由实例

Vue router = new VueRouter()

• 3.路由映射

import Home from '@/components/home'
import About from '@/components/about'

Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/home',
      name:'home',
      components:{
      main: Home
      }
    },
    {
      path:'/about',
      name:'about',
      components:{
        main: About
      }
    }

• 4.使用v-link(router-link)指令跳转

<template>
    <router-link to="home">router-link>
    <router-link to="about">router-link>
template>

• 5.使用<router-view>标签渲染组件

<router-view>router-view>

当用户点击v-link指令元素时，vue-router首先会去查找v-link指令的路由映射，然后根据路由映射找到匹配的组件，最后将组件渲染到<router-view>标签。

• 6.启动路由
  在第3步路由映射中，Vue.use就是启动路由方式之一。

效果展示

https://keepfool.github.io/vue-tutorials/06.Router/basic/basic_01.html#!/home

资源链接

https://download.csdn.net/download/double_hui/10587431

参考链接

[1]: https://cn.vuejs.org/v2/guide/custom-directive.html
[2]: https://www.cnblogs.com/avon/p/5943008.html

---