Vue学习总结1-vue.js

Vue 学习总结-vue.js

1.Vue 简介
vue 是一套用于构建用户界面的渐进式的js框架。Vue核心关注的是视图层，包括Vue.js、Vue-router、Vuex。Vue采用了MVVM模式实现了双向数据绑定。MVVM模式分为Model: 模型层(JavaScript对象)，View: 视图层(DOM对象)，ViewModel: (视图与数据之间的中间件)，Vue.js就是VMVM中ViewModel的实现者。

在MVVM模型中中不允许 数据 和 视图 直接通信的，只能通过 ViewModel 来通信，而 ViewModel 就是定义了一个 Observer 观察者。viewmodel能够监听到数据(model)变化对视图(Dom)层做出更新，同时监听视图层更新来更新数据.Vue.js是MVVM的实现者。核心实现了DOM监听与数据绑定。其它实现框架还有AngulaRJS，ReactJS,微信小程序。
Vue.js优点有轻量级(Vue.js 压缩后有只有 20多kb)，移动优先，开源社区活跃度高，容易上手。
Vue.js有两大核心要素数据驱动和组件化。
Vue 基础标签使用
插值表达式

    
    



    
插值表达式
    

        
{
     {title}}
        

        
        
        
stu信息
        
name: {
     {stu.name}}
        
age: {
     {stu.age}}
        
        
{
     {array}}
        
        
{
     {sayhello()}}
    

基础标签

    
    




    

        
        
{
     {title}}
        
输入框改变title值:
            
        
        

            
            
            
            
        
        
        

            博客连接
            博客连接
        
        
        
固定标题{
     {title}}
        
        

        
        


    

事件绑定

    
    




    
事件绑定
    

        
        
数值:{
     {count}}
        数值加一
        步长2自增
        
        步长为5
        

    

虚拟dom和diff

    
    




    
虚拟dom和diff
    

        
{
     {count}}
        
{
     {count>10?'大于10':'小于10'}}
        
{
     {result}}
        
    

computed(计算属性)
计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已

    
    





    
computed(计算属性)
    


        
当前时间:{
     {currtime1()}}
        
间隔消息:{
     {msg}}
        
计算属性时间:{
     {currtime2}}
    

watch监控(监听参数变化情况)

    
    




    
watch监控
    

        
新参数值:{
     {count}}
        
老参数值:{
     {result}}
        参数加一
    

vue 样式绑定

    
    
    




    

        
取值结果：{
     {attachRed}}
        

        
        

        

        
        

        

        
        

        
        

    

vue分支语句
v-if
v-else-if
v-else
v-show: 实际上是让该元素的display属性为none,隐藏的效果。所以性能更好。

    
    




    
分支语句
    

        
show为true我出现了
        
show为false我出现了
        
show为true我出现了
        改变show值
    

vue循环语句

    
    




    
循环语句
    

        
普通循环
        

            
{
     {str}}
        
        
        
包含索引循环
        

            

                {
     {i}} {
     {str}}
            
        
        
循环json对象
        

            

                {
     {i}} {
     {name}} {
     {age}}
            
        
        
下标循环
        {
     {i}}
    

vue-template

    
    




    
template标签
    
    
        

            
{
     {title}}
            

            
            
            
stu信息
            
name: {
     {stu.name}}
            
age: {
     {stu.age}}
            
            
{
     {array}}
            
            
{
     {sayhello()}}
        
        

总结
vue是以数据驱动的渐进式的js框架，实现了MVVM双向绑定，以虚拟DOM和diff算法为核心，所谓虚拟DOM和diff算法是指当前页面内容发生改变时，单单更新改变部分。页面解析运行效率高。v-show比v-if标签效率更高，原因是v-show实际上是让元素的display属性为none。实现隐藏，所以性能更高。