介绍了 Vue 核心最基本的功能
Vue.js 是什么
Vue 是一套用于构建用户界面的渐进式框架。
1.兼容性
vue不支持ie8及以下版本
2.要安装哪些
在用vue构建大型应用时推荐使用npm安装。
3.组件
因为组件是vue可复用的实例，所以它们与new Vue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等
组件的名称和对象的形式
prop属性
$emit绑定事件
插槽slot
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>组件的基础知识prop</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="app"> <button-counter title="title1：" @clicknow="clicknow"> <h2>插槽</h2> </button-counter> <button-counter title="title2："></button-counter> </div> <script> Vue.component('button-counter',{ props:['title'],//为组件定义属性，对属性进行应用和渲染 data:function(){ return{ count:0 } }, template:'<div><h1>同个模版内加个div包裹</h1><button v-on:click="clickfun">{{title}}you clicked me {{count}} times.</button><slot></slot></div>', methods: { clickfun:function(){ this.count++; this.$emit('clicknow',this.count) } }, }) var vm= new Vue({ el: '#app', data: { }, methods: { clicknow:function(e){ console.log("e:",e) } }, }) </script> </body> </html>
效果图：
待续中。。。