vue 学习笔记

yhaolpz 发布于2019-08-23 12:19 / 513人阅读

1.vue的开始

var vm = new Vue({
    el: "#app",        //            el: 用来挂载 Vue 实例的元素
    data: {},          //          data: 要绑定的资料
    props: {},         //         props: 用来接收外部资料的属性
    methods: {},       //       methods: 用来定义在 Vue 实例内使用的函数(方法)
    watch: {},         //         watch: 用来观察 Vue 实例内资料的变动
    computed: {},      //      compoted: 自动为内部资料计算过的属性
    template: "...",   //      template: 提供 Vue 实例编译后的样板
    components: {}     //    components: 用来定义子元件
});

2.组件注册

组件注册分为两种：局部注册和全局注册

2.1 组件局部注册

2.2 组件全局注册

2.3 复杂组件的打包？

// 子组件怎么做？怎么用？


// 对于复杂的组件，可以将其用下面的方法打包
var app2 = new Vue({
    el: ".app2",
    components: {
        CustomHeader: Vue.extend({        // extend 是构造一个组件的语法器. 你给它参数 他给你一个组件
            template: "header"
        }),

        CustomMain: Vue.extend({
            template:
                "" +
                  "Main" +
                  "" +
                  "" +
                  "" +
                  "" +
                  "" +
                  "" +
                  "" +
                "",
            components: {
                CustomBlock: Vue.extend({
                    template: "B"
                })
            }
        }),

        CustomAside: Vue.extend({
            template: "Aside"
        })
    }
});

3.将网页模板封装成 Component 3.1 将 HTML 模板封装在js中

    var CustomMain = Vue.extend({
        template:
            "" +
              "Main" +
              "" +
              "" +
              "" +
              "" +
              "" +
            "",
        components: {
            CustomBlock
        }
    });

3.2 将 HTML 模板封装在HTML的Script标签中

3.3 render function ?

Vue的template模板其实最后会被vue引擎编译为 render function，最终渲染到网页上

4.Vue元件生命周期


    {{ count }}

4.2追踪物件变化

Object.defineProperty() 的MDN文档

资料变动检测

5.props 从外部接受指定的资料

// props 案例1

// props 案例2


    你的成绩评价

5.1 Prop 接收参数验证

组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告。当组件给其他人使用时这很有用。
prop 是一个对象而不是字符串数组时，它包含验证要求：

5.2 单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。


    单向数据流：

    Parent: {{ message }} 

    

    Child:

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98316.html

(原创)vue 学习笔记

摘要：菜鸟教程这是一个属性其值是字符串菜鸟教程同上这是一个属性其值是字符串用于定义的函数，可以通过来返回函数值。它们都有前缀，以便与用户定义的属性区分开来。开篇语我最近学习了js,取得进步,现在学习vue.js.建议新手学习,请不要用npm的方式(vue-cli,vue脚手架),太复杂了. 请直接下载vue.js文件本地引入,就上手学习吧参照菜鸟教程网站的vue.js教程http://...

layman 2019-08-22 18:09 评论0 收藏0
Vue.js学习系列二 —— vuex学习实践笔记（附DEMO）

摘要：有兴趣的同学可以查看之前发布的文章学习系列一学习实践笔记附学习系列二学习实践笔记附学习系列三和网络传输相关知识的学习实践学习系列四打包工具的使用学习系列五从来聊聊学习系列项目地址项目暂时有点乱，之后会进行整理优化。上次学习了vue-router的使用，让我能够在各个页面间切换，将页面搭建了起来。这次则要学习vue的状态管理模式——vuex。它类似于redux来应用的全局状态。注：本...

DobbyKim 2019-08-21 15:52 评论0 收藏0
Vue学习笔记2

摘要：声明式渲染的引入初步使用错误笔记中的忘记大写，的忘了加引号以及忘了在末尾加逗号指令鼠标悬停几秒钟查看此处动态绑定的提示信息特性被称为指令。指令带有前缀，以表示它们是提供的特殊特性。声明式渲染 vue的引入初步使用vue {{message}} var app=new Vue({ el: #app, data:{ me...

CatalpaFlat 2019-08-22 18:41 评论0 收藏0
Vue学习笔记1

摘要：声明式渲染的引入初步使用错误笔记中的忘记大写，的忘了加引号以及忘了在末尾加逗号指令鼠标悬停几秒钟查看此处动态绑定的提示信息特性被称为指令。指令带有前缀，以表示它们是提供的特殊特性。声明式渲染 vue的引入初步使用vue {{message}} var app=new Vue({ el: #app, data:{ me...

winterdawn 2019-08-22 18:41 评论0 收藏0