Vue前端从入门到精通（一）

作者: MsterKerrigan | 来源:发表于2018-03-13 14:32 被阅读0次

以单文件的方式启动
    单文件就是以*.vue结尾的文件，最终通过webpack也会编译成*.js在浏览器运行
    内容：<template></template>+<script></script>+<style></style>
    1、template中只能有一个根节点 2.x
    2、script中 按照export default{配置} 来写
    3、style中可以设置scoped属性，让其只在template中生效
    webpack找人来理解单文件代码
        vue-loader,vue-template-compiler，代码中依赖vue
vue的安装：
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    cnpm install -g webpack
    npm install -g vue-cli
创建vue项目：
    vue init webpack-simple 项目名
编辑方式：
    使用sublime text打开
运行方式：
    cd 项目目录
    npm install
    npm run dev
    浏览器打开：localhost:8080
关于es6的学习：
    Vue CLI脚手架
        脚手架是通过webpack搭建的开发环境
        使用es6语法
        打包和压缩js为一个文件
        项目文件在环境中编译，而不是浏览器
        实现页面的自动刷新
    build：
        构建了客户端和服务端
        包括端口号
    config:
        配置文件
    static：
        静态文件
    README.md：
        使用教程
    src:
        assets:
            图片
        components:
            组件
        App.vue：
            
        main.js:
            跟index.html直接关联的，然后进入App.vue，App.vue是模板，包含了html结构和处理逻辑、解决样式
            template不会渲染到DOM中去，只能有一个root Element
    组件的使用：
        注册一个全局的组件
        取名的时候不能取和系统标签冲突的，否则在引入标签的时候会冲突
    组件css的作用域：
        scoped只能在当前的域内使用
    属性传值Props：
        放到App.vue中，传给子组件，调用的时候给子组件
        最好的办法是指定对象，指定相应的属性
        绑定属性传具体的值，或者传引用：Array、object
        传引用的时候，一个地方发生变化，全部的就一起跟着变化
    v-router