Vue系列——Vue2基础Api学习
VUE2.0学习css
1. vue介绍
1.1. vue是什么？
- https://vuefe.cn/guide
- vue也是一个数据驱动框架，作spa页面的
- vue若是不作页面能够当作一个单独使用的js库，作双向数据绑定用
- Vue的
核心库只关注视图层,可是vue并不仅关注视图，和angular同样也有指令，过滤器这些东西 - vue有很是强大的单文件组件
- 就是css+html+js都写在一个.vue文件中，这样定义的组件很简洁，清晰，组件化分的很完全
- 而angular中的js文件只能写js
- 虽然react中能够写css-in-js，可是缺少选择器功能，即使能够在js中引入css文件，但仍是不方便
- vue融合了react和angular的优势，而且解决了react和angualr的痛点，vue就是框架界的腾讯
1.2. vue学习地址和技术栈
- Vue2.0中文网：https://vuefe.cn/
- vue全家桶变为vue2.0+vue-router+fetch+vuex
- 咱们下文中所出现的vue都指代vue2.0
1.3. vue和其余框架的对比
- https://vuefe.cn/guide/comparison.html
- vue比市面上的其余框架功能更完善，性能更高效
2. vue快速开始
2.1. 用vue-cli开始
- github地址:https://github.com/vuejs/vue-cli
# 全局安装 vue-cli $ npm install --global vue-cli # 建立一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖，走你 $ cd my-project $ npm install $ npm run dev
- 你只须要关注你配置的东西就能够了，不须要关注webpack的配置项，由于webpack的配置很难，不少人不会，也是为了简便开发
2.2. 本身建立Vue的开发环境
2.2.1. 准备工做
- 升级webstorm到最新版本，老版本对.vue文件的开发是有bug的
- 下载webstorm为Vue提供的插件vue-for-idea，这个插件可让webstorm支持以.vue结尾的文件可以运行
2.2.2. 修改webpack的配置文件
- 把以前react中配置的webpack.publish.config.js和webpack.develop.config.js直接拿过来用
- 下载vue-loader加载器
npm install vue-loader -save-dev
- 配置webpack的loader部分
{
test: /\.js$/, // 用正则来匹配文件路径，这段意思是匹配 js 或者 jsx
loader: 'babel'// 加载模块 "babel" 是 "babel-loader" 的缩写
},
{
test: /\.vue$/,
loader: 'vue'
}
- 单独配置一个vue属性，和entry属性是同级别的
vue: {
loaders: {
js: 'babel'
}
}
- 在项目根目录生成一个.babelrc文件
{
"presets": ["es2015","stage-0","stage-1","stage-2","stage-3"]
// "plugins": ["transform-runtime"]
}
- 修改自动识别.vue的扩展文件名
resolve: {
extensions: ['', '.js', '.json', '.scss', '.vue']
}
- 注意在publish和develop中都要配置
- 下载vue
npm install vue -save - 下载编译模块
npm install vue-template-compiler -save - src/js文件中建立main.js
import Vue from 'vue'
import AppContainer from '../containers/AppContainer'
const app = new Vue({
render: h => h(AppContainer),
}).$mount('#app')
// new Vue({
// el:'#app',
// render: h => h(App)
// })
- 在src/container中建立AppContainer.vue文件
<template>
<div>
{{msg}}
</div>
</template>
<style>
body{
background-color:#ff0000;
}
</style>
<script>
export default{
data(){
return{
msg:'hello vue'
}
}
}
</script>
- 当你第一次建立.vue文件的时候IDE会问你用什么语法去解析，你选择html语法
- 接下来就能够直接运行npm run develop了
- 你能够去google中搜索vue-devtools下载并安装，用于帮你监听组件的data属性变化
3. vue中的基础知识点
3.1. Vue实例
3.1.1. 属性与方法
- 咱们自定义的一些数据和方法是要绑定到实例的不一样属性上面去的
- 例如数据都要绑定要data属性，方法都要绑定到methods方法
- 实例上的data和methods里面的key值会自动挂载到vue实例上，咱们管他们叫动态属性，获取方式直接使
实例.动态属性名 - vue实例上的实例属性要经过
实例.$实例属性名获取 - 在vue实例里面用this，this指向的是vue实例
- 能够经过
this.a去获取动态属性 - 能够经过
this.$data去获取实例属性
- 能够经过
- 实例上有一个$watch方法能够监听data属性里面的数据的变化，data一变会自动触发监听事件的执行
var data = {a: 1}
const app = new Vue({
// 和数据相关的都挂载到data上
data: data,
// 和方法相关的都挂载到methods上
methods: {
// this和$的使用
func1: function () {
console.log(this.a);
console.log(this.$data.a);
},
changeData:function () {
this.a=2
}
}
})
// 先监听再改变
app.$watch('a', function (newVal, oldVal) {
console.log(newVal)
console.log(oldVal)
})
// 值改变以后会自动执行监听方法
// data的值是能够直接改变的，和react的setState方法不同，由于vue里面用了ES6的set和get方法，能够起到自动监听的做用
app.a=3
// 动态属性和实例属性
// console.log(app)
// console.log(app.a)
// console.log(app.$data.a)
3.1.2. 实例生命周期
- 和react的生命周期基本思想是同样的
- 只不过react中是监听props和state属性的变化
- 而在vue中是只监听data属性的变化
- vue中的生命周期函数要比react中的方法多
- 这些生命周期方法只能在spa应用中起做用，单独做为双向数据绑定库没法生效
- vue生命周期图
3.2. 模板语法
- 就是如何在.vue文件的template标签中书写内容
- {{}}（Mustache语法）里面会按照纯文本输出
- v-once指令只会执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上全部的数据绑定：
- v-html会按照html规则去解析内容
- 咱们在为标签的属性赋值的时候不能Mustache语法，咱们要用v-bind指令
- v-bind绑定的属性必须是data属性里面定义的值，若是想写固定的值加单引号
// 错误的写法
<div id="{{id}}"></div>
// 正确的写法
<div v-bind:id="id"></div>
- 在Mustache中能够处理一些简单的js表达式，Mustache中的属性自己有什么方法，在里面也是能够直接使用的
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
- 在Mustache中可使用自定义过滤器，也能够多过滤器串联。可是过滤器不能用在v-bind中，若是想实现相同的效果在v-bind中咱们要用计算属性
{{ message | capitalize }}
{{ message | filterA | filterB }}
new Vue({
// ...
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
- 在dom标签中可使用指令，如v-if，v-for
<a v-on:click="doSomething">
- 在dom的事件中可使用修饰符去帮你简化一些操做
<form v-on:submit.prevent="onSubmit"></form>
- v-bind和v-on在模板语法中能够缩写
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
3.3. 计算属性
- 计算属性能够处理模板语法中的复杂业务逻辑，跟Mustache语法比
-
计算属性 vs methodshtml
- 咱们看到计算属性和methods的效果基本你同样，那么他们的区别是什么？
- 计算属性的依赖若是没有发生变化，当你再次调用计算属性的时候，可以当即返回上次缓存的计算值，而不须要重新执行计算属性的方法
- 而方法须要重新执行方法体
- 样例
<template> <div> <p>Original message: "{{ message }}{{name}}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> <p>Computed reversed message: "{{ reverseMessage() }}"</p> </div> </template> <style> body{ background-color:#ff0000; } </style> <script> export default{ data(){ return{ message: 'Hello', name:'a' } }, mounted(){ this.name="b" }, computed: { reversedMessage: function () { console.log('计算属性被调用了') return this.message.split('').reverse().join('') } }, methods: { reverseMessage: function () { console.log('方法被执行了') return this.message.split('').reverse().join('') } } } </script> -
计算属性 vs watchvue
- watch方法每次只能监听一个data值的变化
- 而计算属性能够同时监听多个data值的变化
- 用计算属性能够简化watch中重复的代码
<!--页面--> <div id="demo">{{ fullName }}</div>//watch写法 var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } }) //计算属性的写法 //本质是你要获取全名 var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) -
计算setterreact
- 计算属性默认是只有getter的，那么data属性里面你的值发生改变了，计算属性要重新执行
- 而setter的做用是调用计算属性的时候给一个初始值，那么data属性里面的值也会跟着作相应的改变
// 接上面的代码段 computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } - vue实例上的观察watch仍是颇有用的，在进行执行异步操做或昂贵操做时，咱们要用watch这个实例属性
- 由于你不要忘记计算属性出现的缘由是为了解决mustache语法中有过多的逻辑操做问题，它只能进行一些小型操做的内容
3.4. Class与Style绑定
- 绑定要用v-bind:class和:bind:style
- v-bind:class指令能够与普通的class属性共存
- 绑定的时候能够给对象，能够个数组，还能够有条件判断和三元表达式
3.5. 条件渲染
- v-if和v-else只能控制一个标签的渲染，并且v-else要紧跟着v-if
- 若是想要控制一部分标签的渲染，须要用
<template>标签包裹，v-if做用在template标签上 - v-show也能够控制标签的显示隐藏，不过只是简单的切换样式
- v-show的元素会始终渲染并保持在 DOM 中，v-if的元素会被移除
- 注意 v-show 不支持
<template>语法
- v-if是惰性的，只有在条件第一次为true的时候才进行局部渲染吧
- v-if有更高的切换消耗，v-show有更高的初始渲染消耗。所以若是须要频繁切换使用v-show较好，若是在运行时条件不大可能改变则使用v-if较好。
3.6. 列表渲染
- v-for是vue中作循环的，值能够给数组，对象，数值三种类型
- 能够用of替换in
- 若是想循环渲染一部分标签，要用template标签包裹，v-for做用在template标签上
- 在循环渲染引入的自定义组件的时候要手动为组件传递item的属性值
<my-components
is="todo-item"
v-for="(item, index) in todos"
v-bind:title="item"
v-on:remove="item.splice(index, 1)"
>
</my-components>
- 在循环渲染的时候要动态的绑定v-bind:key,这样能够提高vue的渲染效率
- Vue 包含一组观察数组的变异方法，只要调用它们将会触发视图更新，而且改变了原数组
- push() pop() shift() unshift() splice() sort() reverse()
- 重塑数组不会改变原来的数据，而是返回一个改变以后的新数据
- filter(), concat(), slice()
- 重塑数组通常是赋值用，这样才能触发vue的从新渲染，而你并不须要担忧性能问题，由于vue会智能的重用数组
- 因为JavaScript 的限制，Vue不能检测如下变更的数组：
- 当你直接设置一个项的索引时，例如： vm.items[indexOfItem] = newValue
- 用Vue.set解决
- 当你修改数组的长度时，例如： vm.items.length = newLength
- 用splice解决
- 当你直接设置一个项的索引时，例如： vm.items[indexOfItem] = newValue
- v-for结合计属性或者methods时能够作数据的过滤和排序
// <li v-for="n in evenNumbers">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
3.7. 事件处理器
- 在v-on:click的时候想既传递参数又想传递事件对象，那么你须要手动传入$event参数
<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
methods: {
warn: function (message, event) {
// 如今咱们能够访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}
- 经常使用事件修饰符
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件再也不重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符能够串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用时间捕获模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素自己（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div> <!-- the click event will be triggered at most once --> <a v-on:click.once="doThis"></a>
- 常见的按键修饰符
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
<!--所有的按键别名：-->
enter
tab
delete (捕获 “删除” 和 “退格” 键)
esc
space
up
down
left
right
ctrl
alt
shift
meta
- 经过全局 config.keyCodes自定义按键修饰符别名,记住要在new新实例以前注册
// 可使用 v-on:keyup.f1 Vue.config.keyCodes.f1 = 112
3.8. 表单控件绑定
- 表单的双向绑定用v-model指令
- 在文本区域插值
<textarea></textarea>并不会生效，应用v-model来代替 - 单个复选按钮绑定的是选中状态，多个复选按钮绑定的是值
- 列表没有value值绑定的是标签内容，有value值绑定的就是value值
- 若是想让表单的value属性绑定到Vue实例的动态属性上，须要用v-bind:value绑定
<input type="radio" v-model="pick" v-bind:value="a">
- .lazy修饰符能够实现单向数据绑定
<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" >
3.9. 组件
- 组件能够扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些状况下，组件也能够是原生 HTML 元素的形式，以 is 特性扩展。
- 组件是相似于angualr中自定义指令，是vue中的一种自定义标签
- 至关于react中的通用组件，高可复用性的（例如：列表，按钮，等待器）
3.9.1. 组件的使用
3.9.1.1. 全局注册组件
- 全局组件的定义必定要在建立根实例以前
- 在全局注册的组件能够在子组件的页面中随意使用
Vue.component('shiguoqing', {
template: '<div>石国庆</div>'
})
const app = new Vue({
el:'#example'
})
3.9.1.2. 局部注册组件
- 在要使用的组价中增长components属性，注册引入的组件并更名，以后才能够在html代码中使用
- 通常局部注册的组件都是经过.vue文件实现的
<template>
<div>
姓名：石国庆，年龄：{{age}},性别：{{genderSex}}
</div>
</template>
<style scope>
div{
background-color:orange;
}
</style>
<script>
export default{
data(){
return{
}
},
props:['age','genderSex']
}
</script>
<template>
<div>
<shi-guoqing></shi-guoqing>
{{msg}}
</div>
</template>
<style>
body{
background-color:#ff0000;
}
</style>
<script>
import Shiguoqing from '../components/Shiguoqing.vue'
export default{
data(){
return{
msg:'hello vue'
}
},
components:{
'shi-guoqing':Shiguoqing
}
}
</script>
3.9.1.3. Dom模板解析问题
-
当你在一些特殊标签如table，ul，ol，select中使用自定义组件的时候会有一些限制webpack
- 例如
<table> <my-row>...</my-row> </table>- 由于Vue只有在浏览器解析和标准化HTML后才能获取模版内容
- 再准确的说也就是用Vue.component方法自定义的组件
- is特性能够解决这个问题
<table> <tr is="my-row"></tr> </table>
-
应当注意，若是您使用来自如下来源之一的字符串模板，这些限制将不适用：git
<script type="text/x-template">- 由于这里面的代码是内连载页面中的
- JavaScript内联模版字符串
- 这个就是template属性
- .vue 组件
- 在webpack构建的时候就已经处理了组件内容为html了
- 所以，有必要的话请使用字符串模版。
-
☆在自定义组件中data属性必须是函数形式☆github
- 也就是在Vue.component中和.vue文件中的data属性
- 若是是父子组件，那么父组件向子组件传递参数用props,子组件向父组件传递参数用$emit广播
3.9.2. props属性
- 参数在传递的过程当中，父组件传递参数用kebab-case（短横线隔开），在子组件接收的时候用camelCase
- 若是传递的属性来自父组件的data属性，也就是向子组件传递动态属性那么须要用v-bind去传递
- 如何传递的属性类型是数值型，那么也须要用v-bind去传递把
<!-- 传递实际的数字 --> <comp v-bind:some-prop="1"></comp>
-
☆注意在JavaScript中对象和数组是引用类型，指向同一个内存空间，若是prop是一个对象或数组，在子组件内部改变它会影响父组件的状态。web
- 注意通常状况下不要在子组件中改变父组件中传递过来的props，可是有两种特殊状况会改变
-
咱们在传递属性的时候能够作属性校验vue-router
- 当prop验证失败了,Vue将拒绝在子组件上设置此值，若是使用的是开发版本会抛出一条警告。
3.9.3. 自定义事件
- 用v-on去绑定自定义事件
- 使用$on(eventName)监听事件
- 使用$emit(eventName)触发事件
- 在自定义组件上是不能够用v-model指令，可是这个效果能够经过自定义组件在内部用自定义事件模拟实现
Vue.component('currency-input', {
template: '\
<span>\
$\
<input\
ref="input"\
v-bind:value="value"\
v-on:input="updateValue($event.target.value)"\
>\
</span>\
',
props: ['value'],
methods: {
// 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
updateValue: function (value) {
var formattedValue = value
// 删除两侧的空格符
.trim()
// 保留 2 小数位
.slice(0, value.indexOf('.') + 3)
// 若是值不统一，手动覆盖以保持一致
if (formattedValue !== value) {
this.$refs.input.value = formattedValue
}
// 经过 input 事件发出数值
this.$emit('input', Number(formattedValue))
}
}
})
- 兄弟组件之间的通讯能够经过bus中央事件总线实现
- 可是更复杂的数据通讯最好仍是用vuex
// 在根组件中注册bus属性
const app = new Vue({
data:{
bus:new Vue()
},
render: h => h(AppContainer),
}).$mount('#app')
// 在子组件中使用
this.$root.bus.$emit('eventName',2323)
3.9.4. slot分发
- 在自定义组件使用的时候，若是页面中有内容，又想让内容在自定义组件中使用，咱们须要养slot标签
- slot标签在一个html标签中只能出现一次
-
做用域插槽是一种特殊类型的插槽，用做使用一个（可以传递数据到）可重用模板替换已渲染元素。vuex
- 通俗的说就是子组件里面的数据能够经过做用域插槽用在父组件页面中的指定区域内
3.9.5. 动态组件
- 组件能够经过is特性动态加载
- 你能够用keep-alive指令缓存组件
3.9.6. 杂项
- 你能够经过ref属性标记一个组件，以后能够用this.$refs.标记的名称或获得该组件
- 当ref和v-for一块儿使用时，ref是一个数组或对象，包含相应的子组件。
- $refs只在组件渲染完成后才填充，而且它是非响应式的。它仅仅做为一个直接访问子组件的应急方案——应当避免在模版或计算属性中使用$refs
- 组件的异步加载
- 组件命名规范
-
组件的递归调用
- 组件上的name属性仍是这个组件在全局注册时候的名字
<unique-name-of-my-component name="unique-name-of-my-component"></unique-name-of-my-component>
- 组件上的name属性仍是这个组件在全局注册时候的名字
-
组件的循环引用
- Vue.component全局注册组件后，这个问题会自动解决，你要作的就是在写代码的时候不要出现组件循环引用
- 内联模板
- 通俗的说就是在定义组件的时候不用给template属性了
- x-Templates
4. vue中的进阶知识点
4.1. 路由
4.2. vuex（数据流）
4.3. vue常见组件库
- 在网上vue的组件库有不少，可是在选择的时候你必定要注意组件库支持的vue版本
4.4. 过渡
4.5. 插件
4.6. 深刻响应原理
4.7. 自定义指令
4.8. 服务器渲染
免责说明
一、本博客中的文章摘自网上的众多博客，仅做为本身知识的补充和整理，并分享给其余须要的coder，不会用于商用。
二、由于不少博客的地址看完没有及时作保存，因此不少不会在这里标明出处，很是感谢各位大牛的分享，也但愿你们理解。
相关文章
- 1. VUE系列二：vue基础
- 2. vue2 基础学习03 （Vue组件的进一步理解）
- 3. Vue2.x学习一：基础入门
- 4. 零基础学vue系列01
- 5. Vue基础学习
- 6. vue基础学习
- 7. Vue--基础学习
- 8. vue系列基础篇（一）
- 9. vue系列基础01
- 10. Web API学习基础一
- 更多相关文章...
- • Kotlin 基础语法 - Kotlin 教程
- • Scala 基础语法 - Scala教程
- • Kotlin学习（二）基本类型
- • Kotlin学习（一）基本语法
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. VUE系列二：vue基础
- 2. vue2 基础学习03 （Vue组件的进一步理解）
- 3. Vue2.x学习一：基础入门
- 4. 零基础学vue系列01
- 5. Vue基础学习
- 6. vue基础学习
- 7. Vue--基础学习
- 8. vue系列基础篇（一）
- 9. vue系列基础01
- 10. Web API学习基础一