Vue笔记——1.基本语法指令

小妍Vue笔记——目录

Vue笔记——1.基本语法指令

Vue笔记——2.搭建脚手架并快速创建Vue项目

Vue笔记——3.实例

Vue笔记——4.模板语法

Vue笔记——5.计算属性

Vue笔记——6.Class 与 Style 绑定

Vue笔记——7.条件渲染

Vue笔记——8.列表渲染

Vue笔记——9.事件处理

Vue笔记——10.表单输入绑定

Vue笔记——11.组件

---

什么是vue.js？

Vue.js是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）

Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）

什么是指令？

   指令是什么：
   
   解释：指令 (Directives) 是带有 v- 前缀的特殊属性

   作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

在创建vue实例的时候，其中有两个固定参数

el ：与DOM的id进行绑定，相互关联；
data：表示json格式的数据，而这些数据都是响应式的

指令带有前缀 v-，表示它们是 Vue 提供的特殊特性。它们会在渲染的 DOM 上应用特殊的响应式行为。

Vue.js模本语法：

1、插值表达式

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值

v-html 指令 ：用于输出 html 代码：
v-text 指令 ：是用于输出文本 注意：{{}}是v-text的简写形式

v-html用于输出html，它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

2、Vue.js的条件判断

v-if条件判断指令

注意：
1、 v-show 其用法和 v-if 相同也可以设置元素的显示或隐藏。但是不具备条件判断功能
2、 v-else、v-else-if 可以给v-if 设置一个 else 模块、else-if模块
3、 v-else 、v-else-if 必须要跟在 v-if 或v-else-if 模块后面

可参考：v-if与v-show二者性能比较

3、Vue.js循环语法

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名

迭代数组

<div id="app">
   <ol>
    <li v-for="site in sites">
     {{ site.name }}
    </li>
   </ol>
  </div>
  <script>
   new Vue({
    el: '#app',
    data: {
     sites: [
      {name: 'Runoob'},
      {name: 'Google'},
      {name: 'Taobao'}
      ]
    }
   })
  </script>