vue.js 是一套构建用户界面的渐进式框架与其他重量级框架不同的是, vue 从根本上采用最小成本渐进增量的设计 Vue 的核心库只专注于视图层, 并且很容易与其他第三方库或现有项目集成另一方面, 当与单文件组件和 Vue 生态系统支持的库结合使用时, Vue 也完全能够为复杂的单页应用程序提供有力驱动
运行环境搭建
Vue 引入方式一般有两种:
第一种 CDN 引入
<script src="[https://cdn.jsdelivr.net/npm/vue](https://cdn.jsdelivr.net/npm/vue)"></script>
第二种搭建脚手架 CLI
所谓脚手架是通过 webpack 搭建的开发环境, 用于快速搭建大型单页面应用程序能够为现代前端开发的工作流程, 带来持久强力的基础架构只需几分钟, 就可以建立并运行一个带有热重载保存时代码检查以及可直接用于生产环境的构建配置的项目
首先必须先安装 node.js,Node.js 在 0.6.3 版本开始内建 npm, 所以安装好 node.js 后, npm 也就装好然后在通过 git bash 操作以下命令行:
- $ node -v// 检查是否已经装好了 node
- $ npm -v// 检查是否已经装好了 npm
- $ npm install --global vue-cli // 安装 vue-cli
- $ vue init webpack project// 进入目标文件夹创建一个新项目
- $ cd project// 进入新项目
- $ npm install// 安装 package.json 中依赖的 node_modules
- $ npm run dev// 运行该项目
最后打开 http://localhost:8080, 就出现下面的页面, 标志着脚手架搭建完成了
介绍 SRC 文件流程及根组件 App
脚手架搭建完成后, project 里面各个文件夹及文件, 如下图:
脚手架各个文件和文件夹
src 文件流程介绍
index.html(入口文件)=>main.js=>App.vue(根组件), 根组件中模板内容就直接插入到入口文件中 #app 处, 然后再将页面呈现出来
根组件 App 介绍
主要由三部分组成, 分别为模板 (html 结构), 行为(处理逻辑) 和样式(解决样式)
vue 组件嵌套
vue 组件嵌套是指写好的子组件如何与根组件取得关联, 通常可以分为组件全局定义和组件局部定义, 后者比较常见
1. 组件全局定义
一般以下两个步骤:
main.js 引入子组件
App.vue 组件中 template 调用
- //main.js
- import Vue from 'vue'
- import App from './App'
- import Users from "./components/Users";// 引入子组件 Users
- Vue.config.productionTip = false
- Vue.component("users",Users);// 自定义名字便于 App.vue 组件调用, 后者为组件名
- new Vue({
- el: '#app',
- components: { App },
- template: '<App/>'
- })
- //App.vue 组件
- <template>
- <div id="app">
- <users></users>// 在这里调用, 自定义名字是小写的
- </div>
- </template>
2. 组件局部定义
一般以下三个步骤:
import 引入子组件
export default 注册子组件
template 模板中加入子组件
根组件 App
父组件向子组件传值
接下来我们通过一个例子, 说明父组件如何向子组件传递值: 在子组件 Users.vue 中如何获取父组件 App.vue 中的数据 users:["Henry","Bucky","Emily"]
1. 创建子组件, 在 src/components / 文件夹下新建一个 Users.vue 子组件
2. 在 App.vue 中注册 Users.vue 组件, 并在 template 中加入 users 标签
- //App.vue 父组件
- <template>
- <div id="app">
- <users v-bind:users="users"></users>// 前者自定义名称便于子组件调用, 后者要传递数据名
- </div>
- </template>
- <script>
- import Users from "./components/Users"
- export default {
- name: 'App',
- data(){
- return{
- users:["Henry","Bucky","Emily"]
- }
- },
- components:{
- "users":Users
- }
- }
3.Users.vue 的中创建 props, 然后创建一个 users 的属性
- //users 子组件
- <template>
- <div class="hello">
- <ul>
- <li v-for="user in users">{{user}}</li>// 遍历传递过来的值, 然后呈现到页面
- </ul>
- </div>
- </template>
- <script>
- export default {
- name: 'HelloWorld',
- props:{
- users:{ // 这个就是父组件中子标签自定义名字
- type:Array,
- required:true
- }
- }
- }
- </script>
子组件向父组件传值(通过事件形式)
接下来我们通过一个例子, 说明子组件如何向父组件传递值:
当我们点击 Vue.js Demo 后, 子组件向父组件传递值, 文字由原来的传递的是一个值变成子向父组件传值, 实现子组件向父组件值的传递
子组件向父组件传值之前
1. 在子组件 (header 组件) 中文字部分绑定一个点击事件
- <template>
- <header>
- <h1 @click="changeTitle">{{title}}</h1>// 绑定一个点击事件
- </header>
- </template>
- <script>
2. 子组件中响应该点击事件的函数中使用 $emit 来触发一个自定义事件, 并传递一个参数
- <script>
- export default {
- name: 'app-header',
- data() {
- return {
- title:"Vue.js Demo"
- }
- },
- methods:{
- changeTitle() {
- this.$emit("titleChanged","子向父组件传值");// 自定义事件 传递值子向父组件传值
- }
- }
- }
- </script>
3. 在父组件 (App 根组件) 中的子标签中监听该自定义事件并添加一个响应该事件的处理方法
- <template>
- <div id="app">
- <app-header v-on:titleChanged="updateTitle($event)" ></app-header>// 与子组件 titleChanged 自定义事件保持一致, updateTitle($event)接受传递过来的文字
- <h2>{{title}}</h2>
- </div>
- </template>
- <script>
- import Header from "./components/Header"
- export default {
- name: 'App',
- data(){
- return{
- title:"传递的是一个值"
- }
- },
- methods:{
- updateTitle(e){ // 声明这个函数
- this.title = e;
- }
- },
- components:{
- "app-header":Header,
- }
- }
- </script>
总结
在通信中, 无论是子组件向父组件传值还是父组件向子组件传值, 他们都有一个共同点就是都有中间介质, 子向父的介质是自定义事件, 父向子的介质是 props 中的属性
来源: http://www.jianshu.com/p/6fd90f3bb8a3