vue初级02

Component

<div id="app">
	<common></common>
</div>

为什么要在data函数中return数据？
避免全局影响。

new Vue({
	el:"#app"
})

Vue.component("common",{
	// 模板——只有一个根元素
	template:`<div>{{content}}component
		<button @click="changeContent">点击改变内容</button>
	</div>`,
	data(){
		return {
			content:"第一个"
		}
	},
	methods:{
		changeContent(){
			this.content="第二个";
		}
	}
})

Vue CLI脚手架
1 脚手架是通过webpack搭建的开发环境
2 使用ES6语法
3 打包和压缩JS为一个文件
4 项目文件在环境中编译，而不是浏览器
5 实现页面自动刷新

// 创建一个webpack开发环境的vue项目
vue init webpack my-project

? project name 项目名称
?project desription 项目描述
?author 作者
?vue build
?install vue-router?
?use eslint to lint your code?
?set ip unit tests
?setup e2e tests with nightwatch?
yarn/npm

vue-cli3.0
vue ui直接图形化项目更为直观

vue creat my-project
#or
vue ui

渲染执行顺序 入口文件 逻辑文件 组件
index.html -> main.js -> App.vue
App.vue
1 template 页面结构
有，且只能有一个跟标签

<template>
	<div id="app">
		<HelloWorld/>
	</div>
</template>

2 script 处理逻辑

// 全局注册组件
// mian.js
import 'HelloWorld' form './components/HelloWord';
Vue.component('HelloWorld',HelloWorld);
// 局部注册组件
import HelloWorld form './components/HelloWorld'
export default {
	name: 'app',
	// 注册组件
	components: {
		// HelloWorld
		// "HelloWorld":HelloWorld
	}
}

3 style 样式处理

// 在style标签加上scoped声明样式作用域与之相匹配，避免组件样式之间覆盖
<style scoped>
	...
</style>