Vue 学习
vue 学习记录。
参考网址
-
Vue-router : https://router.vuejs.org/zh/
建议
- 建议还是用 npm 安装，开始用 cnpm 安装的时候失败
理解 Vue
数据相关的属性
-
所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。
var vm = new Vue({ // 选项 }) -
当数据更改的时候，vue视图才会渲染。只有当实例被创建时
data中存在的属性才是响应式的 ，也就是说如果在创建 vue 实例的时候没有绑定 data 属性，那么后期添加的属性是不会动态追踪，视图也不会对应更改。- 定义为空的初始值
- Object.freeze() : 会阻止现有现有的属性更改，响应系统不会追踪变化
Vue 实例还暴露了一些有用的实例属性与方法。 它们都有前缀
$，以便与用户定义的属性区分开来。 这属性是 Vue自己已经定义好了的。
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
生命钩子介绍
不要在选项属性或回调上使用箭头函数， 这样会抛出 this 引用作用域的一些错误。这
created mounted、updated 和 destroyed
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
模板语法
-
v-once： 一次性插入数据，并且是不会更新。
-
v-html：会将 字符串 HTML 转换成真正的HTML。
-
插值语法{{}} 支持全部的 js 表达式，比 angular 支持的好很多。
- 每个绑定只能包含单个的表达式。
- 不应该在模板表达式中试图访问用户定义的全局变量。
<!-- 每个绑定都只能包含单个表达式 --> <!-- 这是语句，不是表达式 --> {{ var a = 1 }} <!-- 流控制也不会生效，请使用三元表达式 --> {{ if (ok) { return message } }}
指令
有
v-前缀的特殊特性，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
-
参数：一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
<a v-bind:href="url">...</a> <!--在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。--> // 做事件监听 <a v-on:click="doSomething">...</a> // v-bind 可以把值绑定到动态属性上，并且属性的值可以不是字符串。 -
修饰符：修饰符 (Modifiers) 是以半角句号
.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。// 在点击提交之前执行 <form v-on:submit.prevent="onSubmit">...</form>
缩写
对 v-bind / v-on 常用的 2 个指令做了缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
v-bind 更改元素本身属性的值。
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
class & style 绑定
-
对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data: { activeColor: 'red', fontSize: 30 } -
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div> -
对于 css 属性 Vue 会自动的添加一些属性 如 transform
-
多重值： 会根据浏览器不同自动选择
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
Vue 实力对象属性
- computed：计算属性返回一个计算好的值。
1. getter 属性
2. setter 属性
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: { // 计算属性
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
1. 计算属性的值，是依赖 message 的值。
2. 如果 message 的值不更改那么计算属性的值也不会变化。
-
methods： 方法
1.methods & computed 都可以实现相同的功能 2.相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。而 computed 计算的值是有依赖关系 -
侦听属性： 也是对 data 属性的值做一部分更改
1.watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该。但是计算属性是没有办法做到这一步的。 2.vm.$watch API。 可以参考
条件渲染
-
v-if 、v-else、v-else-if ， 这些指令可以配合 template 元素
- 如果元素不是经常切换
1.在 <template> 中可以操作多个模块显示和删除 <template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> 2.v-else 必须跟在 v-if后面不然是不会识别 <div v-if="Math.random() > 0.5"> Now you see me </div> <div v-else> Now you don't </div> 3.v-else-if 也必须跟在 v-if | v-else-if 后面 -
v-show：仅仅操作 css 的 display 的属性值。
- 如果元素经常切换，用 v-show
-
v-show不支持<template>元素，也不支持v-else。 这个和 if else 就有很大的区别。
-
v-for
// 可以在 v-for 方法里嵌套方法 <li v-for="n in even(numbers)">{{ n }}</li>-
可以使用 <template></template> 渲染多个元素
-
v-if 和 v-for 可以处在同一个元素上，这在 Angular 上是不允许的。
// 但是 v-for 优先级高于 v-if， v-if 会在 v-for 的遍历中执行。 <li v-for="todo in todos" v-if="!todo.isComplete"> {{ todo }} </li>
-
数组更新检测
数组更新也可以检测？ 懵逼了真的，起了个名字 ”变异的数组“。
-
数组方法不会触发跟踪属性的方法，
filter(),concat(),slice()。 其它的数组方法都是会触发。// 注意： 1.当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 2.当你修改数组的长度时，例如：vm.items.length = newLength 只能用 Vue.set(v.item, indexOfItem, newValue); // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue); 也可以用 vm.$setvm.$set 实力方法 是 全局Vue.set 的别名
对象检车注意事项
-
还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：
-
可以用 vm.$set 或 Vue.set 方法给已经实例化的对象添加属性
-
Object.assign
vm.userProfile = Object.assign({}, vm.userProfile, { age: 27, favoriteColor: 'Vue Green' })
了解组件 ？
现在理解有点模糊，需要在整理。
- 通过 prop 父组件向子组件传递值
- 子组件 - > 父组件传递值 ，子组件 $emit 触发一个事件，然后父组件监听对应的值。
事件
事件的运用，参数的传递
- 事件可以直接执行 js 表达式，也可以传递参数
- 事件里存在的修饰符也可以对事件执行造成影响
.once执行一次... - 使用修饰符的时候，可以使用多个。但是顺序的搭配不同，对事件的影响也会不同。
- .passive 和 .prevent 不要同时使用，prevent 会被忽略
数据绑定
- 单项数据绑定 v-model 但是会忽略初始值。基本表单元素都是可以获取值
- 可以实现多个 checkbox 的值绑定到同一个数组
- select 元素推荐一个 空的 option 值
自定义组件
组件是可复用的 Vue 实例
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
<div id="components-demo">
<button-counter></button-counter>
</div>
//js
new Vue({ el: '#components-demo' })
