目录
vue脚手架即@vue/cli,Cli是command line interface是一个基于Vue.js进行快速开发的完整系统,Vue CLI致力于将Vue生态中的工具基础标准化,它确保了各种构件工具能够基于智能的默认配置即可平稳衔接,这样就可以专注在撰写应用上,而不必花好几天就纠结配置的问题。
脚手架
安装脚手架
npm install -g @vue/cli // 安装的是@vue/cli
或者
yarn global add @vue/cli
npm install -g vue-cli // 安装的是vue-cli
安装后可通过vue --version来检查其版本是否正确;
创建项目
切换到你要创建项目的目录,然后使用命令创建项目:
vue create 项目名称 // 用脚手架@vue/cli创建
vue init webpack 项目名称 // 用脚手架vue-cli创建
启动项目
npm run serve // 用脚手架@vue/cli
npm run dev // 用脚手架vue-cli
备注:
若出现下载缓慢请配置npm淘宝镜像:npm config set registry https://registry.npm.taobao.org
vue工程中,main.js是入口文件;当项目启动后,就会立马去找到该入口文件;
关于不同版本的vue:
1、vue.js与vue.runtime.xxx.js的区别
vue.js是完整版的Vue,包含:核心功能+模板解析器
vue.runtime.xxx.js是运行版的Vue,只包含核心功能,没有模板解析器;
2、一般引入的都是vue.runtime.xxx.js,但因为它是运行版的Vue,没有模板解析器,所以不能使用template配置项,需要使用render函数接收到的createElement函数去指定具体内容;
render: h => h(App),
prop配置项
prop配置项可以让组件接收外部传过来的数据
prop的基本用法很简单,主要有三种方式:
- 法一:以数组形式
<script>
export default {
name: 'HelloWorld',
props: [
'name', 'age', 'sex'
]
}
</script>
<student name="yung" age="19" sex="男"></student>
- 法二:以对象形式限制类型
如果希望每个prop都有指定的值类型,则可用该方法:
props: {
name: String,
age: Number,
sex: Boolean,
}
- 法三:以对象形式限制属性、必要性、默认值
props: {
name: {
type: String, // 类型
required: true, // 必要性
default: "小红" // 默认值
},
school: {
type: String, // 类型
required: true, // 必要性
default: "红星小学" // 默认值
}
}
如果prop中有一个限制没得到满足,则就会在浏览器控制窗口中警告用户;
- 动态prop
刚才三种方式皆是传递的静态值,prop也可以通过v-bind进行动态赋值;
传入一个数字
<!-- 即便 `42` 是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:likes="post.likes"></blog-post>
传入一个布尔值
<!-- 包含该 prop 没有值的情况在内,都意味着 `true`。-->
<blog-post is-published></blog-post>
<!-- 即便 `false` 是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>
传入一个数组
<!-- 即便数组是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>
传入一个对象
<!-- 即便对象是静态的,我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post
v-bind:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"
></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>
传入一个对象的所有property
如果你想要将一个对象的所有 property 都作为 prop 传入,你可以使用不带参数的v-bind (取代v-bind:prop-name)。例如,对于一个给定的对象post:
post: {
id: 1,
title: 'My Journey with Vue'
}
下面的模板:
<blog-post v-bind="post"></blog-post>
等价于:
<blog-post
v-bind:id="post.id"
v-bind:title="post.title"
></blog-post>
- 单向数据流
所有的prop都使得其父子prop之间形成一个单向下行绑定:父级prop的更新会向下流动到子组件中,但是反过来则不行,这样可以防止从子组件意外变更父级组件的状态,从而导致应用的数据流向难以理解;
另外,每次父级组件发生变更时,子组件中所有的prop都将会刷新为最新的值,这意味着不应该在一个子组件内部改变prop,若这样做了,则Vue会在浏览器的控制台中发出警告;
这里有两种常见的试图变更一个prop的情形:
1、这个prop用来传递一个初始值;这个子组件接下来希望将其作为一个本地的prop数据来使用;
这种情况下,最好定义一个本地的data property并将这个prop用作其初始值;
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
2、这个prop以一种原始的值传入且需要进行转换。这种情况下,最好使用这个prop的值来定义一个计算属性:
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
综上:prop是是只读的,Vue底层会监测对props的修改,若进行了修改,则会发出警告,若业务需求确实需要修改,则需要复制props的内容到相应位置,然后再去修改复制的数据;
若data配置项中属性与props配置项中的属性重复,则优先使用props的属性值;
混入(mixins)
它提供了一种非常灵活的方式,来分发Vue组件中的可复用功能(即多个组件共享一个配置),一个混入对象可以包含任意组件选项,当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项;
首先定义混入:
{
data() {...},
methods: {...}
...
}
第二步:使用混入
Vue.mixin(xxx) // 全局混入
mixins:['xxx'] // 局部混入
谨慎使用全局混入,一旦使用全局混入,它将影响每一个之后创建的Vue实例。
插件
插件通常用来为Vue添加全局功能。插件的功能范围没有严格的限制---一般有下面几种:
1、添加全局方法或者property,如vue-custom-element
2、添加全局资源:指令/过滤器/过渡等。如vue-touch
3、通过全局混入来添加一些组件选项。如vue-router
4、添加Vue实例方法,通过把它们添加到Vue.prototype上实现。
5、一个库,提供自己的API,同时提供上面提到的一个或多多个功能,如vue-router
所以,插件的本质是包含install方法的一个对象,install的第一个参数是Vue,第二个参数是插件使用者传递的数据;
使用插件
通过全局方法Vue.use()使用插件,它需要在你调用new Vue()启动应用之前完成,即:
// 调用 `MyPlugin.install(Vue)` 全局使用插件
Vue.use(MyPlugin)
new Vue({
// ...组件选项
})
Vue.use会自动组织多次注册相同插件,届时即使多次调用也只会注册一次该插件。
Vue.js官方提供的一些插件(如vue-router)在检测到Vue是可访问的全局变量时会自动调用Vue.use()、但在像CommonJS这样的模块环境中,应该始终显示的调用Vue.use();
// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了调用此方法
Vue.use(VueRouter)
定义插件
对象.install = function(Vue, options) {
// 1. 添加全局过滤器
Vue.filter(...)
// 2. 添加全局指令
Vue.directive(...)
// 3. 配置全局混入
Vue.mixin(...)
// 4.添加实例方法
Vue.prototype.$myMethod = function() {...}
Vue.prototype.$myProperty = xxxx
}