vue

什么是vue

1.构建用户界面

用vue往html页面中填充数据非常方便

2.框架

框架是一套现成的解决方案程序员只能遵守框架的规范去编写自己的业务能力
要学习vue 就是在学习vue框架中规定的用法
vue的指令组件(是对UI结构的复用) 路由 Vuex vue组件库
只有把上面罗列的内容掌握以后才有开发vue 项目的能力

vue框架的特性

一：数据驱动视图

数据的变化会驱动视图自动更新
好处：程序员只管把数据维护好那么页面结构就会被vue自动渲染出来

二：双向数据绑定

在网页中 form表单负责采集数据 Ajax负责提交数据
js数据的变化会被自动渲染到页面上
页面上表单采集的数据发生变化时会被vue自动获取到并更新到js数据中

注意：数据驱动视图和双向数据绑定的底层原理MVVM(Mode数据源，View视图，ViewModel就是vue的实例)

Vue

<!-- 希望Vue能够控制下面这个div 帮我们再把数据填充到div内部 -->
    <div id="app">{{ username }}</div>

    <!-- 1.导入Vue的库文件 在window全局就有了Vue这个构造函数-->
    <script src="./lib/vue-2.6.12.js"></script>
    <!-- 2.创建Vue的实例对象 -->
    <script>
        // 创建Vue的实例对象
        const vm = new Vue({
            // el属性是固定写法 表示当前vm实例要控制页面上的哪个区域 接收的值是一个选择器
            el: '#app',
            // data 对象就是要渲染到页面上的数据
            data: {
                username: 'zhangsan'
            }
        })
    </script>

el属性的使用注意 el直接写标签只会识别第一个最外面包裹一个大div即可

vue-cli

单页面应用程序简称 SPA 顾名思义指的是一个Web网站中只有唯一的一个HTML页面 所有页面的交互都在这唯一的一个页面内完成

vue-cli是Vue.js开发的标准工具它简化了程序员基于webpack创建工程化的Vue项目的过程

程序员可以专注在撰写应用上而不必花好几天时间去纠结webpack配置的问题

使用在终端下运行如下命令创建指定名称的项目

vue create 项目的名称

第一项 vue3项目
第二项 vue2项目
第三项手动选择我们要安装哪些功能到vue项目中建议选择最后一项按上下键选择

2. 按空格键选择要是否安装上下键选择要安装的

3. 先创建vue2的项目

4. 选择 Less

5. 选择第一个即可意为把Babel ESlint等插件的配置项放到自己独立的文件中

6.创建完成

7.运行用上一步的最后两行终端窗口不能关闭

vue项目中 src 目录的构成

assets 文件夹：存放项目中用到的静态资源文件
components 文件夹：程序员封装的可复用的组件都要放到components 目录下
main.js 是项目的入口文件整个项目的运行要先执行 mian.js 4.App.vue是项目的根组件可以看到的ui解构

vue项目运行的过程

通过main.js把App.vue渲染到index.html的指定区域中
App.vue 用来编写待渲染的模板结构
index.html 中要预留一个el区域
main.js把App.vue渲染到了index.html所预留的区域中
Vue实例的$mount方法作用和el属性完全一样

组件化

组件化开发：根据封装的思想把页面上可重用的UI结构封装为组件从而方便项目的开发和维护
vue是一个支持组件化开发的前端框架 vue中规定组件的后缀名是 .vue
vue 组件的三个组成部分

template->组件的模板结构只能有一个根元素
script->组件的javascript行为
style->组件的样式添加lang="less" 属性启用less语法加一个scoped属性不会导致页面冲突
组件中的data必须是一个函数 data(){} 在函数里面 return一个数据对象

<script>
// 默认导出
export default {
  // data 数据源
  //   注意：.vue 组件中的 data 不能像之前一样 不能指向对象
  //   组件中的data必须是一个函数
  //   data: {
  //     username: "zs",
  //   },
  data() {
    //   这个return出去的 {} 中 可以定义数据
    return {
      username: "admin",
    };
  },
  methods: {
    changeName() {
      // 在组件中 this就表示当前组件的实例对象
      console.log(this);
      this.username = "哇哈哈";
    },
  },
  //   当前组件中的侦听器
  watch: {},
  //   当前组件中的计算属性
  computed: {},
  //   当前组件中的过滤器
  filters: {},
};
</script>

使用组件的三个步骤

使用import语法导入需要组件 import Left from "@/components/Left.vue";
使用components节点注册组件

export default {
  data() {},
  methods: {},
  components: {
    Left,
    Right
  },};

3.以标签形式使用刚注册的组件 <Left></Left>

注册全局组件只需要注册一次每个都可以用
在入口文件 mian.js中通过 Vue.component()方法注册全局组件

// 导入需要被全局注册的组件
import Count from '@/components/Count.vue'
// 注册组件 第一个参数是组件名称 也就是等会用的标签名 
Vue.component('MyCount', Count)

组件之间的数据共享

1. 父子关系

父组件向子组件共享数据需要使用自定义属性 props

注意不能修改props中的内容自定义属性在子组件中声明父组件只负责绑定子组件属性和传值

<div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <Left :msg="message" :user="userinfo"></Left>
    </div>
//引入组件
import Left from "@/components/Left.vue";
export default {
  data() {
    return {
      message: "hello 132",
      userinfo: { name: "wsc", age: 18 },
    };
  },
  components: {
    Left,
  },
};

   <p>msg的值是 {{ msg }}</p>
   <p>user的值是 {{ user }}</p>
export default {
  props: ["msg", "user"],
};

子组件向父组件共享数据使用自定义事件 子组件

export default{
  data(){
    return{count:0}
  },
  methods:{
    add(){
    this.count+=1
    //修改数据时通过$emit()触发自定义事件
    this.$emit('numchange',this.count)
     }
  }
}

父组件

<Son @numchange="getNewCount"></Son>
export default{
  data(){
    return{countFromSon:0}
  },
  methods:{
    getNewCount(Val){
      this.countFromSon=Val
    }
  }
}

兄弟关系兄弟组件之间的数据共享方案是 EventBus

创建eventBus.js模块并向外共享一个Vue的实例


import Vue from "vue";
export default new Vue();

在数据发送方 调用bus.$emit('事件名称',要发送的数据) 方法触发自定义事件


 <button @click="send">发送</button>
// 1.导入eventBus.js模块
import bus from "./eventBus.js";
data() {
    return {
      str: "黑云压城城欲摧",
    };
  },
methods: {
    send() {
      // 通过eventBus来发送数据
      bus.$emit("share", this.str);
    },
  },

在数据接收方调用bus.$on('事件名称',事件处理函数)方法注册一个自定义事件在数据接收方的creaded生命周期中调用bus.$on()方法

// 1.导入eventBus.js模块
import bus from "./eventBus.js";

data() {
    return {
      // 接收
      masFromLeft: "",
    };
  },
   created() {
    // 2.为bus绑定自定义事件
    bus.$on("share", (Val) => {
      console.log(Val);
      this.masFromLeft = Val;
    });
  },

vue笔记

vue