Vue前端从入门到精通(一)
2018-03-13 本文已影响0人
MsterKerrigan
以单文件的方式启动
单文件就是以*.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
属性传值的两种方法
Vue组件的生命周期1
Vue组件的生命周期2
Vue组件的调用
vue的api
Vue反转输入内容的方式