美文网首页
VUE学习之路(一)--- 初识VUE

VUE学习之路(一)--- 初识VUE

作者: manjh | 来源:发表于2018-04-01 10:55 被阅读0次

    一、初识VUE

    资料来源:vue官网API文档

    安装:同一般JS组件安装,引用CDN、或者引用其js文件

    兼容性:Vue 不支持 IE8及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5的浏览器

    二、基础语法(散装梳理)

    var vm = new Vue({})

    demo:

    new Vue({

        el: "#vue-app",

        data: {

            name: "Vue",

            isButtonDisabled: true, 

            number:1,

            ok:true,

            message:"1234"

        },

        methods: { greet: function () { return "hello VUE"; } } });

    // el  绑定元素

    // data 是Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter,从而让data属性能响应数据变化

    // method 绑定事件

    /**

    *其他属性:

    * computed: 计算属性函数computed将被混入到Vue实例中。所有getter和setter的this上下文自动地绑定为Vue实例

    * watch: 提供了一种通用的方式来观察和响应Vue实例上的数据变动:watch属性。watch属性是一个对象,键是需要观察的表达式,值是对应回调函数,回调函数得到的参数为新值和旧值。值也可以是方法名,或者包含选项的对象。Vue实例将会在实例化时调用$watch(),遍历watch对象的每一个属性

    *render: (h)=>{h(App)}, //DOM成员(3/3)字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力

    * props   props:['counts','ids'], 用于父子组件的eventbus传值,是数组或对象,props的成员是子组件接收的来自父组件的数据

    *propsData  没用过。创建实例时传递 props。主要作用是方便测试 filters //资源(1/3)

    *filters('filterName',(input,function(){ return newvalue })) 包含 Vue 实例可用过滤器的哈希表。

    * directives   包含 Vue 实例可用指令的哈希表。

    * components   (即该组件的子实例)这里是包含 Vue 实例可用组件的哈希表。

    * name /  允许组件模板递归地调用自身。注意,组件在全局用 Vue.component() 注册时,全局 ID 自动作为组件的 name

    * parent  指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。

    * mixins  mixins 选项接受一个混合对象的数组。Mixin钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用

    * extends   允许声明扩展另一个组件。这主要是为了便于扩展单文件组件。这和 mixins 类似,区别在于,组件自身的选项会比要扩展的源组件具有更高的优先级。

    * delimiters  改变纯文本插入分隔符。

    * functional   使组件无状态(没有 data )和无实例(没有 this 上下文)。他们用一个简单的 render 函数返回虚拟节点使他们更容易渲染。  

    */

    其指令与angularjs指令类似

    相关文章

      网友评论

          本文标题:VUE学习之路(一)--- 初识VUE

          本文链接:https://www.haomeiwen.com/subject/yiafjxtx.html