zoukankan      html  css  js  c++  java
  • vue 框架的安装和入门介绍

    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


  • 相关阅读:
    X264参考手册
    X264码率控制总结
    x264_param_t结构体解释,设置及对应函数位置
    FFmpeg与libx264 x264接口对应关系源代码分析
    x264源代码学习1:概述与架构分析
    X264使用指南
    X264学习1:简介
    PHPMailer 使用 中文乱码
    laravel学习之路5缓存
    laravel学习之路4artisan
  • 原文地址:https://www.cnblogs.com/TendToBigData/p/10501200.html
Copyright © 2011-2022 走看看