vue单页应用程序spa--day01

xiaoxiao2021-04-19  174

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

课程大纲:

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

VS Code插件 自动补全标签

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

什么是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>
转载请注明原文地址: https://www.6miu.com/read-4821229.html

最新回复(0)