Vuejs学习笔记整理(二)

最新推荐文章于 2022-06-14 10:59:47 发布

原创最新推荐文章于 2022-06-14 10:59:47 发布 · 277 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue.js 专栏收录该内容

26 篇文章

订阅专栏

博客介绍了Vue的核心特性，其核心库关注视图层，采用简洁模板语法将数据渲染进DOM，以数据驱动页面。还提到组件系统是Vue重要概念，可构建大型应用，父组件能通过prop为子组件传值，Vue实例也有有用的实例属性与方法。

Vue 的核心库只关注视图层

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

Vue的是以数据驱动页面，页面中使用变量来表示可变的数据

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

父组件为子组件传值使用prop：

<div id="app">
    <ol>
        <food-item v-for="item in foods"
                   v-bind:food="item"
                   v-bind:key="item.id">
        </food-item>
    </ol>
</div>

  Vue.component('food-item',{
        //父组件使用prop将数据传递给子组件
        props:['food'],
        template:'<li>{{ food.text }}</li>'
    });
    new Vue({
        el:'#app',
        data:{
            foods:[
                {id: 0, text: 'apple'},
                {id: 1, text: 'water'},
                {id: 2, text: 'sweet'}
            ]
        }
    });

Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})