vue
一、介绍
Vue是一套用于构建用户界面的渐进式框架
1.渐进式的理解
Vue 的核心库只关注视图层
便于与第三方库或既有项目整合
与[现代化的工具链](https://cn.vuejs.org/v2/guide/single-file-components.html)以及各种[支持类库](https://github.com/vuejs/awesome-vue#libraries--plugins)结合使用,也可为应用提供驱动
2.环境安装
<!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>
vue-cli方式(新手不推荐)
3.数据驱动
vue用的是数据驱动的思路 数据改变了,视图会“自动"改变
4.虚拟dom和diff算法使数据改变时视图变化的dom操作效率很高
虚拟dom(js对象,对象里存储的是模板的内容调用render函数返回的对象)
数据改变了,比对数据变化前后的对象的差异(diff算法), 找出变化的部分,对变化的部分做真实的dom操作, 提高dom操作的效率
###5、MVVM
M model 模型 存储数据 dataV view 视图 模板(template)VM viewModel 视图模型 vm
6、检查的数据的变化的原理 Object.defineProperty
数组用下标改变,或者对象增加属性,这样的改变数据是不能触发视图更新的,要用 Vue.set(对象,属性,值) 或this.$set(对象,属性,值)
7、学习的五大部分 ( 指令 组件 路由 vuex 第三方的插件)
二、helloworld程序
1、一个基本的程序结构
new Vue({el:“挂载的元素” 挂载的元素不能是body或htmldata:{ key:value...} 存储数据的地方template:"<div>模板的内容" ,渲染数据的是模板 ,如果没有指定template,默认的模板就是el挂载的元素,如果el和template同时存在,渲染的是template模板的内容})
2、插值表达式 { {插值表达式}} Mustache
不能为 if for 这样的语句。可以调用函数,可以写表达式
3、模板 template
1) template和el同时存在 渲染的是template的内容2) 模板的内容不能只是文本3)根元素只能有一个
4、computed
~~~jscomputed: { // 计算属性的 getterreversedMessage: function () { // `this` 指向 vm 实例return this.message.split('').reverse().join('')}}~~~
~~~jscomputed: { fullName: { // getterget: function () { return this.firstName + ' ' + this.lastName},// setterset: function (newValue) { var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}}~~~
5、watch
~~~jswatch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal)},// 方法名b: 'someMethod',// 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深c: { handler: function (val, oldVal) { /* ... */ },deep: true},// 该回调将会在侦听开始之后被立即调用d: { handler: 'someMethod',immediate: true},~~~
+ 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护,所以,对于任何复杂逻辑,你都应当使用计算属性
三、指令
1、v-bind
- 把变量的值绑定到标签的属性上 可以简写为“:"- v-bind:style="{key:value....}" 对象的形式- v-bind:class="{'类名':布尔值的表达式}" 常用- v-bind:class="[类名1,类名2...]"
2、v-on
+ 事件监听的指令 v-on:事件="事件处理函数"+ 事件处理函数是放在methods里面+ $event 事件对象 (事件处理函数调用时不传参数 默认 传递的参数是$event)+ 阻止冒泡 v-on:事件.stop,阻止默认的行为 v-on:事件.prevent (.stop .prevent 指令的修饰符)+ 简写为 @+ 监听键盘事件 v-on:keyup.enter 回车 v-on:keyup.esc esc键
3、v-if
~~~html例如:<p v-if="a>0">1</p><p v-else-if="a===0">0</p><p v-else>-1</p>~~~
是惰性的 条件不满足,不渲染 有更高的切换开销
4、v-show
+ 满足条件显示,不满足条件的就隐藏。
不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换
+ 有更高的初