———————————-(VUE壹)————————————-

VUE的初步认识=>Day8_6

一.什么叫做VUE?

vue主流的前端三大框架之一 : react vue angular

二.VUE的概念

vue是一个构建用户界面的框架(库),它的目标是通过尽可能简单的api实现响应的数据绑定和组合的视图集合 vue自身不是一个全能框架的核心是只关注视图层,因此它非常容易学习，非常容易与其它库或已有项目整合 vue在与相关工具和支持库一起使用时, 也能完美地驱动复杂的单页应用,在之后的课程中,我们会配合webpack来使用

三.vue的特点

3.1)响应的数据绑定/响应式编程

保持状态和数据的同步

Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM时，我们的代码常常是命令式的、重复的与易错的。 Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM“绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。 每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM更新搅在一起。这让我们的代码更容易撰写、理解与维护。

3.2)组件化

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

3.3)局部刷新应用到了极致

四.vue的编码

4.1)基础指令解释

基于H5的形式了解
v-xxxx
表示vue指令,只有vue才会认识
指令: vue指令 还有自定义指令
指令值:是一个表达式,是一个被引号括起来的表达式(单引号也可以是双引号)

1.  v-cloak  解决页面闪烁问题
            [v-cloak]{ display: none; }

1. {{}} 插值表达式
2. v-text 类比jQ里的text()
3. v-html 类比htm的html()

4.2)vue简单搭建代码过程

<!--1.引包-->
<script src="vue-2.4.0.js"></script>

<!--html端-->
<!--2.创建vue容器-->
<!--3.指定容器的标识符.支持id和class 建议统一使用-->
<div id="a" style="font-size:50px"></div>
<button id="zanting">暂停</button>
</body>

//js端
/!*4.创建vue实例  * *!/
    var vm =new Vue({
        // 5.指定容器元素, 容器:就是vue的实例的作用域
        el:'#app',  //vm这个实例的容器是页面上id为app的标签
        //6.添加data属性,data是vm实例的数据仓库,所有的变量都在data里头定义
        data:{
            //仓库里头添加变量msg,变量值为hello world
            msg:'hellow world',
            msg1:'<h1>hellow world</h1>',
        },method:{
            alert:function (msg) {
                alert("")
            } }
    })