Vue基础语法

##Vue的基础语法及一些底层原理
0. vue.js源代码

• 匿名函数 (function(){}) ()

  1. 特点
  • 安全性高
  • 减少了函数命名冲突
  • 第二个括号才是函数的真正运行， 里面可以传入实际参数
  • 第一个括号确定了匿名函数的作用范围， 语法不会报错， 里面放一个没有名字的函数， 函数可以接收形式参数
  2. 底层代码封装
  • 匿名函数作用

    1. 确定vue.js这个库的使用方法

       • 直接将Vue当做全局的一个方法使用， 因为将Vue挂在了 window
       • 使用了amd来定义vue.js这个库为一个模块， 这样我们才能模块化引入

    2. 封装库如何定义

1. 模板语法

   1. alert console.log 不能用
   2. if条件改成使用三元表达式
   3. 方法一定要写在methods里面， 不要直接写在模板语法中
   4. 模板语法中支持使用匿名函数可以直接写

2. 列表渲染

v-for指令

v-for = " xxx in data "

{{ xxx }}

如果需要 索引 index

v-for = "(item,index) in data "

{{ item }} — {{ index }}

对象：
v-for = “(index,item,key) in obj”

总结:
1. v-for 最多可以有三个参数
2. 格式
v-for = “(index,item,key) in data”
名词解释：
index: 索引
item； data中的每一个
key； 如果是对象， 表示对象的key
3. v-for如果有循环嵌套， 那么value可以写成一样的命名， 但是我们建议大家写成不一样的命名， 理由： 比较语义化
4. v-for 可以循环 数字或是一个字符

扩展： 
  v-for = ' item in data'

  底层： 
    function  v-for( arg ){
      //做字符串处理
      var data = 'data'
      for( var i = 0 ; i < data.length; i++ ){
        
      }
    }

3. 条件渲染

两种：
1. v-if
* 单路分支
javascript <p v-if = " f "> true </p>
* 双路分支
javascript <p v-if = " f "> true </p> <p v-else> false </p>
* 多路分支
javascript <p v-if = " text === 'A'"> A </p> <p v-else-if = " text === 'B'"> B </p> <p v-else> C </p>
2. v-show
javascript <p v-show = " f "> if条件 </p>

v-if vs v-show

1. v-if 操作的是DOM存在与否, v-show操作的DOM的display样式属性
2. 性能
  * 如果条件为假，v-show有较高的初始渲染开销
  * v-if 有更高的切换开销

项目中建议：
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

4. 事件

   1. 属性绑定
      举例:

      function alert(){ alert('hello vue.js') }

   2. js操作
      // 1. 获取数据
      var data = ‘hello vue.js’
      // 2. 获取DOM
      var app = document.querySelector(’#app’)
      // 3. 渲染数据
      app.innerHTML = data
      // 4. 添加事件
      app.onclick = function(){
      app.style.background = ‘red’
      }

   3. 事件的组成部分：

      1. DOM
      2. on 添加事件的形式
      3. 事件类型 click
      4. 事件处理函数

   4. Vue.js中事件可以通过 v-on: eventType:eventName 来绑定(缩写v-on可以用@来代替)

总结：

1. 数据修改了， 视图就会更新， 这个现象就叫做， 数据驱动视图渲染

2. Vue是由两大内容构成

3. 指令

4. 组件

5. 指令

6. vue中使用v-xxx来表示一个指令， 这个指令写在 标签的属性中

7. 属性中不写 mustache语法， 内部中要写的

8. 如果 new Vue(options)如果没有el选项， 那么我们可以手动进行模板装载，
   new Vue().$mount(’#app’)