vue单页应用程序spa--day01

最新推荐文章于 2024-09-05 19:50:25 发布

JunXian9102

最新推荐文章于 2024-09-05 19:50:25 发布

阅读量262

点赞数

分类专栏： vuejs相关项目文章标签： vue

本文链接：https://blog.csdn.net/smiple9102/article/details/82996948

版权

vuejs相关项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

day01：
渐进式：jq大类方法：操作dom，vue使用数据驱动编程，达到操作dom的目的。
框架：jq是库，封装了很多方法，直接调用即可。
框架实际就是一整套的解决方案，按照官网的规范开发。
单页应用程序spa：局部更新页面。

课程大纲：

vue组件式开发：
前后端分离：后端只关注与数据输出（提供api接口）或者业务逻辑处理，前端负责url的跳转以及传参，二者独立开发互不依赖。

VS Code插件
自动补全标签

Auto Close Tag
Auto Complete Tag
Auto Rename Tag
开启一个服务器浏览HTML网页，第一次使用需要Ctrl + Shift + p输入 live server选择open
Live Server
路径自动补全
Path Intellisense
vue语法高亮和自动补全代码
Vetur
VueHelper

什么是MVVM

- M => Model(数据模型)
- V => View(视图模型,负责将数据模型转化成UI展现出来，就是那些DOM结构)
- VM => ViewModel(一个同步View和Model的对象)

vue中使用组件：

兄弟组件传值：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue2.js"></script>
  </head>
  <body>
    <div id="app">
      <father></father>
    </div>
    <script>
      // 创建一个空的vue实例，作为事件总线
      var eventbus = new Vue()

      Vue.component('father', {
        template:`
                    <div>
                      <son></son>
                      <daughter></daughter>
                    </div>
        `,
        components: {
          // 儿子组件
          son: {
            data () {
              return {
                mySisterName: '???'
              }
            },
            template: '<span>我妹妹告诉我她叫{{mySisterName}}</span>',
            mounted () {
              // 通过eventbus的$on()方法去监听兄弟节点发射过来的事件
              // $on有两个参数，一个是事件名称，一个是函数，该函数的默认值就是传递过来的数据
              eventbus.$on('tellBroMyName', data => {
                this.mySisterName = data
              })
            }
          },
          // 妹妹组件
          daughter: {
            data () {
              return {
                myName: '兰兰'
              }
            },
            template: '<button @click="emitMyName">点击就告诉哥哥我叫{{myName}}</button>',
            methods: {
              emitMyName() {
                // 通过事件总线发射一个事件名称和需要传递的数据
                eventbus.$emit('tellBroMyName', this.myName)
              }
            }
          }
        }
      })
      var vm = new Vue({
        el: '#app',
        data: {

        }
      })
    </script>
  </body>
</html>