【可视化】Vue基础

来源|达达前端小酒馆Vue介绍Vue框架，框架的作者，有雨溪，组件化，快速开发的特点。生命周期beforeCreate：组件刚刚创建created：组件创建并生成beforeMount：挂载前mounted：挂载后成熟beforeDestory：组件销毁前调用destroyed：组件销毁后调用oldinstallation：全局安装：vue-clinpminstall--globalvue-cli根据webpack模板新建项目vueinitwebpackmy-project安装依赖：cdmy-projectnpminstallnpmrundev@代表src目录：importVuefrom'vue'importRouterfrom'vue-router'importHellofrom'@/components/Hello'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',name:'hello',component:Hello}]})生命周期call:beforeCreatecreatedbeforeMountmountedinstancelifecyclehookssuchascreatedhooknewVue({data:{a:1},created:function(){//`this`指向vm实例console.log('ais:'+this.a)}})//=>"ais:1"生命周期钩子的this上下文指向调用它的Vue实例。生命周期图选项数据：data、computed、methods定义全局组件变量：computed:{//内部函数msg(){returnthis.a*2;}}@click="say('hi')"methods:{say(){}}模板语法数据，直接嵌入js代码、指令、v-html、v-on、v-bind等，计算属性,模板中的过滤器。

v-on:click=""简写@click{{msg.split('').reverse().join('')}}this.msg.split('').reverse().join('');类与样式绑定class1