vue基础及指令系统

了解vue的作用及基本使用结构
掌握Vue差值的方法：使用vue将数据绑定到标签内容
{{}} v-html v-text
掌握Vue差值的方法：使用vue将数据绑定到标签属性
v-bind：src=”imgSrc”
首先我们得知道，vue是让我们换种方式写js，除了vue特有的语法之外，我们大部分时间还是在写基本的js语句（变量 数据处理 方法）。所以要想学好vue，我们对于基础的js语法必须有一定了解。
必须要掌握的基础知识：html +css +javascript

开始使用vue 如何获得 和 学习vue
官方网站：https://cn.vuejs.org/
获得vue源码
学习vue
vue是目前非常优秀且学习成本最低的js框架，另外vue是一套用于构建用户界面的渐进式框架。（根据项目或者学习需求不同，可以学习不同的阶段）vue核心库只关注视图层，非常容易掌握。
vue
vue-router
vuex
vue-resource
构建工具vue-cli

如同咱们学习jquery，需要$(function(){})一样，vue作为一个框架，也为我们设计了一整套的用法。首先就是基本结构。
vue的基本结构，就是在使用Vue（）构造函数，创建一个vue实例（对象），在创建这个实例时，我们传入各种用于显示数据（数据，方法）。

仅仅这么写是不会有效果的，我们的把这些数据或者是方法，写到html中才可以。

vue的数据绑定 I 另一种数据绑定方式
除了常见的{{}}的方式，vue还有另外两种绑定数据的方法
v-html =“name” 可以识别html结构
v-html =“name” 不能识别数据中html结构，全部以文本形式展示
补充：{{}}的方式，插入的数据，默认是不能识别html结构的，因为这会造成危险。一旦用户或者一些有心人，通过向你的数据中写入了html结构，而你又支持解析他们为真正的html，这有可能对你的网站造成根本性的破坏。

vue的属性数据绑定
如果要将数据绑定给元素属性进行使用，一定是要借助vue提供的命令来实现。
大家跟我写一段代码，感受在代码重构（换种方式写代码）的过程中，代码的简化。（以及代码的执行速度上的提升，这个你们只能听我说，看是看不出来的）。

vue的指令系统
vue可以让我们在html中心写入任何我们想写的js代码，但是直接完全按照js的写法写上去，vue就会显得很low（真是如此，我们完全没有必要学习vue了）
是事实，vue设计了一套指令系统，来代替各种js逻辑。我们之前学过的v-***，就是vue指令。
v-bind：class=“name” =======》div.setAttribute(“class”,name)
缩写 ：class = “name”
v-html=“name” ========>div.innerHTML = name;
v-text = “name” ========>div.innerText =name;
现在能理解vue换种方式写js的说法了吗，所以说熟练掌握对于学习vue的很重要。大家记住这样一个说法：javascript能力就代表你在前端这个行业的天花板。
接下来，我们要学习vue指令系统，另外几个常用的指令
v-if v-else
首先这是个判断语句
这里是作为判断元素是否加载

除此以外 还有 v-if v-else-if v-else 大家能想到如何使用吗
接下来，我们要学习vue指令系统，另外几个常用的指令
v-show
控制元素显示和隐藏
v-show = “boo” boo：true、、显示
v-show = “boo” boo：false、、、隐藏

思考？ v-if v-show 的区别？
v-if判断元素是否加载，减轻服务器压力
v-show是操作元素的display属性

v-model是实现数据双向绑定的
刚开始我们简单分析了下MVVM到底是个什么东西。我们已经知道，vue将model中的数据（或者是数据变化），反应到viewModel上。viewModel再将数据反应到view上（界面）。
v-model的作用就是获得view的数据（或者是数据变化），反映到viewModel上。再由viewModel将界面的数据变化反应到model中。
这就实现了所谓的双向数据绑定。
这个很重要，非常非常重要。
不写一句js做出一个加法运算

v-on 用来绑定函数 =========》div.on+事件类型 = function（）{}

v-bind的高级用法
在前边我们已经使用过v-bind元素属性进行绑定
这里要说的是特殊情况，像 class style这些属性都可以有多个值。
这里vue对这两个属性提供了特殊的语法，完成不同场景需要。
以class为例:场景一：这个class动态添加（有或者没有）

vue的指令系统 v-once
作用：数据只会被绑定一次，以后model中的数据改变，也不会引起此处的view的更新

v-clock
作用：在vue渲染完整个DOM后才能显示。防止网速较慢是，用户看到结构中的{{}}，这个指令要配合css属性使用