vue 基础知识,学习笔记,分享一下

一、vue 简介

1. 渐进式

  • 易用 html css javascript
  • 高效 开发前端页面 非常高效
  • 灵活 开发灵活 多样性

2. Vue 是一个javascript 框架

  • 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定 双向绑定 MVVM
  • 响应式的数据驱动(页面是由数据来生成的,当数据改变以后页面会同步的更新)

二、vue 特性 

  •  轻量级框架

        Vue.js 能够自动追踪依赖的模板表达式和计算属性,提供 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API

  • 指令 

        Vue.js 与页面进行交互,主要就是通过内置指令来完成的,指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。 

  • 组件化 

        组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。 在 Vue 中,父子组件通过 props 传递通信。 

  • 双向数据绑定 

        声明式渲染是数据双向绑定的主要体现,同样也是 Vue.js 的核心,它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。 

三、vue 指令 

  •  事件绑定(v-on)

事件 事件源:发生事件dom元素

事件:发生特定的动作 click.... 监听器 发生特定动作之后的事件处理程序 通常是js中函数

  • 在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如 v-on:click
  • 在v-on:事件名的赋值语句中是当前时间触发调用的函数名
  • 在vue中事件的函数统一定义在Vuq实例的methods属性中
  • 在vue定义的事件中this指的就是当前的Vue实例,可以在事件中通过使用this获取Vue实例中相关数据 
  • v-show和v-if 

  • v-if 的特点:每次都会重新删除或创建元素
  • v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式
  • v-if 有较高的切换性能消耗,v-show 有较高的初始渲染消耗
  • 使用场景: 如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show; 如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if 
  • v-for 

V-for:作用就是用来对对象进行遍历的(数组也是对象的一种)

  1. v-for循环普通数组

    索引值:{{index}} --- 每一项:{{item}}

  2. v-for循环对象数组

    Id:{{ item.id }} --- 名字:{{ item.name }} --- 索引:{{index}}

  3. v-for循环对象     在遍历对象身上的键值对的时候, 除了 有 val key ,在第三个位置还有 一个 索引

    值是: {{ val }} --- 键是: {{key}} -- 索引: {{i}}

     
  • v-text和v-html 

  •  v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中 innerText
  • v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于javascript中 innerHTML

四、Vue事件修饰符 

  •  使用 .stop 阻止冒泡

  •  .self只有点击当前元素时候,才会触发事件处理函数

  •  使用 .prevent 阻止默认行为

百度一下
  • .once 只触发一次事件处理函数

百度一下

 五、Vue样式

  • 直接传递一个数组

我是h1

  • style样式

我是h1

data { styleObj1: { color: 'red', 'font-weight': 200 }, styleObj2: { 'font-style': 'italic' } }
  •  使用三元表达式

我是h1

使用 对象来代替三元表达式,提高代码的可读性:

我是h1

六、Vue生命周期

  •  初始化阶段

  • beforeCreate(){} 

        生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有初始化好data 和 methods 属性

  • created(){ }    

        生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关关方法,但是还没有挂载到页面中

  • beforeMount(){}

        生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译,但是还有完全挂载到页面中

  • mounted(){}

        生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面,挂载到了页面指定的容器中显示

  • 运行阶段

  •  beforeUpdate(){}

        生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据,因为此时还没有开始重新渲染DOM节点

  • updated(){}

        生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化 页面中数据已经和data中数据一致,界面已经被重新渲染好了

  • 销毁阶段

  • beforeDestory(){}

        生命周期第七个函数,Vue实例就已经从运行阶段进入到了销毁阶段,Vue中所有数据 methods components 还没有真正执行销毁的过程        

  • destoryed(){}

        生命周期的第八个函数,该函数执行时,Vue实例彻底销毁,调用后,vue 实例 指示的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁

你可能感兴趣的:(Vue,笔记,vue.js,javascript,前端)