Vue 是什么
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

<router-view>  是什么  ?
<router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>,根据嵌套路径,渲染嵌套组件。
More,please refer to this link ,https://router.vuejs.org/zh-cn/api/router-view.html

Vue 项目的最简单分析(主要是入口分析)

Vue 的安装

step 1 先安装vue 的依赖 Node.js  ,请到官网安装最新版本
    查看node ,npm  的版本

step 2 利用淘宝的npm 镜像安装相关的依赖
    npm install -g cnpm --registry=https://registry.npm.taobao.org

step 3 安装全局 vue-cli 脚手架 ,用于搭建所需要的模板
    cnpm install -g vue-cli

step 4  利用vue  cmd  创建项目

vue init webpack vue_test

step 5 cd 到 vue_test 下 安装依赖模块
      cnpm install

step6  npm run dev  启动 项目


step7 npm run build  用来webpack 打包项目 发布


the section  2  

在 项目创建后 ,使用atom 打开项目 后 发现 src  下面有 四个重要的文件和文件夹 分别是
components router  App.vue  and  main.js

但是项目的入口是 index.html

打开 index  会发现有个 div  id  ='app'

这个 id app  就是上文中的 main js  中的   el: '#app',

同时 本文件还引入了 APP.vue  文件   

app 文件 则引入了 router 下 的 index.js  中的路由规则


说明与比较:new Vue() 和 export default {}


在生成、导出、导入、使用 Vue 组件的时候,像我这种新手就会常常被位于不同文件的 new Vue() 和 export default{} 搞得晕头转向。它们含义到底是什么,又有什么异同呢?


首先,Vue 是什么? po 主的理解是 Vue 就是一个构造函数,生成的实例是一个巨大的对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。


所以渲染的时候,可以使用构造 Vue 实例的方式来渲染相应的 html 页面:

每个 Vue 应用的起步都是通过构造函数 Vue() 创建 Vue 的根实例:

new Vue({
    el: '#app'  绑定id  ,挂载点
    ...
})

一个 Vue 实例是一个ViewModel (MVVM 模式) 。
在实例化 Vue 时,要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。



那么 export default {} 又是来干嘛的?


这是在复用组件的时候用到的。假设我们写了一个单页面组件 A 文件,而在另一个文件 B 里面需要用到它,
那么就要用 ES6 的 import/export 语法 ,在文件 A 中定义输出接口 export **,在文件 B 中引入 import **,
然后再生成一个 Vue 实例 new Vue (**),把引入的组件用起来,这样就可以复用组件 A 去配合文件 B 生成 html 页面了。


所以在复用组件的时候,export 和 new Vue 缺一不可。





入门 blog  http://blog.csdn.net/haoshidai/article/details/52244670


Logo

前往低代码交流专区

更多推荐