Vue前端从入门到精通(一)

以单文件的方式启动
    单文件就是以*.vue结尾的文件,最终通过webpack也会编译成*.js在浏览器运行
    内容:++
    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

Vue前端从入门到精通(一)_第1张图片
属性传值的两种方法

Vue前端从入门到精通(一)_第2张图片
Vue组件的生命周期1

Vue前端从入门到精通(一)_第3张图片
Vue组件的生命周期2

Vue前端从入门到精通(一)_第4张图片
Vue组件的调用

Vue前端从入门到精通(一)_第5张图片
vue的api

Vue前端从入门到精通(一)_第6张图片
Vue反转输入内容的方式

你可能感兴趣的:(Vue前端从入门到精通(一))