关于vue.js:vue总结

vue 总结

Vue 根底

Vue 的两个外围是：
数据驱动：viewmodel 保障视图和数据的一致性
组件零碎：利用类的 UI 能够看做是由组件树形成
罕用的指令：
v-text 插入文本
v-html 插入 HTML
v-model 双向绑定
v-on 事件绑定
v-for 循环
v-bind 属性绑定
v-if 条件渲染
v-else 条件渲染
v-show 是否暗藏
罕用的修饰符
v-on：
.stop 阻止冒泡
.prevent 阻止事件默认行为
.native 阻止根元素的原生事件
.captrue 增加事件侦听器时应用 capture 模式
.once 只触发一次
v-bind：
,prop 用于绑定 DOM 属性
.camel 将 kebab-case 个性名转换为 camelCase。
.sync 语法糖
v-model
.lazy 取代 input 监听 change 事件
.number 输出字符串转为数字
.trim 输出首尾空格过滤掉

每个 Vue 利用都是通过用 Vue 函数创立一个新的 Vue 实例开始的：

var vm = new Vue({// 选项})

模板语法 <{{}}>

v-for

v-for 指令用来渲染一个列表，此指令须要应用 item in items 模式的非凡语法，其中 item 是源数据数组，而 item 则是被迭代的数组元素的别名

*   {{item.message}}

//js 代码 var example1 = new Vue({el: '#example-1', data: { items: [ { message: 'Foo'}, {message: 'Bar'} ] } })

在 v -for 块中，咱们能够拜访所有父作用域的属性。v-for 还反对一个可选的第二个参数
即以后项的索引 index

*   {{index}}--{{item.message}}

还能够用 of 代替 in 作为分隔符，因为它更靠近 JavaScript 迭代器的语法：

<div v-for="item of items"></div>

还能够在 v -for 中应用对象

*   {{value}}

// 剪切的局部 js 代码 data: {object: { title: 'How to do lists in Vue', author: 'Jane Doe', publishedAt: '2016-04-10'} }

在遍历对象时还能够提供第二个的参数为 property 名称，也就是键名

<div v-for="(value,name) in object">
    {{name}} -- {{value}}
</div>

还能够用第三个参数作为索引

<div v-for="(value,name，index) in object">
    {{name}} -- {{value}} --{{index}}
</div>

为了给 Vue 一个提醒，以便它能跟踪每一个节点的身份，从而重用和从新排序现有元素，须要为每项提供惟一 key 属性

<div v-for="item in items" v-bind:key="item.id"></div>

数组的更新检测：
变异办法
一些扭转数组的办法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

替换数组
filter(),concat() 和 slice()，他们不会扭转原数组，总是返回一个新数组，当应用非变异办法时，能够用新数组替换旧数组

example1.items = example1.items.filter(function (item) {return item.message.match(/Foo/)
})

注意事项
Vue 不能检测一下两种数组的变动
1, 当利用索引间接设置一个数组项时，如：app.items[indexOfItem] = newValue
2, 当批改数组的长度时。如：app.items.length = newLength
第一种的解决办法:

// Vue.set
Vue.set(app.items,indexOfItem,newValue)
或者
app.$set(app.items,indexOfItem,newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

第二种解决办法应用 splice
app.items.splice(newLength)

对象变更检测注意事项
因为 JavaScript 的限度，Vue 不能检测对象属性的增加或者删除

v-on

用 v -on 指令监听 DOM 事件，并在触发运行一些 JavaScript 代码

<button v-on:click="greet">greet</button>

prevent 阻止默认事件
.stop 阻止冒泡
.stop.prevent 能够串联着用
.capture 增加事件监听时应用事件捕捉模式即外部元素触发的事件先在此解决，而后才交由外部元素进行解决
.self 事件不是从外部元素触发的
.once 事件只会触发一次
.passive 默认行为立刻触发
还有按键修饰符
一些别名
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
零碎润饰键
.ctrl
.alt
.shift
.meta
.exact 修饰符
润饰容许你管制由准确的零碎修饰符组合触发的事件

v-model

双向绑定

组件

组件传值之父到子：prop

组件传值之子组件到父组件：通过 $emit 触发对应的事件，将值传给父组件

组件传值之兄弟间的组件传值：bus(两头量)

组件名大小写
不是很倡议用驼峰式命名
当用驼峰式命名的时候，间接在 DOM 中援用的应用不辨认大写字母
全局注册

Vue.component('component-a', {})

部分注册

var componentA = {
    components:{'component-a':ComponentA}
}

模块零碎
在模块零碎中部分注册

prop 大小问题
prop 能够以对象的模式列出 prop，这些属性的名称和值别离是 prop 各自的名称和类型
传递动态或者动静的 prop
动态：

<blog-post title="My journey with Vue"></blog-post>

通过 v -bind 动静赋值

<blog-post v-bind:title="post.title"></blog-post>

这个 prop 用来传递一个初始值；这个子组件接下来心愿将其作为一个本地的 prop 数据来应用。
最好定义一个本地的 data 属性并将这个 prop 用作其初始值：
type 能够是下列原生构造函数中的一个：

*   String
*   Number
*   Boolean
*   Array
*   Object
*   Date
*   Function
*   Symbol

另外还可是个自定义的构造函数

VueX

vuex 的四大金刚：state，getter，mutation，action

state：

组件中可通过 this.$store.state 获取 Vuex 的状态值，设置时通过 this.$store.commit() 设置，mapState 辅助函数能够帮咱们生成计算属性；

getter：

能够看做是 state 中的计算属性，还能够以属性的形式来拜访 getters 中的值，也能够通过让 getter 返回一个函数，来实现给 getter 传参，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到部分计算属性；

mutation：

更改 Vuex 的 store 中的状态的惟一办法是提交 mutation，能够向 store.commit 传入额定的参数，即 mutation 的 载荷（payload），对象格调的提交形式，Mutation 需恪守 Vue 的响应规定，应用常量代替 Mutation 事件类型，Mutation 必须是同步函数，在组件中提交 Mutation；
Action 相似于 mutation，不同在于：
1, Action 提交的是 mutation，而不是间接变更状态。
2, Action 能够蕴含任意异步操作。

VueRouter

axios

下载模块的指令
$ npm install axios

执行 get 申请 
axios.get('/user', {
    params: {ID: 12345}
  })
  .then(function (response) {console.log(response);
  })
  .catch(function (error) {console.log(error);
  });

执行 post 申请
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {console.log(response);
  })
  .catch(function (error) {console.log(error);
  });

100. 本期的教程到了这里就完结啦, 是不是很 nice, 让咱们一起致力走向巅峰!