Vue-2.0基础教程：Vue的基本代码

Vue.js是什么？

• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue的基本代码

• 首先在我们创建的HTML文件中导入vue的包

• 在页面中创建vue的实例

var vm = new Vue({ //在mvvm架构思想中 new的 vue 相当于 vm
  //当我们导入vue的包之后浏览器的内存中就多了一个vue的构造函数 
})

• 基本代码解析
  el:'#app', //Element的缩写表示当前我们new的实例要控制页面的哪个元素,在这里这个Vue组件控制的是id为app的这个div

var vm = new Vue({ //在mvvm架构思想中 new的 vue 相当于 vm
    el:'#app' 
})

data:{ //data属性中存放的是el中要用到的数据,这里的data就相当于MVVM中的M
}

var vm = new Vue({ //在mvvm架构思想中 new的 vue 相当于 vm
    el:'#app',
    data:{  
        message:'欢迎学习VUE', //通过vue提供的指令可以很方便的把数据渲染到页面上，vue不提倡操作dom元素
    }
})

• 把data渲染到页面上格式是：{{ message }}

    

        
{{message}}
    

这样就能在页面上显示内容了

image.png

Vue基本指令

• v-cloak：可以解决插值表达式闪烁的问题 表达式前后加内容不会被覆盖

{{msg}}

• v-text:不会出现闪烁问题 元素里面添加内容会被覆盖

• v-html: 则会解析html语句

• v-bind：是vue中提供的用于绑定属性的指令，可以写合法的js表达式 可以简写为:
  此段代码中的v-bind绑定的值来自于Vue中的mittle

• v-on：事件绑定机制,缩写是@
  例如绑定点击时间：v-on:click='show'

var vm = new Vue({
        el:'#app',
        data:{
            msg:'123',
            msg2:'
哈哈 我是一个 大大 的H2 
',
            msg3:'
克里斯保罗去雷霆了，回到了梦开始的地方
',
            mytitle:'这是一个自己定义的Title'
        },
        methods:{ //这个methods 属性中定义了当前vue实例的可用方法
            show:function(){
                alert("hello VUE")
            }
        }
    })
    //只要触发点击事件就会调用Vue的show方法

• v-model 和双向数据绑定
  之前介绍的 v-bind：只能实现数据的单向绑定，也就是说只能从M --- V
  v-model则可以实现数据的双向绑定即 M--V V--M
  v-model 只能用在表单元素中

image.png